Главная » Увеличиваем скорость загрузки сайта
    РейтингРейтингРейтингРейтингРейтинг

Увеличиваем скорость загрузки сайта

В данной статье мы поговорим конкретно об увеличении скорости загрузки сайта либо блога в два или три раза.

Содержание:
  • § 1. Ускорение сайта методом оптимизации изображений
  • § 2. Ускорение загрузки сайта засчет оптимизация CSS и JavaScript
  • § 3. Основные работы по увеличению скорости загрузки сайта
  • § 4. Простые советы, как ускорить загрузку сайта 

Скорость работы сайта – один из самых важных показателей при создании  сайта и интернет-приложений.
Чем быстрее будет грузиться  сайт, тем больше посетителей  можно получить с поисковых систем, а, следовательно, и больше денег на этом заработать.

Чтобы сайт нормально продвигался в поисковых системах, нужно будет ускорить его работу. Для начала нужно использовать инструмент для проверки и опртимизации скорости сайта. Подойдет для этого PingDoom или PaqeSpeed Insights.

§ 1. Ускорение сайта методом оптимизации изображений

Оптимизация размера изображений может быть сложной задачей, а ее решение имеет множество вариантов, их которых можно выбирать. Это могут быть форматы файлов, различные инструменты оптимизации изображений, лучшие примеры использования кода и CSS, которые помогут вам сохранять изображения и взаимодействовать с ними самым лучшим образом.

Ниже приведено несколько наиболее важных, на мой взгляд, рекомендаций, которые необходимо учитывать, оптимизируя изображения для интернета.

Форматы изображений

Форматирование изображений – это наиболее важная тема, и является таковой потому, что каждый знает, что различные форматы влияют на скорость загрузки изображения. Однако существует сформировавшееся мнение на этот счет, которое мы можем использовать де-факто как стандарт. JPEG – для фотографий, GIF – для плоских изображений, содержащих малое количество цветов, и PNG – для всех остальных. Большинство веб-дизайнеров и разработчиков, которых я знаю, используют PNG практически для всего, кроме одноцветных и двухцветных кнопок, где они используют GIF.

Теперь вы можете поиграться с приведенными спецификациями, но всегда помните о существовании стандартов при сохранении маленьких легких картинок и больших и тяжелых. Если вы занимаетесь сайтом по фотографии, а ваши картинки загружаются дольше, чем на других сайтах, то попробуйте воспользоваться приведенными ниже методами.

Код изображения

Самое плохое, что мы можем сделать и отрицательно повлиять на скорость загрузки изображения, это позволить коду автоматически выставлять размеры изображения. Ну что ж, можно сказать: «Разрешим коду сделать ___ для нас». В таком случае обычно говорят: «Можешь сделать лучше – сделай сам», и это действительно правильно. Используя такие показатели, как width=’60px’ height=’50px’, можно действительно снизить нагрузку на сервер и время загрузки им изображения, так как сервер считывает информацию о странице и видит поставленные перед ним задачи. Потому, убедитесь, что вы на верном пути и сделайте так со всеми вашими изображениями.

Инструменты оптимизации изображений

Инструменты всегда полезны. Хорошо, в большинстве случаев… Иногда они мешают и отвлекают внимание, но в данном случае они действительно будут очень полезными. Если вам удастся найти замечательный инструмент для оптимизации изображений, прежде всего, пожалуйста, напишите об этом в комментариях, так как мы всегда в поиске лучшего. Следующие несколько инструментов – мои любимые. Мне нравится ImageOptim для Mac и Riot для Windows. Они очень отличаются друг о друга, но выполняют одну задачу.

Вы можете поместить в них изображение, и они найдут метод его оптимизации, а после выдадут окончательный результат для сохранения в том же формате, в котором он был загружен. Инструменты действительно очень хороши и качественно выполняют свою работу. Кроме того, у них есть функция анализа изображения, которая укажет, который формат будет для него наилучшим. Можно с легкостью сказать, что это один из самых необходимых инструментов, кроме текстового и графического редактора, конечно же.


§ 2. Ускорение загрузки сайта засчет оптимизация CSS и JavaScript

Чтобы ускорить сайт при помощи оптимизации кода - ниже перечисленны некоторые способы:

1. Уберите все пробелы в коде

Код, не имеющий пробелов, выглядит не всегда понятно, и порой там будет непросто что-либо отыскать. Но зато такой код быстрее обрабатывается браузером, благодаря чему скорость загрузки (открытия страниц) сайта увеличивается. Вот так выглядит код моего блога:

Оптимизированный код для ускорения сайта

А вот так выглядит код таблицы стилей (файла styles.css):

Оптимизированный CSS код для ускорения сайта

Таблицу стилей (CSS) пока можно не трогать, к ней мы еще вернемся и оптимизируем ее код нажатием одной кнопки!

2. Упорядочите скрипты и удалите ненужные

При открытии страниц происходит загрузка всех элементов кода в том порядке, котором они прописаны. Если при загрузке html кода встречаются скрипты, то открытие страницы приостанавливается до того момента, пока скрипт не будет полностью загружен.

Поэтому, по возможности, все скрипты нужно переносить в самый конец кода. Например, для WordPress блога это файл footer.php.

Естественно, к значительному ускорению загрузки сайтов приводит удаление ненужного кода. Например, я удалил скрипт, отвечающий за появление кнопки наверх и плавной прокрутки страницы при ее нажатии.

Кроме того, этот скрипт прописан в отдельном файле, в результате чего при загрузке страницы происходит открытие дополнительного файла (документа) и загрузка его кода, что снижает скорость загрузки страниц.

Поэтому подключать дополнительные файлы нежелательно, лучше прописывать коды в одном месте.


§ 3. Основные работы по увеличению скорости загрузки сайта 

§ 4. Простые советы, как ускорить загрузку сайта

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!