PageSpeed Insights: как ускорить загрузку сайта с его помощью

Согласно исследованиям Google длительность загрузки страниц до 10 секунд увеличивает показатель отказов на 123%. Это серьёзный повод задуматься над оптимизацией этого показателя. Google рекомендует использовать сервис по измерению скорости загрузки РageSpeed Insights, который даёт рекомендации по улучшению этого показателя. Об инструменте и его функциях я расскажу в посте.

1. Что такое PageSpeed Insights, и в чём его польза

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

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

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

Ниже идёт перечень советов по улучшению скорости загрузки.

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

2. Как проверить показатели в PageSpeed Insights

Для проверки скорости загрузки страницы введите её адрес в строку и нажмите на кнопку «Анализировать».

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

Чтобы не проверять каждую страницу по отдельности, загрузите список URL в Netpeak Checker и на боковой панели отметьте параметры в разделе «Google PageSpeed Insights».

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

3. Как улучшить показатели загрузки сайта

При низких показателях в сервисе PageSpeed Insights можно действовать по-разному:

1. Полностью следовать советам данного инструмента и добиться высокой оценки.
2. Совмещать рекомендации и стандартные методы увеличения скорости загрузки с привлечением сторонних сервисов для более глубокого анализа.

Далее рассмотрим, как улучшить скорость загрузки универсальными методами.

• Сжатие изображений. Все картинки на сайте можно преобразовать в форматы JPEG 2000, JPEG XR WebP, а также уменьшить их размер при помощи онлайн-инструментов. Например, TinyPng или Compressor.io.
  Читайте также: «5 сервисов для оптимизации изображений».

• Оптимизация Javascript и CSS. Сократить код можно с помощью CSSCompressor и YUI Compressor либо вручную.
• Использование кэширования — сохранения копий страниц сайта в кэше браузеров пользователей. При следующем посещении загрузится копия из кэш-памяти браузера, и это значительно увеличит скорость отображения контента. Для настройки кэширования нужно добавить код в файл .htaccess на сервере Apache (для Nginx не сработает):
  “<ifModule mod_headers.c> <FilesMatch "\.(htm|html)$"> Header set Cache-Control "max-age=40200" </FilesMatch> <FilesMatch "\.(css|js|txt|woff|woff2|ttf|eot)$"> Header set Cache-Control "max-age=624800" </FilesMatch> <FilesMatch "\.(swf|flv|ico|gif|jpg|jpeg|png)$"> Header set Cache-Control "max-age=2552000" </FilesMatch> <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> Header unset Cache-Control </FilesMatch> </IfModule>”

  показатель max-age означает период времени, в течение которого файл сохраняется в кэше. По истечении этого времени файл считается устаревшим.

• Использование Gzip-сжатия на сервере. Чтобы не создавать дополнительную нагрузку на сервер, рекомендуется использовать статическое сжатие. Оно заключается в загрузке уже заархивированных файлов с данными на сервер, который будет выдавать их из архивов при запросе браузера.
• Асинхронная загрузка CSS. В этом случае сначала загружается текст, после него — CSS-стили. Один из способов внедрения асинхронной загрузки — добавление атрибута rel=”preload” на страницы сайта:
  <link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Узнать показатели скорости загрузки можно при помощи Netpeak Spider, который анализирует параметры загрузки контента и ответ сервера. Для проверки необходимо:

1. Отметить параметры «Время ответа сервера» и «Время загрузки контента» на боковой панели.

   

2. Ввести URL сайта в адресной строке и начать сканирование.

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

Чтобы посмотреть URL, на которых найдены ошибка «Большое время ответа сервера», перейдите в отчёт по ошибкам и кликните по названию ошибки.

Также вы можете отправить отдельные URL на анализ в Google PageSpeed. Для этого щёлкните по URL правой кнопкой мыши и выберите пункт «Открыть URL в сервисе» → «Google PageSpeed».

Подводим итоги

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

При низкой оценке сервиса стоит детально изучить скорость загрузки страниц, проанализировав её с помощью других сервисов и краулеров, например, Netpeak Spider. Увеличить скорость можно стандартными методами: с помощью сжатия изображений, таблицы стилей CSS, данных Javascript, путем кэширования страниц и загрузки на сервер заархивированных данных (Gzip).