Оптимизация PageSpeed Insights до 100 очков

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

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

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

Вывод однозначен: нужна оптимизация скорости загрузки сайта. Но как именно ускорить загрузку сайта на любых устройствах?

Спросите в Google, у него есть для этого решение — используйте PageSpeed Insights. Этот инструмент не только анализирует страницы, но и предлагает эффективные решения для повышения скорости.

Сократить время ответа сервера

Есть такой термин — Time To First Byte. Так называют интервал времени до получения после отправки запроса со стороны посетителя самого первого байта.

Согласно рекомендациям Google, этот показатель не должен быть больше 200 мс. В идеальном варианте — не более 50 мс. Чем меньше такой показатель, тем более быстро начнется загрузка страницы браузером.

Необходимо проверить TTFB? В таком случае используйте PageSpeed Insights. После завершения инструментом анализа проверить информацию можно в блоке под названием «Сократите время от сервера».

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

Уменьшение веса изображений

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

Но как именно это можно сделать? Алгоритм следующий:

• сначала все фотографии сожмите. В этом случае помогут специальные бесплатные инструменты (например, TinyPNG или, как вариант, Compressor.io). В отдельных случаях удается получить до 80% сжатие. При этом потери качества не будет;
• размер постарайтесь уменьшить до предельно возможного.

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

Отличным функционалом обладает сайт https://squoosh.app/. Здесь буквально в 2-3 клика можно уменьшить вес фото на 70-80%, не теряя высокое качество изображения.

Так же, прочитайте статью про оптимизацию картинок для сайта.

Сокращение кода CSS и JavaScript

Среди рекомендаций Google — сокращение CSS и JavaScript.

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

Все перечисленные нежелательные элементы вполне способны увеличить объем CSS и JavaScript вдвое как на примере, приведенном ниже.

Оптимизированный вариант будет выглядеть так:

Решить данную задачу можно достаточно быстро. Для этого установите специальный инструментарий под названием Gulpjs.

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

Данный инструментарий сокращает размер файла буквально в несколько раз. Более детальная информация — отражена в справочниках Google.

Сокращение html-кода

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

Помимо того, после сокращения визуально код напоминает вязкую кашу. В ней разобраться проблематично. Но можно упростить себе задание, используя какой-нибудь плагин. К примеру, WP-HTML-Compression.

Оптимизируем загрузку видимого контента

Речь идет о lazy loading (ленивой загрузке) — отказе от загрузки размещенного на странице контента в случае, когда в таких действиях нет необходимости. При этом имеет место специальный маркер, который сообщает, что все данные не загружены, но если в этом есть необходимость, их всегда можно будет дополнительно загрузить.

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

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

Существуют несколько типов ленивой загрузки:

• Скроллинг — контент, который не попал в видимую зону, постепенно загружается после того, как пользователем страница прокручивается;
• Клик — контент загружается при нажатии специальной ссылки «Подробнее»;
• Фоновый режим — посетитель оставил открытым загруженный ранее документ. В этом случае можно в фоновом режиме загрузить изображение большого формата.

Существует несколько решений для ленивой загрузки. Среди наиболее распространенных — следующие:

• стандартный lazy loading и David Walsh — упрощенная версия такого скрипта предусматривает замену в теге img атрибута src на data-src;
• ленивая загрузка с так называемым прогрессивным улучшением — JS используется в качестве улучшения для типичных HTML и CSS;
• плагин blazy.js на простом JS — этот скрипт «весит» совсем немного, он обеспечивает асинхронную загрузку, обеспечивает работу сразу с несколькими фото с целью экономии запросов;
• плагин Lazy Load XT jQuery — упрощенная версия предназначена именно для отложенной загрузки;
  Craig Buckler

Включаем кеширование браузера

Включение кэша браузера не должно быть чем-то сродни испытания. Но если для вас — это проблема, то используйте сеть CDN.

CDN — в переводе звучит как «сеть доставки контента». Это множество серверов со специализированным программным обеспечением. Их задача — ускорить доставку конечному пользователю контента.

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

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

Но и эту проблему вполне можно решить. Как именно? Замените счетчики изображениями, которые сможете сохранять, используя CDN.

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

Google код Analytics меняет нечасто. В основном, за год несколько раз. Именно поэтому создать можно специальный скрипт. Раз в сутки он будет проверять Analytics на наличие каких-либо зменений. Важно: новый код загрузиться лишь в том случае, когда изменения будут обнаружены. Соответственно, вы сможете хранить JavaScript код Analytics, не скачивая его постоянно при обращении к серверам Google.

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

Удаляем код JavaScript и CSS, блокирующий отображение

Удаление блокирующего отражение верхней части страницы кода — один из наиболее сложных моментов, требующих наличия определенных технических знаний. Важно: код JavaScript всегда размещайте в конце файла.

Для WordPress отличным решением ситуации способен стать плагин Autoptimize. Откройте настройки, удалите возле “Force JavaScript in Head” галочку и затем поставьте ее для “Inline all CSS.”

Включаем сжатие на сервере

Включить сжатие сможете непосредственно в соответственных настройках сервера. В том случае, когда сомневаетесь, как правильно это сделать, или вообще не знаете, обращайтесь непосредственно к сисадминистратору с просьбой подключить GZIP сжатие. Подробнее читайте в заметке «зачем вообще нужно gzip сжатие».

Если у вас ISP-менеджер, то делается это легко, в настройках www-домена.

Оптимизируем под мобильные устройства

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

Заключение

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