Как добиться результата 100/100 в Google Page Speed Test Tool?

100 из 100 в pagespeed

Оценивая юзабилити сайта, о скорости загрузки ресурса мы говорим как о ключевом, принципиально важном параметре. Этот же показатель занимает не последнее место среди многочисленных факторов ранжирования SEO. На самом деле сегодня редкий пользователь станет дожидаться загрузки страницы дольше пяти секунд после клика (хорошо еще, если он вытерпит хотя бы 2-3 секунды ожидания). Напрашивается бесспорный вывод — между нажатием пользователя на ссылку и загрузкой данных страницы должен быть кратчайший, минимальный из возможных временной промежуток.

Чем дольше подгружаются страницы вашего веб-ресурса, тем большими будут потери в лице потенциальной потребительской аудитории — посетителей и клиентов, которые покинут ваш медленный ресурс, чтобы отправиться прямиком к конкурентам.

Больше 50% интернет-пользователей — владельцев мобильных гаджетов — вообще рассчитывают на молниеносную загрузку сайтов. Вот от этого статистического факта мы и будем отталкиваться, раскрывая тему, как добиться результата 100 из 100 в Google PageSpeed Insights для десктопов и мобильных устройств. Образцом нам послужит сайт «Monitor Backlinks».

Мотивация — стремление к совершенству

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

При использовании инструмента PageSpeed Tool, был обнаружен неожиданный нюанс — у веб-ресурса компании Google оказались очень невысокие параметры скорости загрузки (всего 59/100) для мобильных гаджетов.

google pagespeed

Версия для десктопов демонстрирует при этом гораздо лучшие результаты — 95/100. Теоретически, им стоило бы использовать собственный инструмент, чтобы оптимизировать свой же сайт. Это вполне логично, не правда ли? Может быть, результат 100/100 — это что-то запредельное и недостижимое? Отнюдь. Это вполне реально, было бы желание. Если вы стремитесь к совершенству, и не опасаетесь технических трудностей, то тоже сможете добиться безупречно быстрой загрузки. Давайте перейдем к подробному рассмотрению методов и манипуляций, с помощью которых начальные показатели “испытуемого” сайта 87/100 превратились вот в такую картину:

monitorbacklinks speed

5 шагов, которые помогут ускорить загрузку веб-страниц

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

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

1. Оптимизируем изображения на веб-ресурсе

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

Чтобы ускорить загрузку картинок инструмент PageSpeed Insights Tool предлагает нам решение по их оптимизации. Это возможно осуществить путем уменьшения размеров файлов. Решение этой задачи подразумевает выполнение двух важных моментов:

  • Уменьшать изображения на сайте можно, применяя бесплатные инструменты — Compressor.io и TinyPNG. Вполне реально таким образом сократить размер файлов до 80% и даже более того, при этом можно рассчитывать, что процесс уменьшения в некоторых случаях совершенно не будет иметь негативного влияния на качество изображений.
  • Уменьшение размера картинок и фото до минимума без снижения их качества. Приведем пример: если на веб-ресурсе должно находиться изображение размером 150×150 px, то и на сервере у него обязаны быть те же параметры. Эти параметры не имеют права подгоняться за счет CSS или HTML-тегов.

Исходя из этих рекомендаций, каждое изображение на веб-ресурсе загружалось, сжималось вручную и подгонялось по требуемым размерам. Для того, чтобы минимизировать трудоемкость процесса оптимизации картинок, когда они уже загружены на сайт, целесообразно будет сначала выполнять оптимизацию тех изображений, которые впоследствии будут подгружаться на сервер. Просто приучите себя всегда заранее сжимать и подгонять их под заданные размеры. Инструмент PageSpeed Insights имеет функцию загрузки уже уменьшенных картинок, так что грузить изображения на сервер у вас получится прямиком с этого сервиса. Точно так же можно работать с файлами JavaScript или CSS.

сжатие файлов

2. Минимизируем JavaScript, CSS и HTML

минимизируем код

Google предлагает нам минимизировать объем файлов JavaScript и CSS. В процессе этого “вес” файлов сокращается до минимума за счет устранения лишних пропусков, переносов строк, разных символов, не имеющих важного значения, и прочих излишков. Нередко программисты, осуществляя кодирование, оставляют массу пробелов и отступов, что приводит к существенному росту (чуть ли не вдвое) объема файлов JavaScript и CSS.

обьем кода

Для ликвидации этой проблемы на сервере устанавливается Gulpjs — инструмент, способный в автоматическом режиме создавать новый CSS-файл и уничтожать все лишние байты — пропуски, переносы строк и отступы. Новый файл CSS будет автоматом создаваться всякий раз, когда вам понадобится внести очередные изменения. В случае, который мы рассматриваем как пример, данные действия помогли в два раза сократить размер основного CSS файла — от 300Kb до 150Kb. Такой существенный результат был достигнут за счет удаления лишних символов.

Если вы работаете на платформе WordPress, можно рекомендовать вам установить плагин Autoptimize. Вы также можете загрузить оптимизированные данные из сервиса PageSpeed. Ниже приведен итог, который стал возможен после работ по минимизации CSS и JavaScript.

нет проблем с кодом

3. Используем кэш браузера

кеш браузера

Большинство веб-мастеров считает применение кэширования браузера довольно трудоемким. Для выполнения этого задания приходится перемещать каждый статический файл с веб-ресурса на CDN.

Сервера сети доставки контента CDN (content delivery network) размещены в самых разных уголках планеты. Они осуществляют кэширование статических версий сайтов (картинки, файлы JavaScript и CSS). На них лежат копии информации, содержащейся на сайте. Когда пользователь открывает в Интернете веб-ресурс, статическое содержимое будет загружено с ближайшего по территориальному расположению сервера.

Приведем пример. Допустим, главный сервер сайта располагается в Техасе, а пользователь, который заходит на сайт, находится в Амстердаме. Благодаря использованию CDN, у пользователя нет необходимости ждать, пока весь контент будет “добираться” с американского сервера. Сайт достаточно быстро (практически молниеносно) загрузится с местного (амстердамского или другого близлежащего) сервера CDN.

Проиллюстрируем наглядно принцип работы CDN:

CDN

На сайте-образце были перемещены на CDN все картинки и файлы JavaScript и CSS, так что на центральном сервере остались для хранения исключительно HTML файлы. Такая “перестановка” очень существенно влияет на скорость загрузки веб-ресурса. После выполнения действий по переносу файлов, PageSpeed настойчиво предлагал, применить кэширование браузера для некоторых сторонних ресурсов. Смотрите на скриншот:кэш сторонних ресурсов

Для устранения этого раздражающего момента потребовалось исправление скриптов соцсетей посредством замены счетчиков, некоторых статических изображений, хранящихся на серверах сети CDN. Сторонние скрипты для подсчета подписчиков, пытающиеся получить доступ к информационным данным из соцсетей Twitter, Facebook или Google Plus, были заменены на автономный счетчик. Таким образом удалось полностью корректно решить возникший вопрос.

Но обнаружилась еще одна проблема, более досаждающая, чем нюанс со скриптами соцсетей. Код Google Analytics замедлял функционирование сайта. Решить эту задачу оказалось сложнее, чем предыдущую. Поскольку Analytics действительно необходим и удалять его с сайта нецелесообразно, встал вопрос о поиске альтернативы удалению. Google крайне редко вносит изменения в код Analytics, не чаще 1-2 раз в год. Так что Razvan разработал специфический скрипт, для проверки наличия обновлений кода Analytics. Проверки осуществляются постоянно и регулярно — по 3 раза в день. Если скрипт обнаруживает обновления, он тут же загружает их. Это удобное решение позволяет размещать JavaScript код Analytics на сервере и снимает потребность грузить его с серверов Google всякий раз, как новый посетитель заходит на сайт.

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

Посмотрите на скриншот из Pingdom Tools, иллюстрирующий все загрузки из сети серверов CDN, включая и код Google Analytics. Осталась только одна загрузка файла с сервера — главная страница, с совершенно незначительным объемом файла — всего 15,5 Kb. Ликвидировав все сторонние скрипты, удалось весьма существенно повлиять на рост общей скорости загрузки сайта. улучшение скорости

4. Удаляем блокирующие коды

блокираторы

Избавиться от блокираторов — еще одна технически сложная задача в нашей пошаговой инструкции, как повысить скорость загрузки сайта до максимальной. Для ее решения нужны специфические знания и навыки. Главная проблема, требующая решения, — это проверка всего кода JavaScript снизу доверху, от заголовка до футера на каждой странице сайта. Если ваш сайт работает на WordPress, вероятнее всего вы сможете решить поставленную задачу с помощью плагина Autopmize. Попробуйте после проверки настроек снять отметку «Force JavaScript» ви поставить отметку на «Inline all CSS».

5. Включаем сжатиевключаем сжатие

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

6. Оптимизируем мобильную версиюмобильная адаптива

Гибкая мобильная версия для разных видов разрешения подразумевает использование правильных шрифтов и присутствие отличной системы навигации на сайте. Google Chrome дает возможность оценить, какой внешний вид будет у вашего сайта в той или иной мобильной версии. Вам нужно нажать на иконку меню настроек, расположенную вверху слева, выбрать “дополнительные инструменты”, а в них уже “инструменты разработчика”. На последней панели выбирайте иконку, на которой изображены мобильные устройства. Эта операция очень проста, теперь оцените полученный результат.адаптивный дизайн

В случае, который мы рассматриваем, никаких существенных изменений не потребовалось.

Выводы

Как видите, мы последовательно выполнили все шесть шагов, которые составили для вас пошаговую инструкцию. Эти целенаправленные действия позволили добиться впечатляющего результата, к которому мы и стремились, — получить для сайта «Monitor Backlinks» идеальные показатели в Google PageSpeed Tools — 100 из 100. Оптимизации подверглась как главная страница сайта, так и все остальные страницы веб-ресурса.

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

  1. Используйте сеть доставки контента (CDN).
  2. Устраняйте блокирующие коды. (Старайтесь избежать присутствия JavaScript в теле кодирования, целесообразнее будет переместить его вниз файлов).
  3. Оптимизируйте размеры изображений, сжимайте их.

Напоследок мы считаем нужным еще раз отметить, что сервис Google PageSpeed Tools — это только дополнительный инструмент, ориентир, который вы можете использовать в процессе оптимизации сайта. Предназначение его — сократить до минимума время между кликом посетителя по ссылке и появлением страницы веб-ресурса, чтобы нетерпеливые пользователи Интернета не уходили с сайта, отчаявшись дождаться, когда отобразятся элементы страницы.

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

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

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

BLOG & NEWS

Оставьте ответ

Ваш email не будет опубликован.

  • ББудем на связи

    Свяжитесь с нами

    • ул.Водогонная 2, офис 321, 79017 Львов, Украина
    • email: [email protected]
    Спасибо!Мы получили ваш запрос.
    Представитель команды свяжется с вами в ближайшее время.
    Обычно это занимает 1-2 рабочих часа.