Скорость загрузки сайта

Как проверить скорость загрузки сайта и оптимизировать ее с помощью подсказок сервиса Google PageSpeed Insights, об этом читайте в статье ниже.

Случалось ли Вам попадать на такие сайты, которые долго грузятся? Думаю, что, да. И, скорее всего, Вы так и не дожидались полной загрузки страницы. Ну, разве только, если там была очень интересующая Вас информация...

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

Эту тенденцию сегодня учитывают в ранжировании практически все поисковые системы, поэтому, если у Вас есть свой сайт, уделите ему внимание и проверьте скорость его работы при помощи онлайн-сервиса от Google PageSpeed Insights.

Начинаем тестирование

Сервис PageSpeed позволяет проверять любые отдельные страницы любого сайта в Интернете. То есть, Вы можете тестировать не только скорость своего веб-ресурса, но также, например, возможности своих конкурентов или же просто случайных сайтов (например, сайт самого Гугла :)). PageSpeed выдаст беспристрастную оценку и предложит Вам пути оптимизации, которые приведут к улучшению показателей.

Теперь о самом сервисе. После того, как Вы перейдете на его страничку, Вам будет предложено обычное поле, в которое нужно ввести адрес сайта, и кнопка "Анализировать" для начала сканирования:

В качестве примера проверим работу главной странички нашего сайта. Скажу сразу, что мы уже не раз оптимизировались, но после недавнего апрельского обновления Гугл, видимо, изменил какие-то алгоритмы проверки и теперь наш сайт просел почти на 10 баллов (было в районе 92 – 96 для компьютеров и 84 – 90 для мобильных устройств). Сейчас же, как Вы можете видеть на скриншоте ниже, мы находимся на самом пороге между средними и хорошими по скорости работы сайтами (85 баллов – это уже средний уровень):

Страница результатов тестирования разделена на две вкладки с разными показателями. На первой вкладке "Для мобильных" отображаются данные по степени оптимизированости сайта под работу на различных переносных мобильных девайсах. Вторая же вкладка показывает, насколько быстро работает сайт на стационарных компьютерах. Также полезной фишкой является отображение скриншота тестируемой страницы в том виде, в котором она бы отображалась на телефоне пользователя.

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

Анализ результатов тестирования

Все рекомендации в PageSpeed сортируются по степени критичности от наиважнейших (отмечены красным значком), до уже реализованных (зеленый значок в самом низу). Чтобы посмотреть, на что именно "жалуется" нам Гугл, нужно нажать на кнопку-ссылку "Как исправить?" под интересующим нас пунктом. В нашем случае критичное замечание только одно – "Используйте кеш браузера". Развернем и посмотрим, что же у нас не закешировалось:

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

Дело в том, что после последнего обновления PageSpeed стал очень предвзято относиться ко всем внешним подключаемым скриптам (в том числе и своим же – гугловским!), поэтому, внимательно изучите выданный список. Если в нем фигурирует Ваш домен, то проблема именно на стороне Вашего сайта и Вы можете исправить ее. Если же там значатся только внешние скрипты, то, увы, на них Вы повлиять никак не сможете. Единственный выход – вообще удалить их, если они не слишком важны.

Пройдемся ниже по списку рекомендаций и посмотрим, на что у нас еще имеются нарекания в желтом секторе:

Здесь у нас, как видите, есть предложения удалить "лишний" код вверху страницы, включить сжатие при передачи данных, сократить скрипты, HTML и CSS-код, а также оптимизировать картинки. Готов предположить, что подобные рекомендации будут наблюдаться практически для всех сайтов.

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

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

А теперь предлагаю ряд конкретных "рецептов" реализации самых распространенных замечаний от Google PageSpeed Insights.

Оптимизация сайта

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

1. Итак, начнем с самого очевидного – валидации кода. Любой современный поисковик требует от нас, как сайтостроителей, неукоснительного соблюдения веб-стандартов, которые регламентированы товарищами из W3C (World Wide Web Consortium). Проверить сайт на наличие таких ошибок можно при помощи онлайн-валидатора от того же консорциума по Всемирной Сети.

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

2. Вторым по распространенности советом PageSpeed будет рекомендация использовать кеш браузера. Чтобы решить данную проблему нам потребуется получить доступ к файлу .htaccess (именно так – с точкой перед именем), который лежит в корневом каталоге Вашего сайта. Если такого у Вас нет, то создайте его при помощи любого продвинутого Блокнота.

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

Первой строкой мы указываем, что наши команды будут отправляться модулю mod_expires.c. Далее устанавливаем публичный контроль над заголовками управления кешем, активируем функцию истечения времени кеширования и задаем срок хранения кеша по умолчанию (желательно не менее 10 дней).

После этого указываем время, на которое будет кешироваться каждый отдельный тип данных, которые имеются у нас. Здесь небольшой срок нужно задавать только для текстовых фрагментов (в районе 10 минут), которые могут меняться в процессе существования сайта (добавление комментариев, внесение правок в статьи и т.п.). Для скриптов, картинок, иконок и шрифтов можно задавать время кеширования от месяца до года.

3. Еще одним типичным заданием, которое часто ставит перед разработчиками PageSpeed, является рекомендация включить сжатие. Смысл ее в том, чтобы Ваш сервер отдавал посетителю содержимое страницы в сжатом при помощи алгоритма gzip виде. Что-то вроде архива с автораспаковкой, но только для открытия его в браузере.

Эту функцию можно активировать опять же при помощи файла .htaccess, прописав, примерно следующий код:

Здесь, как и в предыдущем примере, мы пишем в первой строчке, что набор команд будет обрабатываться модулем mod_gzip.c, активируем модуль и прописываем, какие типы файлов должны быть подвергнуты сжатию.

Альтернативой mod_gzip.c с более широкими возможностями является модуль mod_deflate.c:

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

4. Часто PageSpeed также просит нас уменьшить количество запросов или сократить время ответа сервера. С этой задачей все обстоит несколько сложнее. Если количество запросов еще можно уменьшить за счет объединения фрагментов кода и скриптов в общие блоки, то сократить время ответа сервера бывает просто невозможно, если сам сервер у Вас не очень шустрый.

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

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

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

Организовать отображение фрагментов спрайта можно при помощи CSS-свойства "background" в связке с точным значением ширины и высоты блока. Например:

Данная запись означает, что в качестве фона для нужного блока мы используем наш спрайт, находящийся по заданному адресу. Этот спрайт не будет повторяться и его отображение будет начинаться с нулевого отступа от левого края картинки и 473 пикселя от верхнего (начальная точка отсчета находится в левом верхнем углу). Чтобы отобразилась не вся картинка, расположенная ниже отметки 473 пикселя, мы задаем точные размеры блока, которые соответствуют размерам нужного фрагмента спрайта.

Если же говорить об уменьшении размеров изображений, то рекомендую Вам воспользоваться программой RIOT, которая в визуальном режиме позволяет сжимать картинки в форматах JPG, GIF и PNG как без потери качества, так и за счет оптимизации палитры (GIF и PNG) или добавления цифровых шумов (JPG).

Альтернативные способы тестирования

Мы с Вами рассмотрели принцип работы сервиса Google PageSpeed Insights, однако, не всегда удобно каждый раз заходить туда, чтобы проверить, как повлияли на скорость загрузки страницы, внесенные в нее изменения. Чтобы иметь возможность тестировать скорость прямо в браузере установите себе Google Chrome и к нему плагин PageSpeed Insights.

После установки зайдите на нужную веб-страницу, откройте меню браузера (кнопка в правом верхнем углу), выделите раздел "Дополнительные инструменты" и активируйте в нем пункт "Инструменты разработчика". Более простой вариант – нажмите клавишу "F12" в верхнем ряду Вашей клавиатуры. на фоне тестируемого сайта откроется много дополнительных кнопок и панелек. Нам нужно на нижней панели активировать вкладку "PageSpeed" и нажать кнопку "Начать анализ":

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

Немногие знают, но в Хроме изначально имеется инструмент, который работает аналогично PageSpeed и не требует установки никаких плагинов. Для его вызова нужно перейти во вкладку "Audits" и там нажать кнопку "Run":

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

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

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

Также довольно полезной функцией GTMetrix является вкладка "Timeline". На ней отображается шкала времени загрузки Вашего сайта и расписывается по миллисекундам, когда и какой ресурс был запрошен и отдан. Такая визуализация позволяет быстро найти, что грузит наш сайт сильнее всего и оптимизировать, либо отключить проблемный компонент.

Кстати, судя по показаниям PageSpeed в GTMetrix, можно сделать вывод, что они еще не успели обновить API Гугла, поскольку результаты выдачи немного завышены и соответствуют результатам примерно за март месяц. За это и за англоязычность я бы выписал сервису два штрафных очка :).

Выводы

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

Google PageSpeed Insights на сегодняшний день является одним из самых адекватных сервисов для тестирования. Поскольку тот же YSlow, для примера, сразу понижает баллов на 20 рейтинг тем сайтам, которые не используют CDN (систему доставки контента). Однако, и PageSpeed не является истиной в последней инстанции. Он, например, жалуется на все внешние скрипты (в том числе и разработки Гугла).

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

К слову, различные сервисы самого Google имеют показатели в средним 90 баллов. Поэтому, если Вы смогли переступить планку 85 баллов, то можете себя мысленно поздравить – Ваш сайт работает хорошо. Однако, если можете, реализуйте одну из рекомендаций PageSpeed и сделайте еще лучше ;)

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

P.P.S. Если Вы хотите создать собственный сайт, но не имеете пока навыков WEB-разработчика, рекомендую воспользоваться бесплатным конструктором сайтов uCoz:
http://www.bestfree.ru/uslugi/constructors/ucoz.php