Google PageSpeed Insights: проверяем скорость загрузки сайта

Главная ценность сегодня — это время. Неудивительно, что медленная загрузка веб–ресурсов раздражает пользователей. Согласно статистике, только 15% посетителей готовы ждать, пока страница откроется. Остальные вернутся к поисковой выдаче и выберут другой источник информации. Один из инструментов, позволяющих измерить скорость сайта — Google Speed Insights.

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

Как работает Google PageSpeed?

Загрузка страниц с мобильных устройств и компьютеров оценивается по нескольким параметрам, каждому из которых выставляется оценка от 0до 100 баллов. Общий рейтинг складывается из результатов наблюдений, которые проводятся в течение предшествующих проверке 4–х календарных недель. Общее количество загрузок сайта принимается за 100%, а затем сервис считает, какое количество прошло быстро, сколько — со средней скоростью, а для какого процента была характерна крайне медленная загрузка. Скорость загрузки сайта Google определяет на основании двух факторов:

• Первой задержки ввода (FID). Этот параметр фиксирует количество времени, прошедшего между первым взаимодействием посетителя с любым элементом контента на странице, и ответом браузера.
• Первой отрисовки контента (FCP). Когда пользователь переходит по URL, браузер отправляет запрос серверу, который, в свою очередь, отправляет файлы на устройство. FCP показывает, сколько времени прошло с момента перехода до того, как отрисован первый бит.

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

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

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

Что влияет на скорость загрузки сайта?

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

Количество обращений к серверу в конкретный момент

Time To First Byte, или время загрузки сервера — это количество времени, которое необходимо для получения ответа браузеру. Он получает его от сервера, обрабатывает и отображает в виде страницы ресурса. Если в моменте запросов много, сервер может не справляться с нагрузкой и отвечать на запросы медленнее. В результате — посетитель покидает портал, предпочитая не тратить время на ожидание.

Оптимальным значением TTFB считается 200 мс.

Тип хостинга

При выборе хостинга рекомендуется учитывать не только собственный бюджет, но и прогнозируемую нагрузку на веб–ресурс. Так, расположенные на общих хостингах сайты грузятся медленнее, чем те, владельцы которых предпочли облачные технологии или выделенный сервер. Это связано с низкой производительностью оборудования и периодически возникающими перегрузками.

Устаревшая версия PHP

Анализ скорости загрузки сайта часто демонстрирует неудовлетворительные результаты и при использовании версий Hypertext Preprocessor (PHP), которые уже устарели. Для ресурсов с большим количеством посещений и высокой нагрузкой очень важно регулярно обновлять PHP до последних версий: они способны обрабатывать огромное количество запросов за кратчайшее время.

«Вес» веб–ресурса

Объемные каталоги с множеством фото и видео высокого качества значительно увеличивают «вес» любого портала. Чем больше этот показатель, тем больше нужно времени для загрузки портала. Чтобы снизить влияние данного фактора, необходимо использовать кеширование на стороне сервера, а также оптимизировать скрипты и CSS–стили при помощи специальных плагинов.

Скрипты и плагины

Каждый скрипт должен быть загружен и выполнен, от чего напрямую зависит скорость загрузки сайта: на такую работу серверу требуются дополнительные миллисекунды. Нередко такие приложения формируют дополнительные HTTP–запросы к серверу, что, в свою очередь, также увеличивает продолжительность загрузки.

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

CMS

Главная проблема большинства систем управления контентом и головная боль разработчиков — генерация «грязного» кода. Он содержит лишние комментарии, пробелы, пустые строки и другие ошибки, которые должен обработать сервер прежде, чем ответит браузеру. Вычислить и улучшить такие проблемные места в коде сайта довольно не просто.

Итак, мы разобрались, что именно может замедлять работу вашего ресурса. Теперь давайте разберемся, как увеличить скорость загрузки сайта, чтобы отчет проверки Гугл Пейдж Спид стал лучше, а портал занял достойное место в топе поисковой выдачи.

Максимальная скорость на любых устройствах

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

Шаг 1. Оптимизация изображений

Первое, что необходимо сделать — провести ревизию всего визуального контента на сайте. Если вы уже пользуетесь сервисом от Гугл, он обязательно покажет, какие изображения в «зоне риска». Чтобы оптимизация сайта GooglePage Speed Insights прошла успешно, необходимо:

• Следить за размером изображений в пикселях и по возможности их минимизировать, а не только сжимать файлы.
• Выбирать формат изображений, ориентируясь на рекомендации сервиса. Для фото стоит использовать WebP или JPEG XR, а графику загружать в PNG.
• Использовать онлайн–компрессоры для сжатия фото и изображений. Сжать визуальный контент без потери качества, уменьшив размер файлов в килобайтах на 30–80%, позволят онлайн–сервисы tinypng.com или compressor.io.
• Не менять размер фото при помощи атрибутов в коде. Width и height способны отрегулировать высоту и ширину картинки, которая отображается на странице, но никак не влияют на скорость ее загрузки. Пользователь увидит фото меньше исходного размера, однако это уменьшение, благодаря атрибутам, произойдет на стороне браузера, распознающего код. Загружаться визуал в любом случае будет целиком.

Шаг 2. Сокращение CSS–стилей и JavaScript

Слишком тяжелый код с большим количеством атрибутов и команд обрабатывается значительно медленнее. Теоретически, можно перенести CSS–стили и скрипты в футер сайта, как рекомендует Гугл, но делать так не стоит. Вместо ускорения страницы вы можете получить прямо противоположный результат, когда пользователь сталкивается с ошибкой при попытке открыть веб–ресурс.

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

Шаг 3. Использование Google CDN

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

Шаг 4. Gzip-сжатие

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

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

Шаг 5. Внедрение кэширования

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

Чтобы его настроить, нужно обратиться в администрацию компании, предоставляющей вам хостинг, или поработать с файлом .htaccess. в корневом каталоге сервера самостоятельно.

Почему сайты на Taptop демонстрируют лучшие результаты в Google PageSpeed?

И это не пустые заявления, а реальная статистика разных ресурсов, собранная сервисом Гугл. Ниже можно увидеть примеры показателей для сайтов на Tilda и Taptop.

Результаты проверки для сайта на Tilda:

Результаты проверки для сайта на Taptop:

Почему порталы, собранные при помощи нашего конструктора, демонстрируют производительность выше, чем сайты на WordPress и Tilda?

• Чистый код. Большинство сайтов, сверстанных на Tilda, имеют так называемый грязный код, который значительно снижает скорость загрузки и негативно влияет на результат проверки в Пейдж Спид от Гугл. Проекты, реализованные при помощи конструктора Taptop, отличаются чистым кодом, и не имеют подобных проблем.
• Собственный хостинг. Для каждого проекта на тарифе Basic предоставляется 10 Гб свободного места на сервере. Этого достаточно для быстрой загрузки даже высокопроизводительных сайтов с большим количеством визуального контента.
• Единая экосистема. И видеоролики, и изображения находятся на одном сервере с сайтом, а не подгружаются со сторонних платформ при помощи интеграции кода в код портала (хотя такая реализация тоже возможна). Это значительно увеличивает скорость загрузки.

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