Как повысить скорость загрузки сайта, руководствуясь советами Google?
Автор: Феликс Таркомнику (Felix Tarcomnicu), интернет-предприниматель и онлайн-маркетолог со стажем. Работает в должности CMO в Monitor Backlinks (Лондон). Автор множества статей о продвижении в социальных медиа, интернет- и email-маркетинге, SEO, продвижении при помощи контекстной рекламы и др.
Источник: Мoz.com
Сегодня скорость загрузки страниц сайта является критически важным фактором, определяющим его юзабилити. Этот аспект входит в перечень 100 факторов ранжирования, значимых для продвижения сайта в поиске. И такая ситуация сложилась неспроста: в наши дни едва ли можно отыскать настолько терпеливого пользователя, который был бы готов ждать загрузки страницы дольше 5 секунд. Отсюда вывод: если сайт загружается недостаточно быстро – его владелец попросту теряет пользователей и клиентов.
Многочисленные эксперименты и исследования показывают, что более 50% переходов на сайты совершается с мобильных устройств. Это значит, что пользователи ждут от современных ресурсов не просто быстрой, а моментальной загрузки. Причём, на самых различных устройствах. Учитывая этот аспект, автор статьи наглядно продемонстрирует, как ресурсу https://monitorbacklinks.com/ удалось добиться показателя загрузки страниц 100/100 (для десктопов и мобильных устройств) по результатам проверки сайта с помощью инструмента Google PageSpeed Insights.
Предпосылки для эксперимента
Справедливости ради стоит отметить, что сайт исторически загружался довольно быстро. Однако первичное тестирование при помощи инструмента проверки скорости загрузки страниц от Google выявило, что показатель скорости загрузки мобильной версии сайта составляет 59/100. Тогда как скорость загрузки десктоп-версии ресурса оказалась несколько выше – 95/100.
В качестве итоговой цели команда разработчиков monitorbacklinks.com поставила условие: добиться показателя 100/100. Исправления очевидных недочётов на ресурсе позволили несколько повысить скорость загрузки – до 87/100, но к идеалу не привели. Путём методичных технических усовершенствований разработчикам ресурса в конечном итоге удалось получить желаемый результат:
О том, как команда сайта добилась этого, речь пойдет в следующей части статьи.
Как повысить скорость загрузки страниц: технические приёмы
Прежде чем переходить к описанию приёмов, позволяющих повысить скорость загрузки страниц сайта, следует отметить, что рекомендации инструмента проверки скорости загрузки страниц от Google сами по себе являются отличным руководством по улучшению целого ряда технических аспектов. Технические рекомендации, которые предоставляются по итогам проверки сайта, позволяют в разы ускорить загрузку страниц ресурса и реализовать лучшие практики из области внутренней оптимизации. Более того, все советы Google учитывают специфику и особенности настроек сервера, на котором располагается сайт.
В то время, как одни аспекты работы над сайтом требуют существенной технической экспертизы, другие устранить значительно проще. Часть проблем и вовсе может быть решена автоматически за счёт применения качественной CMS.
Шаг #1. Оптимизируем изображения на сайте
Следуя рекомендациям инструмента PageSpeed Insights, команда разработчиков сайта monitorbacklinks.com оптимизировала все изображения на ресурсе, повысив скорость загрузки страниц за счёт уменьшения размеров файлов. Применение инструментов Compressor.io и TinyPNG позволило уменьшить вес файла на 80% без потери качества изображений.
Использование CSS и соответствующих тегов HTML не способно обеспечить подобного результата. Качество изображений на сайте напрямую зависит от параметров файлов, загруженных на сервер. Чтобы получить высокое качество картинок при относительно низкой нагрузке на сервер, все загруженные туда изображения было решено сжать при помощи упомянутых выше инструментов. Впоследствии каждое новое изображение, которое загружалось на сервер, проходило обязательную обработку с применением конвертера.
В свою очередь, Google в рекомендациях предлагает владельцам сайтов воспользоваться возможностью загрузки на сервер уже оптимизированных изображений. Сделать это можно с применением JavaScript и CSS.
Шаг #2. Оптимизируем файлы CSS и JavaScript
Примечательно, что на текущий момент Google не расценивает файлы JavaScript и CSS, загруженные на сервер как оптимизированные. Применение сжатия позволяет уменьшить размер CSS и файлов JavaScript, которые вполне могут занимать меньше пространства на сервере. Здесь важно научиться грамотно оценивать работу программистов в плане составления кода.
Чтобы устранить ошибки и несколько облегчить код сайта было решено установить потоковый сборщик проектов на JS Gulpjs. Инструмент в автоматическом режиме создает новый файл CSS и удаляет все недочёты в коде. Новые файлы также автоматически создаются для всех вносимых в код изменений. В случае с сайтом monitorbacklinks.com внедрение Gulpjs позволило сократить объём файла CSS с 300 КБайт до 150 КБайт только за счёт устранения лишних знаков в коде. Проверить правильность кода можно также следуя рекомендациям специального раздела Руководства Google.
Тем, кто использует Wordpress с этой же целью можно порекомендовать установить специальный плагин Autoptimize. Оптимизированные файлы можно загрузить и из PageSpeed Tool. Процесс будет выглядеть примерно так:
Шаг #3.Используем кэш браузера
О том, как увеличить скорость загрузки сайта путем кэширования регулярно задумывается большинство специалистов. Чтобы устранить проблему на ресурсе, командой разработчиков monitorbacklinks.com было решено перенести все статические файлы (изображения, CSS, Javascript и др.) в сеть доставки и дистрибуции контента (CDN).
CDN представляет собой географически распределённую сетевую инфраструктуру, которая позволяет оптимизировать доставку и дистрибуцию контента конечным пользователям. Применение CDN способствует увеличению скорости загрузки пользователями Интернета самых разных типов файлов: аудио, видео, ПО, игр, изображений и прочего цифрового контента. Мощности CDN позволяют хранить скопированный контент ресурса на сторонних серверах. Взаимодействие географически распределённых многофункциональных платформ даёт возможность максимально эффективно обрабатывать и удовлетворять запросы пользователей при получении контента.
Так, например, если основной сервер сайта находится в Техасе, а для дистрибуции контента не используется CDN, пользователь из Амстердама, осуществив вход на ресурс, будет вынужден некоторое время ждать загрузки содержимого страницы. При условии использования CDN, контент на страницу будет подгружаться с сервера, находящегося в непосредственной близости от пользователя. Это обеспечит минимальное время загрузки содержимого.
Принцип работы сети CDN можно описать в виде следующей схемы:
Итак, после переноса всех JavaScript и CSS в CDN на главном сервере ресурса остались лишь HTML-файлы. Перенос в сеть доставки и дистрибуции контента всех объёмных графических файлов позволил заметно сократить время ожидания загрузки содержимого страниц пользователями из удалённых регионов.
После того, как процесс был полностью завершен, инструмент PageSpeed Insights с завидным постоянством стал указывать на необходимость ускорить кэширование файлов браузером для некоторых сторонних ресурсов:
Часть проблем удалось устранить за счёт переноса кода счётчиков социальных сетей (Twitter, Facebook, Google+) и части статических изображений в CDN. Как выяснилось позднее, наибольшее влияние на сайт оказывал код счётчика Google Analytics, присутствие которого в разы утяжеляло ресурс.
Поскольку удалять код счётчика с сайта команда разработчиков категорически не хотела, было решено создать специальный скрипт, который бы автоматически запускался каждые 9 часов и проверял настройки кода счётчика GA. В качестве условия было задано, что скрип автоматически загружает на сервер код счётчика Google Analytics, только если тот был существенно обновлён. Это позволило разместить JavaScript-код Google Analytics на собственном сервере, минуя этапы загрузки обновлений кода счётчика с серверов Google после фиксации каждого малейшего изменения на сайте. Если никаких изменений на сайте зафиксировано не было, код счётчика Google Analytics загружался из кэша.
После каждого изменения системой аналитики JavaScript-кода, сервера сайта автоматически загружали его обновлённую версию в CDN, используя скрипы сторонних разработчиков.
На скриншоте ниже показано, как данная процедура позволила уменьшить размер файла главной страницы сайта до 15,5 КБайт:
Шаг #4. Удаляем из верхней части страницы код JavaScript и CSS, блокирующий отображение
Данный аспект является одним из наиболее трудных в реализации, поскольку требует значительных технических навыков от команды разработчиков сайта. Рекомендации инструмента от Google во всех подобных случаях сводятся, как правило, к предложению отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML. В случае с ресурсом monitorbacklinks.com требовалось перенести все коды на JavaScript и верхней части страницы и из её центральной части в подвал. Процедуру было необходимо проделать для всех страниц ресурса.
Тем, кто использует Wordpress можно посоветовать воспользоваться плагином от Autopmize. При этом в настройках необходимо снять отметку с пункта «Force JavaScript in » и отметить пункт «Inline all CSS».
Шаг #5. Настраиваем сжатие
Сжатие ресурсов с помощью функций gzip или deflate позволяет сократить объем данных, передаваемых по сети. Именно такая рекомендация обычно появляется после проверки сайта при помощи PageSpeed Insights.
Если владелец ресурса не обладает достаточными навыками для устранения проблемы, он может обратиться в службу технической поддержки ресурса с просьбой включить gzip-сжатие файлов сайта.
Шаг #6. Улучшаем опыт мобильных пользователей
Всё, что требуется сделать для обеспечения наилучшего опыта взаимодействия с ресурсом пользователей мобильных устройств, это разработать адаптивную версию сайта. При этом важно учитывать все существующие мобильные форматы, использовать правильные наборы шрифтов, тщательно проработать систему навигации для мобильного ресурса.
Убедиться в том, как ресурс будет смотреться на экранах мобильных устройств с самым разным разрешением можно при помощи Google Chrome. Для этого необходимо кликнуть по вкладке меню в правой верхней части экрана и выбрать пункт «Инструменты» и далее – «Инструменты разработчика». После этого в левой части экрана появится возможность выбрать разрешение и посмотреть, как будет выглядеть сайт на экране мобильного устройства.
В случае с ресурсом monitorbacklinks.com никаких существенных изменений вносить не потребовалось.
Заключение
В статье были перечислены самые основные шаги и пункты, выполнение которых гарантирует сайту значительное улучшение показателей по итогам проверки с помощью инструмента PageSpeed Insights от Google. В случае с рассматриваемым сайтом, удалось получить идеальный результат – 100/100. Однако в данном случае тщательной оптимизации подверглись все внутренние страницы ресурса.
Три ключевых улучшения сайта, которые позволили добиться идеального результата, заключались в следующем:
- Использование сети доставки и дистрибуции контента (CDN).
- Уменьшение количества блокирующих скриптов на странице (с этой целью необходимо удалить из верхней части страницы код JavaScript и CSS, блокирующий отображение. Все подобные файлы должны располагаться внизу страницы).
- Оптимизация изображений и сжатие графических файлов.
Приведённые выше приёмы и аспекты оптимизации сайта на практике позволяют добиться заметного увеличения скорости загрузки на мобильных и десктоп-устройствах вне зависимости от местонахождения и региона пользователя, решившего посетить ресурс.