Вам нужен 100% балл в Google PageSpeed ​​Insights?

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

Я знаю, этот вопрос кажется немного глупым. Вы можете узнать, быстрая или медленная сеть, измерив время ее загрузки. Трудно понять, можно ли классифицировать значение, полученное в результате этого анализа, как «медленное» или «быстрое». Ожидание в 2 секунды может не быть проблемой, но если мой сайт загружается в два раза быстрее, это было бы абсолютно лучше, не так ли? Особенно, если принять во внимание такие вещи, как загрузка вашего веб-сайта через интернет-соединение может занять всего 2 секунды, но что насчет тех, у кого медленное соединение?

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

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

Однако стремление к совершенству может быть контрпродуктивным. Поиск совершенства в Google PageSpeed ​​Insights может пренебречь другими важными аспектами вашего веб-сайта, такими как взаимодействие с пользователем.

В поисках совершенства в Google PageSpeed ​​Insights

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

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

Используйте подходящий размер для изображений

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

Если Google PageSpeed ​​Insights жалуется на ваши изображения, хорошо, что он сообщит вам, какие изображения вызывают проблемы, чтобы вы могли их исправить. Это кропотливая работа, но ее результаты напрямую влияют на время загрузки вашего сайта.

Отложить загрузку изображений, которые не отображаются на экране

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

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

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

Убедитесь, что текст остается видимым во время загрузки веб-шрифта.

Если вы используете веб-шрифты Google, как и мы, нелепо проверять, как скрипт, который Google дает вам для загрузки шрифтов, определяется Google PageSpeed ​​Insights как неулучшаемый.

Согласно Google, вы должны использовать font-display CSS в @font-face , чтобы пользователи могли видеть текст при загрузке веб-шрифта. В частности, вы должны поставить font-display:swap в загрузку шрифтов, чтобы браузер не блокировал отрисовку текста, пока шрифт не будет доступен. Вы можете загрузить шрифты Google и импортировать их напрямую с помощью font-display , как описано здесь.

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

Удалите ресурсы, которые блокируют рендеринг

Стили CSS и сценарии JavaScript все чаще используются для изменения дизайна контента и придания ему динамичности соответственно.

Если мы загружаем CSS и JS в <header> веб-сайта, обычно рендеринг контента блокируется, и веб-сайт не загружает контент до тех пор, пока не будут обработаны стили и файлы JavaScript.

Один из способов избежать этого — переместить эти файлы в <footer> в Интернете. При этом весь контент, который находится в <body> , будет загружаться и отображаться первым, не блокируясь.

Также рекомендуется использовать атрибуты defer и async в сценариях JavaScript, чтобы загрузка выполнялась отложенно или асинхронно.

Другим аспектом, который помогает улучшить итоговую оценку Google PageSpeed ​​Insights, является факт минимизации и сжатия файлов CSS и JS, а также их объединение в один файл CSS и JS соответственно. Однако будьте очень осторожны с комбинацией, потому что, если вы комбинируете их в неправильном порядке, вы можете столкнуться с недостатками в стилях и нарушить выполнение кода JavaScript.

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

Недостатки повышения скорости вашего сайта

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

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

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

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

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

Стоит ли предлагать это странное ощущение посетителям только для того, чтобы выиграть несколько миллисекунд во время загрузки и несколько дополнительных баллов в Google PageSpeed ​​Insights? Мы так не думаем. И по этой причине мы вернулись к обычному способу загрузки стилей и скриптов, который WordPress делает по умолчанию.

Окажет ли это негативное влияние на другие аспекты, такие как SEO , правда в том, что мы не знаем (и мы не верим, что кто-то знает наверняка). Нам также неясно, имеет ли оценка Google PageSpeed ​​Insights такой же вес, как считают некоторые люди.

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

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

Избранное изображение от Тауна Стюарта на Unsplash .