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

результаты оптимизации скорости сайта

При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье. Также дополнительные инструменты представлены в новой статье 5 инструментов чтобы проверить скорость загрузки сайта.

Небольшое объявление. В ноябре 2018 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

Важно помнить, что сайт состоит не только из главной страницы, но и многих других. Оптимизация всего ресурса начинается с исследования каждой типовой страницы. Например, на этом сайте я использую два шаблона: главная и статья. При анализе скорости загрузки нужно анализировать каждую такую шаблонную страницу. Нельзя забывать про "маловажные", которые не приносят трафика - поисковая система оценивает как показатели отдельных страниц, так и всего сайта в целом.

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

Содержание:


Оптимизация изображений

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

 некорректное использование высоты и ширины изображения

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

некорректное использование высоты и ширины изображения на сайте

Просмотреть такое соотношение можно проще и без использования дополнительных сервисов. В браузерных инструментах для разработчиков можно навести на адрес изображения:

инструменты разработчика chrome - размер изображения

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

РазмерПикселиРазмер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток - работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

оптимизированные изображения в сервисе PageSpeed Insights

Lazy Load

Одна из рекомендаций в моём арсенале - реализация Lazy Load.

При возможности, для части изображений страниц рекомендуется использовать отложенную загрузку (Lazy Load), которая позволит первоначально загрузить только те изображения, которые видны пользователю при открытии страницы. Все последующие изображения будут догружаться по мере скроллинга.

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно "разгрузить" сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

меньше серверных реквестов для изображений

Следует отметить, что использование base64 подходит только для совсем маленьких элементов - иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке "Оптимизация количества серверных реквестов".

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

Загружать только те CSS, которые используются на странице. Браузеру не следует загружать лишние правила или отдельные файлы таблиц стилей, если они не используются на рассматриваемой странице. Подробная рекомендация представлена на данной странице официальных рекомендаций от Google.

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Оптимизация объёма файла CSS при удалении неиспользуемых правил

Используемый мной файл стал на 72% процента "легче" после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега <style>. Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

Использование только файлов CSS и тега <style>

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги <style> в связке с атрибутами class. Пример некорректного использования:
пример плохого использования атрибута style

Встраивание стиля элемента в сам тег является устаревшей техникой написания кода. Валидатор кода W3 будет сигнализировать об ошибках, а браузер вновь перестраивать макет страницы.

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

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

Оптимизация JS

Аналогично файлам CSS, браузер может задерживать время отображения контента страниц сайта из-за загрузки и обработки файлов JS. Большинство рекомендаций повторяются, однако есть дополнения.

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

Небольшие скрипты сайта рекомендуется не загружать отдельным серверным запросом, а встроить в код страниц с помощью тега <script>.

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

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

На этом сайте я подключаю абсолютно все скрипты перед закрывающим тегом </body>. В таком случае они не влияют на то, как отображается страница при загрузке, потому что главное на этой странице для пользователя - контент и картинки.

Если же для корректной работы страницы или функционала требуется более раннее исполнение скрипта, можно включать его в начало. Например, Google Analytics просит устанавливать код своего счётчика ближе к началу тега <head>, а Яндекс Метрика - ближе к началу <body>.

Отложенная загрузка скриптов

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

Минификация файлов JS

Рекомендуется аналогично с CSS использовать минификацию (minify) для скриптов. Google рекомендует использовать технологии: UglifyJS и Closure Compiler, или же загрузить минифицированные файлы из Google PageSpeed Insights.

В настройках Яндекс Метрики можно выгрузить уже готовый код "в одну строку". Это выбирается просто в настройках счётчика:

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

Также есть онлайн-минификаторы, что позволяют сократить лишнее в коде JS. Достаточно внести текущий код, и забрать уже готовый. Инструмент, которым пользуюсь я: minifier.org.

Использование атрибута rel="preconnect"

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

Preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сторонний сервер. Preconnect добавляется непосредственно к тегу link как атрибут HTML. Ниже приведён пример возможного использования preconnect:

<link rel="preconnect" href="https://example.com">

Стандартно на сайте можно выставлять подобные теги для доменов систем аналитики или JQuery. На этом сайте такой атрибут установлен для домена Яндекс Метрики и расположен в блоке <head>:

<link rel="preconnect" href="https://mc.yandex.ru/">

Кстати, эта доработка подходит для абсолютно любых элементов, которые загружаются со сторонних доменов: скриптов, шрифтов, иконок и стилей CSS.

В практике, для неподготовленных людей объяснить суть доработки у меня получилось вот так:

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

Оптимизация обращений к серверу

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

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

Про встраивание JS и CSS описано выше и рекомендации сами по себе просты, эту тему я затрагивать тут не буду.

Ну а если требуется добавить маленькую иконку на сайт, можно загнать её как CSS-спрайт или в base64. Это можно сделать для кнопки "наверх" или для логотипа сайта маленьких размеров. В качестве примера на этом сайте есть минимум одно изображение в base64 и оно прекрасно себя чувствует. Как минимум один серверный реквест оптимизирован.

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

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

В моей практике, для одной страницы каталога при загрузке кода страницы браузер должен был сделать 367 обращений к серверу (если что, это очень много). При этом 256 реквестов приходилось на изображения. Большая часть из них формировалась в карточках товара, когда можно было прямо в каталоге пролистать несколько картинок с одним и тем же товаром в разных ракурсах.

Кстати, в связи с этим я дополнительно провёл исследование поведения пользователей. Оказалось, что за три просматриваемых месяца ни один пользователь не воспользовался кнопками пролистывания изображений, что ещё раз подтвердило бесполезность такой реализации карточки товара.

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

Это позволит пользователю быстрее получить контент страницы и только по необходимости запросить другие изображения. По итогу, количество обращений к серверу снизилось с 367 до 150-200 (средние показатели среди конкурентов в той тематике).

Хвастаюсь количеством серверных реквестов на этой странице (на время написания этого блока):

количество серверных реквестов этой статьи

Скриншот из webpagetest.org

Тщательно продумав такую оптимизацию можно разгрузить сервер и хорошо прибавить к скорости загрузки.

Переезд на новую версию PHP

За всё время своего существования PHP развивался и развивается до сих пор. Начиная с версии 7x сильно оптимизирована скорость работы, что положительно сказывается на всём сайте. Подробное сравнение скорости работы от версии PHP я видел в статье на хабре.

По своим личным наблюдением, обновление версии PHP может быть одним из самых действенных способов значительно ускорить свой сайт. Этот сайт работает на версии PHP 7.3 (самая новая на момент написания статьи).

С обновлением версии PHP нужно предварительно проверить следующее:

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

Переезд на PHP 7x это не просто возможность, а необходимость. В некоторых случаях даже требование - некоторые версии PHP ниже 5.3 устарели и могут быть уязвимы. Таких проблем на сайте никому не нужно.

Хвастаюсь:

результат оптимизированной скорости страницы

Хорошее видео по оптимизация скорости сайта


Оцените статью:

+13

Опубликовано: 26.09.18
Изменено: 12.06.20

Написал: Александр Штеркель