Что нового?
  • Айоу, Мафиози!

    Не забывайте подписываться на наш канал и чат в ТГ, чтобы получать свежие новости, уникальные статьи и общаться на темы о CPA.

    Канал: t.me/cpa_mafia
    Чат: t.me/cpamafia_chat

Статья Как увеличить скорость загрузки сайта

  • Автор темы Viktor2007
  • Дата начала
Viktor2007

Viktor2007

Модератор
Регистрация
20.01.20
Сообщения
162
Реакции
40
Медленный сайт не нравится ни пользователям, ни поисковикам. Люди не будут ждать загрузки сайта долго, а перейдут на другой сайт, который будет загружаться в разы быстрее. Также медленная загрузка сайта может плачевно сказаться в поисковиках. Шустрые конкуренты обойдут вас на несколько строк вверх.

Какая скорость сайта считается нормальной
Конечно, чем быстрее, тем лучше. По статистическим данным, среднее значение загрузки контента не должно превышать нескольких секунд (3 - 4 максимум).



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

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


  1. Медленный сервер. Здесь все просто. Может просто не хватать места в оперативной памяти, или ядер в процессоре, как на обычном стационарном компьютере.
  2. Медленный движок сайта (CMS). Здесь проблема может заключаться в неверном написании кода, может быть, его писали начинающие программисты без учета его быстродействия.
  3. Сервер находится далеко от пользователя. Может быть, например, такой момент: сервер с файлами находится во Владивостоке, а пользователь заходит на сайт в Екатеринбурге.
  4. Много файлов. Для того, чтобы страница показывалась, необходимо загрузить много файлов (картинки, скрины, скрипты и так далее),
  5. Тяжелые файлы. Большой вес у файлов, которые необходимо загрузить.
Ниже будут описаны моменты, ознакомившись с которыми у вас не возникнет вопрос: «как повысить скорость загрузки сайта?».

Как проанализировать скорость загрузки сайта
Существует очень много сервисов для проверки скорости сайта. Популярностью пользуется Google PagySpeed. Работа на нем простая. Вам просто необходимо вставить адрес сайта и кликнуть на кнопку «Анализировать».

Результаты будут показаны отдельно как для компьютеров, так и для мобильных устройств.

Ниже прописаны показатели, которые выдаст вам сайт после проверки:
  • Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint);
  • Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded);
  • Насколько сайт оптимизирован в плане скорости загрузки;
  • Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).



Старайтесь попадать в зеленую зону в обоих блоках (скорость и оптимизация).

Еще один хороший сервис для проверки скорости загрузки, правда, на английском языке – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают, какие файлы, в каком порядке и сколько времени загружаются:


Как ускорить скорость загрузки сайта
Оптимизация изображений
Неоптимизированные картинки – достаточно «тяжелая» часть сайта. Именно здесь важно понимать, что картинки могут существенно снижать скорость сайта, а в ином случае дать ей хороший прирост.

На какие моменты стоит обратить внимание:
  • Размер картинок. Оптимальный размер картинки 1600 Мб. В большинстве случаев такого размера будет достаточно. Исключения – сайты, где товар можно рассматривать с помощью «лупы», обычно в них входят интернет-магазины. Увеличение картинки происходит не сразу, а только тогда, когда пользователь захочет рассмотреть товар поближе и воспользуется лупой.
  • Вес картинок. Когда вы снимаете на фотоаппарат, необходимо всегда уменьшать вес картинки и фотографии. Работу можно проводить как в фотошопе, так и в других редакторах.
  • Превью с большими картинками. Если у вас в наличии есть карточки товаров или фотографии и есть страница с их списком, тогда разумный вариант – придумать и воплотить в жизнь небольшие превью (уменьшение картинок). В данном случае список товаров, фотографий и картинок будет загружаться в разы быстрее.
Рассмотрим на примере магазина «Спортмастер». Компания использует картинки товаров в трех вариантах:

1. Изображение для списка товаров (весит 7 Кб)

https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/176_188_1/14440990299.jpg

2. Изображение для карточки товара (весит 18 Кб)

https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/331_394_1/14440990299.jpg

3. Изображение для просмотра товара с «лупой» (весит 942 Кб)

https://cdn.sptmr.ru/upload/iblock/9f9/14440990299.jpg

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

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



Gzip-сжатие
Gzip – программа для сжатия файлов на сервере. При включенном Gzip, сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.
Как включить Gzip-сжатие:

  • Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):
<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
</IfModule>

  • Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техническую поддержку хостинга, что вам нужно включить gzip-сжатие.
Кэширование на стороне браузера
Когда браузер загружает сайт, часть информации с сайта он сохраняет в собственную кэш-память (некоторые файлы, скрипты и так далее). И когда вы в очередной раз будете заходить на этот же сайт, то браузер не будет долго грузить всю информацию, запрашивая ее с сервера (это займет некоторое время), а выдаст вам ее с собственной кэш памяти (что гораздо быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).
Чтобы использовать кэш браузера, нужно указать, какие типы файлов с вашего сайта сохранять. Как это сделать?

  • Через файл htaccess (кэшируем статические файлы на 10 дней):
<IfModule mod_expires.c>

ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType image/svg+xml "access plus 10 days"
ExpiresByType text/css "access plus 10 days"
</IfModule>
Для Nginx добавляем в конфигурацию:
server {
...
location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
root /var/www/user/data/www/site.ru;
expires 10d;
}
...
}
  • Если к настройкам сервера доступа нет, опять же, можно обратиться в техническую поддержку и попросить настроить кэширование статических файлов.
Обратите внимание, что настроить кэширование вы можете только для своих ресурсов. Изменить настройки кэша, например, для скриптов Яндекс.Метрики уже не получится.

Минимизация css- и js-файлов
Минимизация – это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и так далее. Браузеру неважно, с каким файлом проводить работу – обычным или минимизированным, а скорость загрузки минимизированного будет намного быстрее.

Есть один недостаток минимизации, который портит всю картину – потеря читабельности текста. Если понадобится внести изменения в сжатый файл – сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины CMS – они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

PageSpeed об этом позаботился и может показать список файлов, размер которых можно уменьшить за счет минимизации:

Порядок загрузки css- и js-файлов
Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет пользоваться «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился – тогда отрисовка остановится.

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге <head>), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом </body>.

<html>

<head>

...

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic" type="text/css">

<link rel="stylesheet" href="/inc/min/styles.min.css" type="text/css">

<link rel="stylesheet" href="/css/main.css" type="text/css">

...

</head>

<body>

...

<script src="/inc/min/scripts.min.js"></script>

<script src="/js/main.js"></script>

</body>

</html>

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

Лишние плагины или счетчики
Бывают случаи, когда верстальщик подключил один плагин для слайдеров, а позже создал новый, и тот старый уже не используется и забыл его удалить. Либо может быть у вас остался код от счетчика, который уже давно не активен и вы им давно не пользовались. Обязательно необходимо избавляться от этого хлама, так как счетчики и плагины занимают много места и скорость загрузки значительно падает.

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

Использование CDN
CDN (Content Delivery Network, сеть доставки контента) – это сеть из множества серверов, распределенных географически по стране или всему миру. Каждый из серверов дублирует контент с основного сервера (контент дублируется по первому запросу пользователем и хранится в течение какого-то времени).

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

В каких случаях используют CDN:
  • Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
  • Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath. Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».
Сокращение числа http-запросов
Чтобы браузер делал меньше обращений к серверу (а это и есть http-запросы), нужно сократить число необходимых ему файлов. Например, если у вас есть три отдельных скрипта (для слайдера, для модальных окон и для всплывающих подсказок), то можно объединить их в один файл, а потом еще и минифицировать.

Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).

Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.

Оптимизация шрифтов
Для того, чтобы уменьшить объем загружаемых загружаемых файлов для того, чтобы показывались шрифты необходимо пользоваться одним шрифтом на всем сайте. Плюсом ко всему будет красивый, эстетичный внешний вид вашего сайта.
Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами – woff и woff2.

Кроме того, самые ходовые шрифты можно загрузить с Google Fonts. Во-первых, это снимет нагрузку с вашего сервера. Во-вторых, файлы со шрифтами уже будут оптимизированы, это перекладывается с ваших плеч на Google (что, согласитесь, приятно).

Сокращение HTML-кода
Можно подумать над тем, чтобы настроить минимизацию HTML-кодов для страниц. В блогах или информационных статьях или другие длинных страницах – это актуальный вопрос, который можно решить. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).
Оптимизация работы сервера
Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно добавить оперативной памяти или заменить процессор. Также системный администратор может провести «уборку» на самом сервере – удалить неиспользуемые и обновить текущие модули.

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

Оптимизация скриптов и баз данных
Один из этапов загрузки сайта – это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.

Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Opencart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.

Заключение
Загрузка сайта – это важная составляющая всей работы. Важно качественно и быстро устранять проблему со скоростью загрузки, если такая у вас есть, так как конкуренты охотно воспользуются вашей проблемой.

В статье подробно рассказаны способы, благодаря которым вы не будете искать ответ на вопрос «как улучшить скорость загрузки сайта?»
 
Сверху