LPF Landing Page Framework

Проверяем скорость страниц в PageSpeed Insights

PageSpeed Insights - это сервис для проверки скорости загрузки страниц от Google и с точки зрения Google.

Что такое PageSpeed Insights?

С помощью сервиса PageSpeed Insights можно быстро выявить проблемные зоны сайта, которые мешают занять высокие позиции в поисковом рейтинге.

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

Пример анализа PageSpeed Insights

Возможные оценки

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

Числовое значение выдается в процентах. 100% — это максимум что можно получить при отсутствии замеченных проблем.

Если результат помечен зеленным цветом, то сайт проходит проверку. Это соответствует 90% и выше. Желтый — есть замечания. Ниже 70-80% — у сайта однозначно проблемы.

HTML-валидация

Перед тем, как приступать к работе с PageSpeed Insights следует проверить страницу на html-ошибки с помощью validator.w3.org.

Пример работы HTML-валидатора

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

Строго говоря, html-валидацию должен проходить любой сайт.

Основные проблемы сайтов

Низкая скорость загрузки (большое время ответа сервера)

Прежде чем что-то менять, убедитесь, что проблема именно в сервере, а не в используемых php-скриптах (читай — CMS). Сделайте php-файл с простеньким html-содержимым и укажите его адрес в PageSpeed Insights. Если время ответа окажется приемлемым, то причину следует искать в CMS.

Если вы используете Landing Page Framework или MaxSite CMS, то скорее всего такой проблемы просто не возникнет. Но если используется монстр, вроде WordPress, то придется потратиться на анализ и поиск того, что вызывает такую медленную работу. Как правило это либо шаблон, либо плагины. В первом случае переключаетесь на дефолтный шаблон и ещё раз проверяете сайт в PageSpeed Insights и если проблема исчезла, то ковыряетесь в шаблоне. Если проблема осталась, то отключаете все плагины, ещё раз проверяете и подключаете по одному, проверяя каждый раз результат.

Гарантированно ускорить WordPress может только мой MaxCache. Остальные кеши показывают результат на несколько порядков хуже.

Используйте кеш браузера. Включите сжатие

Данная рекомендация означает, что сервер должен отправлять специальные http-заголовки для браузера, где указано время «устаревания» файлов изображений, скриптов и стилей. Сами файлы при этом должны быть «на лету» сжаты. На практике это потребует изменений .htaccess на сервере. Более того, на сервере должны быть включены модули Апача deflate (сжатие) и expires (кеш). Если это не так, то придется пнуть хостера.

В .htaccess достаточно добавить (можно в конец) следующий код:

<IfModule deflate_module>
    AddOutputFilterByType            \
     DEFLATE                         \
      application/javascript         \
      text/css                       \
      text/html                      \
      text/javascript                \
      text/plain                     \
      text/xml
</IfModule>

<IfModule mod_expires.c>
	<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
	ExpiresActive on
	ExpiresDefault "access plus 1 month"
	</filesmatch>
</IfModule>

Этот код «кеширует» время на 1 месяц. То есть браузер не будет повторно скачивать файлы, а возьмет из своего кеша.

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

Даже если вы воспользовались специальной командой Фотошопа (Save for web), то гугл всё равно может посчитать, что изображение можно ещё уменьшить. Секрет в том, что гугл использует библиотеки jpegtran и OptiPNG, выполняющих дополнительное сжатие. Вы можете скачать уже готовые программы для сжатия и прогнать изображения через них.

В качестве альтернативы попробуйте воспользоваться онлайн-сервисом от Yahoo! Smush.it. Он поддерживает множественную загрузку файлов, что довольно удобно. Правда, иногда это сервис выдает ошибку...

Сократите код JavaScript

Минификацию js-кода можно сделать с помощью обычного Notepad++. Для этого будет достаточно удалить все комментарии в коде, табуляторы, двойные пробелы и переносы строк. Можно выполнить и специфичные замены, вроде пробелов перед скобками, лишние «;» и т.п. Но в целом для PageSpeed Insights будет достаточно и только первых замен.

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

Оптимизируйте работу CSS

Рекомендации точно такие же как и для JS, но есть одна проблема — с CSS вебмастер работает, поэтому ему нужен нормально отформатированный оригинал. Таким образом, древние вебмастера перед закачкой css-файлов на сервер вынуждены были прогонять файлы через минификатор.

В LPF и MaxSite CMS данный процесс автоматизирован, поскольку верстка выполняется в отдельных less-файлах. Если по какой-то причине css-код оказался несжатым, то можно прогнать его через additions/compres-css.php функцию mso_compres_css_file().

Для этого в environment/config.php разместите следующий php-код:

require_once(ENGINE_DIR . 'additions/compres-css.php');

mso_compres_css_file(BASEPATH . '/assets/css/style.css'); // файл для сжатия

Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

PageSpeed Insights считает, что HTML-код первичен и должен отображаться сразу при загрузке страницы, не дожидаясь загрузки связанных скриптов и стилей. Эта рекомендация очень спорная, поскольку браузеры не настолько тупые, и давно уже научились асинхронному отображению и загрузке дополнительных файлов. Поэтому данную рекомендацию можно попытаться выполнить, но 100% результата можно добиться только при ограниченной функциональности страницы.

В первую очередь следует перенести js-скрипты в конец страницы — т.н. «ленивая» загрузка. В LPF для lazy-загрузки достаточно разместить js-скрипты в каталог js/lazy.

Но обратите внимание: lazy-загрузку нельзя делать для основной jQuery-библиотеки, поскольку она должна быть загружена перед любым js-кодом. Типовой вызов:

$(document).ready(function()...

— использует «$», которая является основной функцией jQuery и если она ещё не определена (загружена), то данный код вызовет ошибку выполнения JS и браузер заблокирует js-скрипты на странице.

Даже если мы каким-либо способом откажемся от «$», то при lazy-загрузке может возникнуть ситуация, когда файл плагина загрузится и начнется выполняться до загрузки ядра jQuery, что опять же приведёт к ошибке.

Поэтому основная библиотека jQuery должна всегда загружаться в секции HEAD страницы. В LPF файл jquery.min.js достаточно разместить в каталоге js/autoload.

Вместе с тем, я хочу отметить, что в некоторых случаях можно разрешить загружать jQuery асинхронно. В HTML5 для этого существуют SCRIPT-параметры async и defer. Для изучения отличий, отошлю к HTML-документации, отмечу лишь, что LPF поддерживает оба параметра автоматом. Достаточно задать нужный вариант в имени js-файла:

Асинхронная загрузка очень коварная вещь, поэтому мой совет, тестировать семь раз перед тем, как её включать. Браузер может просто закешировать файл jQuery, а у посетителей будет ошибка из-за незагруженности файла. Если есть возможность, проверьте работу сайта на низкой скорости Интернета. Это снимет все вопросы.

... CSS, блокирующий отображение

CSS также блокируют (в теории) отображение страницы, но если js-скрипты мы можем разместить где угодно, то css-стили можно подключать только в секции HEAD. Не знаю, каким HTML5-стандартом руководствуется гугл, но его совет размещать подключение стилей после закрывающего /HTML выглядит очень и очень странным:

Странная рекомендация гугла

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

Если на сайте используется несколько небольших css-файлов, то их по-возможности лучше объединить в один. Мои эксперименты показали, что PageSpeed Insights два css-файла «воспринимает» нормально. Большой css-файл можно попробовать разделить на два, поскольку браузер их будет загружать параллельно, что ускорит загрузку (F12 — Сеть).

Размер css-файлов, при которых не возникает проблем где-то в районе 100-120кб. Точных данных нет (наверное много дополнительных факторов), но думаю, что данных лимитов с лихвой будет достаточно для нормальной верстки.

Мобильная версия

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

Недостижимые 100%

Максимум, что мне удавалось достичь в PageSpeed Insights для рабочего сайта — 91%. Следующие факторы мешают получить лучший результат:

Данный результат (90%) можно считать «типовым» для сайтов на LPF. Если отключить сторонние ресурсы (twitter, google), то результат будет выше, но это уже в ущерб функциональности сайта. В любом случае зеленый индикатор указывает, что страница удовлетворяет всем основным требованиям гугла.


Tweet

О проекте

Landing Page Framework упрощает создание целевых страниц, избавляя вебмастера от массы рутинных операций. Фреймворк обладает мощным ядром, способным решать сложные задачи. Сайты, созданные в LPF, будут работать с очень высокой скоростью даже на слабых серверах.

Контакт