Оптимизация сайта по google pagespeed insights: PageSpeed Insights — Оптимизация (обновление)

Содержание

PageSpeed Insights — Оптимизация (обновление)

Всем привет! Сегодня мы поговорим о сервисе PageSpeed Insights от Google. Это сервис, который позволяет провести анализ сайта и дает определенные рекомендации по его оптимизации. Когда сервис только появился, это вызвало немалый интерес со стороны разработчиков и SEO-оптимизаторов, ведь по-факту, сам Google дает рекомендации и указывает, что конкретно нужно изменить или на что стоит обратить внимание, чтобы сайт и работал и загружался быстрее, а соответственно, был более любим поисковыми системами. В свое время я даже делал выпуск по оптимизации верстки для того, чтобы ваш проект набирал наибольшее количество баллов в PageSpeed. Там мы творили очень странные вещи по нынешним меркам — от загрузки части CSS в тег style в начале страницы, до более диких вещей, вроде загрузки стилей и ресурсов через JavaScript. И это реально работало. Но работало тогда. Давайте посмотрим, как обстоят дела сейчас, стоит ли колдовать над кодом, или достаточно просто выполнять определенные несложные правила по оптимизации сайта. В этом уроке я дам базовые обязательные рекомендации для любого проекта, актуальные на сегодняшний день и в будущем. Все рекомендации из данного урока отлично реализованы в последнем стартере OptimizedHTML 5, к примеру которого я буду обращаться по-ходу дела.

Поделиться Отправить Класснуть Запинить

Полезные материалы

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

1. Стили и скрипты

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

  • Для оптимизации CSS я использую оптимайзер clean-css в реализации gulp-clean-css в проектах с использование Gulp.
  • Для оптимизации JS я использую модуль uglify-es, как наиболее эффективный, актуальный инструмент в реализации gulp-uglify-es.
  • Конкатенацию можно реализовать любыми доступными инструментами, я предпочитаю обычный gulp-concat.

Не смотря на то, что Google PageSpeed иногда рекомендует загружать и стили и скрипты в конце документа, я рекомендую стили все-же загружать классическим способом в тег <link>, размещенный в теге <head>, а скрипты в конце документа, перед закрывающим тегом </body>, см. OptimizedHTML 5 — app/index.html.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<link rel="stylesheet" href="path/to/styles.min.css">
</head>
<body>
	
	<script src="path/to/scripts.min.js"></script>
</body>
</html>

2. Шрифты

Все, что касается шрифтов я могу уместить в одной фразе — используйте один формат woff2. Он достаточно легковесный и поддерживается везде, где только можно в настоящее время. Тот-же Google Fonts использует этот формат шрифтов как единственный. Данный момент мы обсуждали в видео-презентации OptimizedHTML 5. Для конвертации и сжатия любого шрифта в woff2 рекомендую использовать сервис Font Squirrel. Это быстрый и эффективный способ получить шрифт в нужном формате.

3. Изображения

Не зависимо от того, какой формат или форматы изображений используются в проекте, самое главное правило — старайтесь не использовать изображения, по своей физической ширине значительно превышающие размер вьюпорта, в котором они находятся. Что это значит. Допустим, вы используете 100% ширину изображения в теге <img> или в другом контейнере, размер которого, например, 700 пикселей (это можно посмотреть в инструментах разработчика любого браузера), а само изображение, загружаемое в контейнер имеет ширину 1000 пикселей. В таком случае, не зависимо от того, насколько хорошо у вас сжато изображение, Google PageSpeed укажет вам на то, что изображение необходимо оптимизировать еще, хотя на практике это приведет только к значительной потере качества.

Данное правило действует и для устройств с HiDPI — дисплеями, но немного по-другому. Например, для Retina или для мониторов с масштабированием интерфейса более 100%. Если мы имеем вьюпорт 700 пикселей на ретине, изображение, загружаемое для таких экранов не должно иметь разрешение свыше 1400 пикселей по ширине, так как масштабирование экрана на ретине 200%. Однако создавать изображения для таких экранов отдельно не обязательно, можно просто проконтролировать, чтобы качество изображения после сжатия было приемлемым, а вьюпорт для предполагаемого 100%-го масштабирования содержал изображение не намного его превышающее.

Если при разработке вы учитываете HiDPI экраны, такие, как Retina и другие с масштабированием свыше 100%, можно использовать атрибут srcset для тегов <img>, чтобы для обычных экранов загружать обычные изображения, а для Retina — увеличенные в 2 раза. Однако на практике я использую это правило и адаптацию для Retina только в своих личных проектах, так как работа с такими изображениями требует технической подготовки. В клиентских проектах, где работают контент-менеджеры, соблюдать эти правила сложно, да и не обязательно. Поэтому я убрал из OptimizedHTML 5 возможность создания изображений @2x формата. В этом нет смысла. Достаточно просто обрезать и сжимать изображения на бэкенде средствами фреймворка или CMS, в пределах разумного, чтобы менеджер, загрузив изображение, весом, например, 8 Мб не затруднил отображение контента на странице.

Почему я написал именно «значительно» превышающих размер вьюпорта — потому, что в условиях разработки Responsive проектов невозможно получить фиксированный размер вьюпорта изображения, в зависимости от экрана или устройства. На малых разрешениях вьюпорт уменьшается, а изображение, соответственно, остается неизменным. В таких случаях можно использовать вышеупомянутый атрибут srcset, который будет загружать разные изображения по размеру для разных экранов, но это, по-моему из разряда мракобесия, которое усложняет разработку и поддержку проектов.

Что касается Lazy Load, подгрузки изображений по мере их отображения, данную технику я рекомендую использовать только на тех сайтах, где изображений очень много. Например, в списках товаров или в длинных галереях. Если изображений не много, данная оптимизация хоть и может повлиять на оценку PageSpeed Insights, однако это как мертвому припарка. Поэтому в контентных, статейных проектах, коммерческих сайтах и визитках данное правило можно опустить и не выполнять отложенную загрузку. Однако если у вас очень много изображений на одной странице — Lazy Load обязателен.

4. Бэкенд

Данный раздел является, на мой взгляд, важнейшим. Вы можете сколько угодно оптимизировать стили, собирать скрипты в кучу, уменьшать изображения до 1 пикселя, однако если у вас тяжелый и неповоротливый бэкенд, который 5 секунд генерирует содержимое и 2 секунды соединяется с базой, это очень плохо. И плохо даже не столько для оценки PageSpeed, сколько для пользователей и поисковых систем. Это реальная проблема. Если я захожу на сайт и вижу белую страницу более 3-х секунд, просто закрываю вкладку и иду дальше. Зачастую, эта проблема — результат неграмотной разработки, использования множества тяжелых плагинов, перегруженного бэкенда. Последовательность работы такой городьбы сложно отследить и оптимизировать. Чтобы у вас не случилось таких проблем, разрабатывайте сайты с использованием какой-либо CMS по документации и следуйте рекомендованным разработчиками самой системы правилам.

Не хотел показывать пальцем, пример сам напрашивается. Из опыта, лидером по таким проблемам с бэкендом является WordPress. Ничего не хочу говорить про эту систему плохого, здесь проблема скорее в подавляющем большинстве криворуких разработчиков как плагинов, шаблонов, так и сайтов. При грамотном подходе, ориентируясь на Codex, можно сделать вполне нормальный оптимизированный проект. Однако, на практике, среди готовых проектов такое встречается крайне редко — реализация грамотного подхода при разработке с использованием данной CMS довольно сложная и затратная по времени задача для среднего разработчика, придется отказаться от множества плагинов сомнительного качества и писать все самому. Когда ваши задачи выходят за рамки скачивания и кастомизации готовых шаблонов и плагинов, приходит понимание правильной модели разработки, MVC здесь лидер. Я предпочитаю использовать другие системы, которые позволяют контролировать каждый этап разработки — от создания конкретных плагинов, до разработки всего функционала на более низком уровне. В настоящее время лидерами для меня являются

Laravel, Opencart и Winter CMS (бывш. October CMS). Это очень прозрачный MVС у всех систем и возможность контролировать чистоту кода как бэкенда на уровне архитектуры, так и фронтенда, без танцев с бубном.

Однако, использование любой CMS или фреймворка — это сразу минус 5-10 баллов Google PageSpeed, особенно без кеширования, так как на генерацию бэкенда и обращения к базам данных уходит время. Поэтому в своих личных проектах и некоторых клиентских, где не нужен бэкенд, я использую генератор статики Jekyll. Сайт, созданный с использованием Jekyll представляет собой генерацию статических файлов, собранную единожды, например, при написании статьи, добавления другого контента или после внесения каких-либо правок. Лично для меня это по-прежнему самая лучшая, идеальная контентная система, которую я рекомендую всем, кому не нужен бэкенд и требуется молниеносная скорость и эффективность сайта. Сайт WebDesign Master сгенерирован с использованием Jekyll, можете оценить его реальную скорость работы.

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

5. Кеширование сервера

Для всех проектов рекомендую использовать директивы из файла ht.access, который вы найдете в стартере для верстки OptimizedHTML 5. Здесь прописаны, на мой взгляд, самые эффективные настройки сервера для кеширования изображений, стилей, скриптов, шрифтов и других ресурсов. Данный пункт реально добавит вам десятки баллов PageSpeed, без боли.

Если вы используете Winter CMS, править .htaccess вручную не обязательно — можно, например, использовать плагин Speedy, который сделает эту работу за вас.

6. Реальная эффективность сайта

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

Мракобесие

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

  1. Использовать async для всех скриптов. Данный параметр может повлиять на оценку, но в реальности все ресурсы загружаются в любом случае. Используйте async только там, где асинхронная загрузка действительно необходима, например, при загрузке виджетов или ресурсов с другого сервера.
  2. Боязнь больших библиотек и плагинов. Можете использовать абсолютно любые библиотеки, вроде jQuery или абсолютно любые плагины, вроде огромного Swiper на ванильном JS. Если все скрипты в одном файле и сжаты — можете быть спокойны. Намного хуже писать свой велосипед плагина из 10-ти строк кода, который работает кое-как и не везде. Это только ухудшит пользовательский опыт или вообще сломает экспириенс, если на данном функционале завязана значительная часть взаимодействия со страницей. Проще говоря: каруселька с товарами не работает, посетитель ушел, поисковик это отметил, сайт провалился. Нынешние скорости интернета позволяют загружать файлы библиотек и скрипты, содержащие библиотеки довольно быстро. Если бы это было не так, все изображения с сайтов у вас грузились бы по два часа. Ваша библиотека или минифицированный JS-файл — это лишь капля в море в общем потоке загружаемых ресурсов.
  3. Загрузка стилей первого экрана в тег <style>. Знакомая практика для всех, кто занимался оптимизацией страниц. Данный костыль может повлиять на оценку PageSpeed, однако значительно усложнит разработку и поддержку сайта. Использовать или нет — решать вам. Я давно отказался от этого приема.
  4. Использование WEBP формата изображений с фоллбеком на обычные или без него. Тоже спорный тренд для угоды цифрам PageSpeed. Формат неплох, имеет хорошее сжатие без заметного ущерба качеству. Его можно использовать, если есть желание. Я знаю некоторые студии, в которых практикуется подключение модуля PageSpeed для Nginx. Он отдает WEBP только тем браузерам, которые умеют с ним работать. На практике, это лишь усложняет разработку, требует написание фоллбеков и генерацию дополнительных изображений, а в случае работы с какой-либо CMS, вообще лишает все мероприятие смысла, ведь пользователь или контент-менеджер будет использовать тот формат, который подвернется. Если вы используете CMS или фреймворк, оптимизируйте и сжимайте популярные типы изображений средствами самой системы на бэкенде. PageSpeed, конечно, заметит возможность еще большего сжатия изображений, но в этом нет ничего страшного. Это просто рекомендация, выданная машиной на основе анализа, это ее работа. Все должно быть в пределах разумного.
  5. Использование атрибута srcset или тега <picture> для загрузки различных форматов изображений, предназначенных для разных экранов. Данный пункт уже обсудили сегодня в разделе 3 — Изображения. Заморочиться можно, но смысла особого нет.
  6. Спрайты. Довольно популярная методика из 2010-х, которая заключается в объединении изображений или иконок в спрайты с последующим выводом через координаты. Сейчас не имеет никакого смысла, сложна в реализации, далека от контент-менеджеров. Количество запросов к серверу, создаваемое 10-ю иконками или 1 запрос к спрайту ощутимой разницы в реальной оптимизации не дадут, а вот внесение правок, добавление иконок и любые другие изменения требуют дополнительных временных затрат.

Единственной реальной проблемой при оптимизации сайта, которая может повлиять как на скорость загрузки сайта, так и на показатель PageSpeed — это виджеты сторонних сайтов, различные метрики и загрузка ресурсов с CDN. Это виджеты обратной связи, комментариев, групп в социальных сетях, плагины, библиотеки, сервисы статистики и так далее. Они подгружают ресурсы с других серверов и управлять их кешированием или скоростью загрузки невозможно. Могу посоветовать только использовать как можно меньше таких виджетов, не пользоваться шрифтовыми сервисами и прочим, а также, по возможности, загружать скрипты с таких ресурсов, используя атрибут async, загружать виджеты методом отложенной загрузки, если они не находятся на первом экране. Если виджет или ресурс необходим проекту жизненно, его не возможно перенести на рабочий сервер, сделать асинхронную или отложенную загрузку, ничего не остается, кроме как смириться с оценкой и не переживать по этому поводу.

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

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

Оптимизация сайта Google PageSpeed Insights — 17 рекомендаций

Рекомендации Google PageSpeed Insights — минимизация работы основного потока

Некоторые из методов, используемых для сокращения работы основного потока, уже были рассмотрены в других разделах этого поста:

  • Сокращение вашего кода
  • Удаление неиспользуемого кода
  • Реализация кэширования

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

Webpack часто используется для разделения кода. Обратите внимание, что это довольно продвинутая техника и она не подходит для новичков.

8. Сократить время выполнения JavaScript

Выполнение JavaScript часто забирает наибольшее количество времени у работы основного потока, чем другие ресурсы. У PageSpeed Insights есть отдельная рекомендация предупреждать вас, если выполнение JavaScript оказывает существенное влияние на производительность вашего сайта:

Рекомендации Google PageSpeed Insights — сокращение времени выполнения JavaScript

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

9. Уменьшите время отклика сервера (TTFB)

Время до первого байта (TTFB) — это показатель времени, которое требуется браузеру для получения первого байта данных с сервера вашего сайта после выполнения запроса. Поэтому сокращение времени отклика сервера входит в число рекомендаций Google PageSpeed Insights. Если вам удастся достичь низкого TTFB, вы увидите это сообщение в разделе «Успешные аудиты»:

Рекомендации Google PageSpeed Insights — сокращение времени ответа от сервера

Есть несколько факторов, которые могут повлиять на ваш TTFB. Некоторые стратегии снижения этого включают:

  • Выбор качественного веб-хостинга
  • Использование легких тем и плагинов
  • Сокращение количества плагинов, установленных на вашем сайте
  • Использование сети доставки контента (CDN)
  • Реализация кэширования браузера
  • Выбор надежного поставщика доменных имен (DNS)
10. Правильный размер изображения

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

Рекомендации Google PageSpeed Insights — подбор правильного размера изображения

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

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

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

Например, скажем, что у вас есть изображение в хедере сайта и вы хотите, чтобы оно было отзывчивым. Вы можете загрузить три его версии шириной 800, 480 и 320 пикселей. Затем можно применить атрибут srcset, например так:

<img srcset=»header-image-800w.jpg 880w, Header-image-480w.jpg 480w, Header-image-320w.jpg 320w» sizes=»(max-width: 320px) 280px, (max-width: 480px) 440px, 800px» src=»header-image-800w.jpg»>

<img srcset=»header-image-800w.jpg 880w,

Header-image-480w.jpg 480w,

Header-image-320w.jpg 320w»

sizes=»(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px»

src=»header-image-800w.jpg»>

Атрибут srcset указывает различные доступные файлы, а атрибут sizes сообщает браузерам, какой из них следует использовать, исходя из текущего размера экрана.

11. Отложите загрузку скрытых изображений

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

Меньшая загрузка до того, как страница станет видимой, означает лучшую производительность, поэтому Google рекомендует этот метод:

Рекомендации Google PageSpeed Insights — подбор правильного размера изображения

Есть несколько плагинов WordPress, специально созданных для отложенной загрузки, в том числе a3 Lazy Load и Lazy Load by WP Rocket. Различные плагины оптимизации изображения и производительности, такие как Autoptimize, также имеют функции отложенной загрузки.

12. Эффективно кодировать изображения

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

Рекомендации Google PageSpeed Insights — эффективная кодировка изображений

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

Другие рекомендации, которые влияют на то, «пройдете» вы или «не пройдете» аудит «Эффективное кодирование изображений» включают:

  • Использование изображений в правильном размере
  • Реализация отложенной загрузки изображений
  • Преобразование изображений в форматы файлов следующего поколения, такие как WebP
13. Используйте современные форматы изображений

Некоторые форматы файлов изображений загружаются быстрее, чем другие. К сожалению, это не относится к обычным форматам таким как PNG или JPEG. Изображения WebP становятся новым стандартом, и Google PageSpeed сообщит вам, если ваши изображения не соответствуют ему:

Рекомендации Google PageSpeed Insights — современные форматы изображений

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

14. Используйте видео форматы вместо GIF анимаций

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

К сожалению, за эти преимущества приходится платить скоростью загрузки. GIF-файлы требуют неотложенной загрузки, поэтому PageSpeed ​​Insights рекомендует вместо этого показывать видеоконтент:

Оптимизация сайта Google PageSpeed Insights — рекомендация использования видео вместо GIF анимаций

Во-первых, для преобразования GIF-файлов в видеоформаты, вам нужно решить какой формат видео вы хотите использовать:

  • WebM: самый оптимизированный видеоформат для веба, но он имеет совместимость не со всеми браузерами
  • MP4: создает файлы немного большего размера чем WebM, но совместим c большинством основных браузеров

Далее вы можете просто воспользоваться онлайн конвертерами форматов.

Встраивание видеоконтента вместо анимации

GIF анимации обычно воспроизводятся автоматически и работают по циклу и они всегда без звука. Внедрение вашего нового файла MP4 или WebM на ваш сайт WordPress не даст этих возможностей. Однако вы можете сымитировать их с помощью очень простого кода. Загрузите свое видео в медиатеку, а затем добавьте следующий код на страницу, где вы хотите вставить анимацию:

<video autoplay loop muted playsinline> <source src=»output.mp4″ type=»video/mp4″> </video>

<video autoplay loop muted playsinline>

  <source src=»output.mp4″ type=»video/mp4″>

</video>

Атрибуты тега video сделают ваше видео более «похожим на GIF». Просто измените имя и тип файла в соответствии с вашим ресурсом. Для получения более подробной информации по этому вопросу мы рекомендуем прочитать руководство Google по преобразованию GIF-файлов в видео.

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

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

Оптимизация сайта Google PageSpeed Insights — оставляйте текст видимым до загрузки шрифта

Google рекомендует вам решить эту проблему, применив директиву @font-face. Для этого откройте таблицу стилей (style.css) и добавьте следующее после атрибута src в @font-face:

16. Включите сжатие текста

Рекомендация о включении сжатия текста в Google PageSpeed ​​Insights относится к использованию сжатия GZIP на сервере:

Оптимизация сайта Google PageSpeed Insights — включите сжатие текста

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

Первый — установить плагин с функцией сжатия GZIP. Плагин WP Rocket имеет такой функционал, если вы готовы за него заплатить.

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

Большинство сайтов WordPress работают на серверах Apache. Код для включения сжатия GZIP выглядит следующим образом:

<IfModule mod_deflate.c>   # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов   AddOutputFilterByType DEFLATE application / javascript   AddOutputFilterByType DEFLATE application / rss + xml   AddOutputFilterByType DEFLATE application / vnd.ms-fontobject   AddOutputFilterByType DEFLATE application / x-font   AddOutputFilterByType DEFLATE application / x-font-opentype   AddOutputFilterByType DEFLATE application / x-font-otf   AddOutputFilterByType DEFLATE application / x-font-truetype   AddOutputFilterByType DEFLATE application / x-font-ttf   AddOutputFilterByType DEFLATE application / x-javascript   AddOutputFilterByType DEFLATE application / xhtml + xml   AddOutputFilterByType DEFLATE application / xml   AddOutputFilterByType DEFLATE font / opentype   AddOutputFilterByType DEFLATE font / otf   AddOutputFilterByType DEFLATE font / ttf   AddOutputFilterByType DEFLATE image / svg + xml   AddOutputFilterByType DEFLATE image / x-icon   AddOutputFilterByType DEFLATE text / css   AddOutputFilterByType DEFLATE text / html   AddOutputFilterByType DEFLATE text / javascript   AddOutputFilterByType DEFLATE text / plain   AddOutputFilterByType DEFLATE text / xml   # Удалить ошибки браузера (необходимо только для действительно старых браузеров)   BrowserMatch ^ Mozilla / 4 gzip-только-текст / html   BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip   BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html   Заголовок приложения Vary User-Agent </ IfModule>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<IfModule mod_deflate.c>

  # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов

  AddOutputFilterByType DEFLATE application / javascript

  AddOutputFilterByType DEFLATE application / rss + xml

  AddOutputFilterByType DEFLATE application / vnd.ms-fontobject

  AddOutputFilterByType DEFLATE application / x-font

  AddOutputFilterByType DEFLATE application / x-font-opentype

  AddOutputFilterByType DEFLATE application / x-font-otf

  AddOutputFilterByType DEFLATE application / x-font-truetype

  AddOutputFilterByType DEFLATE application / x-font-ttf

  AddOutputFilterByType DEFLATE application / x-javascript

  AddOutputFilterByType DEFLATE application / xhtml + xml

  AddOutputFilterByType DEFLATE application / xml

  AddOutputFilterByType DEFLATE font / opentype

  AddOutputFilterByType DEFLATE font / otf

  AddOutputFilterByType DEFLATE font / ttf

  AddOutputFilterByType DEFLATE image / svg + xml

  AddOutputFilterByType DEFLATE image / x-icon

  AddOutputFilterByType DEFLATE text / css

  AddOutputFilterByType DEFLATE text / html

  AddOutputFilterByType DEFLATE text / javascript

  AddOutputFilterByType DEFLATE text / plain

  AddOutputFilterByType DEFLATE text / xml

 

  # Удалить ошибки браузера (необходимо только для действительно старых браузеров)

  BrowserMatch ^ Mozilla / 4 gzip-только-текст / html

  BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip

  BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html

  Заголовок приложения Vary User-Agent

</ IfModule>

Вы должны добавить его после #END в вашем файле .htaccess. Если ваш WordPress-сайт находится на сервере Nginx, вам следует добавить следующий код в файл nginx.conf:

36 gzip на; 37 gzip_disable «MSIE [1-6] \. (?!. * SV1)»; 38 gzip_vary on; 39 gzip_types text / обычный текст / css текст / приложение javascript / приложение javascript / x-javascript;

36 gzip на;

37 gzip_disable «MSIE [1-6] \. (?!. * SV1)»;

38 gzip_vary on;

39 gzip_types text / обычный текст / css текст / приложение javascript / приложение javascript / x-javascript;

Если вы хотите проверить включено ли GZIP на вашем сервере, мы предлагаем использовать GiftOfSpeed:

Оптимизация сайта Google PageSpeed Insights — сервис GiftOfSpeed

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

17. Предварительное подключение к необходимым ресурсам

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

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

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

предварительно подключить необходимые источники
Предварительно подключиться к рекомендации по требуемому происхождению

Существует несколько способов реализации этой стратегии оптимизации. Если вам удобно редактировать файлы тем WordPress, вы можете добавить тег ссылки в файл header.php. Вот пример:

<link rel = «preconnect» href = «example.com»>

<link rel = «preconnect» href = «example.com»>

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

Другой вариант — использовать плагин для достижения того же эффекта. Perfmatters включает в себя функцию предварительного подключения (отказ от ответственности: я один из основателей Perfmatters). WP Rocket и Pre * Party Resource Hints включают схожую функциональность.

Оптимизация сайта под требования PageSpeed Insights

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

Уже в марте 2021 года Google ужесточит свои требования к оптимизации страниц сайтов, скорости их загрузки, и именно, на мобильных устройствах.
В своем сервисе Google Search Console, вкладка Удобство для мобильных, стала давно его неотъемлемой частью.


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

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

Хотя, еще очень многие не придают этому большого значения. Повторяется история с SSL-сертификатами — пока гром не грянет.
Ждут до последнего часа.

Всем нам приходиться заниматься SEO-оптимизацией своих сайтов под поисковые запросы Yandex и Google, для получения органического трафика из этих систем.

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

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

Медленная загрузка страниц напрямую связана с конверсией сайтов, тех же подписных и продающих страниц — Landing Page.

Сервис от Google — PageSpeed Insights.

PageSpeed это продукт Lighthouse, который использует Google на своем сервисе PageSpeed Insights для замера скорости загрузки, именно, отдельных страниц (по URL-адресу, веденному в строку анализа), а не всего сайта, как некоторые, по незнанию, думают.

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

Google обновил Lighthouse с версии 5.5 на 6.3. Очень скоро предстоит обновление и до 7 версии. Она уже есть в наличии.
После этого было много нареканий, что упала скорость загрузки сайта. В действительности, скорость не упала, а изменились критерии оценки.

До сих пор многие не понимают, что происходит эмуляция (имитация) на 25% выше Мобильной сети 3G, и на 25% ниже чем 4G.
Эмуляция устройства — замедление процессора устройства — Троттлинг.
Естественно, на это влияет и сам сайт — его отзывчивость и время отклика сервера, на котором расположен сайт и т.д.

Три основных составляющих:
  1. Эмуляция сети (сетевой Троттлинг).
  2. Эмуляция устройства (Троттлинг процессора).
  3. Время отклика страницы сайта, отзывчивость.

Время отклика сервера, в реальном времени, без регистрации, можно отслеживать по ссылке:
https://ping.loading.express
только вводите ссылку на свой сайт, ping обновляется постоянно.

На ранжирование сайтов влияет и отчет об удобстве пользования сайтом в браузере Google Chrome. Но эти данные обновляются только раз в месяц.

Если у Вас мощный компьютер и скоростной Интернет — 1000 Мб/с, и на нем Ваш сайт открывается быстро — это не значит, что он будет так же быстро работать на медленных устройствах.

Но если страницы сайта мгновенно открываются на медленных устройствах, значит Ваш сайт действительно Быстрый. Поэтому Lighthouse и использует Троттлинг.

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

Более подробно можно прочитать на сервисе PageSpeed Insights в меню DOCS.

Параметры анализа PageSpeed Insights.

Сервис PageSpeed Insights, при помощи технологии Lighthouse, использует 6 параметров для анализа скорости загрузки страницы сайта в браузере:

  1. FCP — Первая отрисовка контента.

    Показатель времени между ответом сервера и появлением первого контента — изображения или текстового блока. Ответ самого сервера не входит в этот показатель. До FCP посетитель будет видеть белый экран. Измеряется в секундах.
    До двух секунд — зеленая зона. От 2 до 4 секунд — желтая. Больше четырех — красная зона.

  2. TTI — Загрузка до интерактивности.

    Время, через которое страница полностью готова к взаимодействию с пользователем. До этого времени работа со страницей̆ может вызывать затруднение (притормаживание скролла, не работают кнопки). Измеряется в секундах.
    До 3.8 сек. — зеленая зона. От 3.9 до 7.3 сек. — желтая. Больше 7.4 сек. — красная зона показателя.

  3. SI — Speed Index — Индекс скорости загрузки.

    Показывает насколько быстро загружается содержимое первого экрана страницы сайта при отрисовке в браузере (имеется ввиду то что видно на 1-ом экране монитора ПК или мобильного
    устройства). Измеряется в секундах.
    До 4.3 сек. — зеленая зона. От 4.4 до 5.8 сек. — желтая. Больше 5.9 сек. — красная зона показателя.

  4. TBT — Общее время блокировки основного потока в миллисекундах.

    Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 м/с. Это параметр показывает общую загрузку основного потока. Сюда входит и применение стилей̆, и отрисовка, и выполнение Java-скриптов. Измеряется в м/секундах.
    До 300 м/с. — зеленая зона. От 300 до 600 м/с. — желтая. Больше 600 м/с. — красная зона показателя.

  5. LCP — Отрисовка крупного контента.

    Время, необходимое для отрисовки крупного контента 1-го экрана страницы. Это может быть изображение или текст. Остальной контент будет не полный. Измеряется в секундах.
    До 2 сек. — зеленая зона. От 2 до 4 сек. — желтая. Больше 4 сек. — красная зона показателя.

  6. CLS — Совокупное смещение элементов макета в процентах на странице во время загрузки.

    Элементы могут смещаться из-за подгрузки изображений, шрифтов, рекламных блоков. Сверху или снизу. Чаще бывает сверху. Виновником может быть изображение, видео или шрифт с неизвестными размерами.
    Этот показатель считывается в живых данных, даже после полной загрузки страницы. Измеряется в секундах.
    До 0.1 — зеленая зона. От 0.1 до 0.25 сек. — желтая. Больше 0.25 — красная зона показателя.

Как улучшить показатели PageSpeed Insights.

Как улучшить показатели PageSpeed Insights на 100%, чтобы все страницы сайта загружались мгновенно?
Сразу скажу — автоматических методов нет. Это очень большой и кропотливый объем работы. Да, можно обратиться к высококлассному программисту — если средства позволяют.

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

Очень большое значение имеет то, на каком движке или CMS создан сам сайт. У меня сайты на WordPress. Исходя из этого — все мои методы, используемые скрипты и отдельные плагины будут касаться именно этой CMS.

Часть работы уже сделана. Тема-шаблон, установленная на сайте —  BeTheme.
Премиум-тема адаптивная, тяжелая, очень навороченная, с тремя редакторами и т. д. Отдельного плагина, типа AMP, для мобильной версии сайта не использую.
С более простыми и легкими темами для WordPress — работы, конечно, меньше. Тогда и не было бы смысла писать.

Важная информация! В своей работе, частично, я использовал советы и приобретенные скрипты на сайте LOADING.express у его создателей А.Белогородцева и А.Махметхаждиева.
Правда, хочу оговориться, что скрипты, которые они предлагают, подходят для самописных сайтов, самостоятельных Landig Page, сверстанных программистами.
Пример анализа загрузки страницы сайта мобильной версии на сервисе LOADING.express:

Не все можно применить на WordPress — некоторые скрипты необходимо изменить, часть осталась не у дел. Не все скрипты работают на виртуальных хостингах, только на выделенных серверах с определенными правами.

Отдельно Скрипты я не продаю, но их можно скачать, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog. Раздел платный.
Но, регистрация стоит намного дешевле самих скриптов. Решайте сами.

Вам я хочу предложить только то, что протестировал и применяю на своих сайтах.

Перечень работ для улучшения показателей PageSpeed Insights.

А теперь, вкратце, что необходимо будет сделать на сайте WordPress, чтобы улучшить все 6 показателей PageSpeed Insights для быстрой загрузки его страниц.

FCP (First Contentful Paint).

Устранить всё, что блокирует первую отрисовку контента:

  • Минимизируем файлы CSS. Если Стили меньше 100 килобайт, вписываем их методом инлайн (встраиваем стили CSS в HTML-код).
  • По возможности, исключить выполнение Java-скриптов при первой отрисовке.
    Особое внимание внешним ресурсам (социальные сети, метрики).
  • Если сайт сверстан грамотно, то для отрисовки первого контента на первом экране JS не требуются.
TTI (Time to Interactive).
  • Отложить выполнение сторонних скриптов через атрибут lazi (на определенное
    время).
  • Включить отложенную загрузку для фреймов (iframe) или заменить.
  • Оптимизируем собственные скрипты сайта. Откладываем их загрузку с помощью атрибута defer (по всему сайту).
  • По возможности, отказываемся от тяжелых библиотек.
SI (Speed Index).
  • Улучшаем показатели FCP, LCP и TTI. В результате показатель Speed Index
    сам поднимется вверх.
TBT (Total Blocking Time).
  • Разбиваем выполнение Java-скриптов на мелкие задачи.
    Оптимизируем long task — задачи (скрипты), на выполнение которых уходит более 50 миллисекунд.
  • Откладываем функционал сайта ненужный для отрисовки.
LCP (Largest Contentful Paint).

Определяем самый крупный контент на первом экране сайта.

  • Если это изображение, проверяем, чтобы оно не была отложено и добавляем его в предзагрузку — атрибут preload.
  • Если текст — добавляем шрифт в предзагрузку (preload).
CLS (Cumulative Layout Shift).
  • Чтобы избежать смещения элементов при загрузке страницы — под каждый элемент (особенно касается изображений) резервируем для них место (высота — ширина).
    Не загружайте на сайт изображения, фотографии, размером больше, чем требуется.

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

Видео-версия, урок из учебного раздела Centr-Sit-Info Уровень Profi-bizblog:

 

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

Учитывая прошлый опыт, начнем работу со скриптами от внешних сервисов — Яндекс-метрика, Facebook, ВКонтакте, Одноклассники.
Читайте продолжение в статье — Оптимизация асинхронной загрузки кода виджетов социальных сетей.
Любой виджет из этих сервисов загружается раньше любого контента сайта, тем самым, сильно тормозит отрисовку первого экрана.

Тем, кому нужна помощь и кого заинтересовала данная тема, переходите в раздел
Centr-Sit-Info Уровень Profi-bizblog.

Нужна дополнительная информация, возникли сопутствующие вопросы? — пишите в комментариях – рад буду помочь.

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

Ускорение загрузки сайта + оптимизация для Google PageSpeed Insights

«Ускорение загрузки сайта» — это решение для 1с-Битрикс, ускоряющее отображение сайта на всех типах  устройств и  положительно влияющее на баллы, скорость и параметры загрузки сайта в Google  PageSpeed Insights.

Обзор возможностей решения в видео-формате: youtube.com

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

1. Оптимизация css-стилей сайта
Решение имеет механизм оптимизации работы стилей сокращающий время до отображения страницы и устраняющий проблему PageSpeed «Устраните ресурсы, блокирующие отображение». Дополнительно стили объединяются в один файл и оптимизируются — как следствие уменьшается вес стилей и требуемое количество подключений

2. Оптимизация внешних стилей
Решение умеет оптимизировать внешние стили и Google Fonts, сохраняя, оптимизируя и подключая их локально

3. Font-display
Решение имеет механизм автоматической установки font-display: swap для шрифтов

4. Оптимизация JavaScript и счётчиков
В последних версиях  решения добавился функционал работы с JavaScript — теперь вы можете  отложить выбранные скрипты до загрузки страницы или до взаимодействия  пользователя с сайтом

5. Preconnect и Preloading
С помощью решения можно через настройки установить preconnect   (предсоединения), preloading (предзагрузки) без редактирования кода сайта

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

В терминологии сервиса PageSpeed Insight решение работает с проблемами:


Простая установка и настройка
Решение работает «На лету», не редактируя исходные файлы
Обрабатываемые css-стили оптимизируются и сжимаются
Поддерживается работа с Google Fonts и внешними стилями
Ускоряет работу сайта у реальных пользователей, а не только в PageSpeed Insight
Умеет удалять подключаемый из ядра битрикса Open Sans
▷   Оптимизирует работу с JavaScript и счётчиками
▷  Отдельные настройки для каждого сайта по многосайтовости
✔   Корректно работает на пк, смартфоне и планшете  
Поддерживает механизм многосайтовости
Одинаково хорошо работает с кодировками UTF-8 и Windows-1251
Использует стабильные события и работает на большинстве версий 1с-Битрикс
Поддерживает композитный и автокомпозитный режим
Корректно работает с большинством готовых решений (Аспро, Digital Web, Intec и т.д.) и на сайтах с уникальным дизайном


Дополнительные рекомендации:

Для дополнительного ускорения отображения сайта и увеличения рейтинга скорости по Google Pagespeed Вам будут полезны:

— Решение «Отложенная загрузка картинок, видео и фоновых изображений», решающее проблему «Отложите загрузку изображений» — смотреть карточку решения

— Решение «Оптимизация и сжатие HTML + CSS», уменьшающее вес отдаваемых html-страниц — смотреть карточку решения
Ускорение загрузки сайта + оптимизация для Google PageSpeed Insights

Новые вопросы с меткой [pagespeed-insights]

Новые вопросы с меткой [pagespeed-insights] — Stack Overflow на русском

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

0голосов

0ответов

50показов

Удалить js скрипты на мобильной версий

Пользуюсь WordPress и есть виджеты, видео и прочее. Они отключены на мобильной версии. Допустим, видео в виджете отключено, но скрипт https://www.youtube.com/s/player/9a0939d3/player_ias.vflset/en_US/…

0голосов

0ответов

14показов

Cumulative Layout Shift (CLS) выдает ошибку даже на пустой html файл

Подскажите на что конкретно гугл ругается? Файл абсолютно пустой, нет css, нет js, нет картинок, и нет абсолютно никакого смещения контента, ничего внешнего не подключается

0голосов

0ответов

45показов

Оптимизация скорости загрузки сайта, в режиме 3g не до конца загружается страница

Есть лендинг, сделанный на Adobe Muse https://sib.meistercompany.ru/. Проблема заключается в том, что при эмулировании загрузки в режиме Slow 3g или реальном заходе с медленным интернетом сайт просто …

0голосов

0ответов

48показов

Не работает PageSpeed

При попытке проверить скорость загрузки сайта вылетает ошибка Lighthouse returned error: PROTOCOL_TIMEOUT. Истекло время ожидания ответа от протокола DevTools. Метод: Runtime.evaluate. (…

0голосов

0ответов

57показов

Laravel Mix 2 создать 2 версии файла

В PageSpeed Insights появилась новая метрика «Не отправляйте устаревший код JavaScript в современные браузеры» …frontend/item.js?v=1.11.71 6,0 KiB …frontend/item.js?v=1.11.71:1:190879 @…

0голосов

0ответов

106показов

Как оптимизировать CLS (Google Page Speed)?

Есть несколько страниц, где никудышный показатель CLS в Google Page Speed. Контент на страницах — текст, изображение, много текста. Изображения на разных страницах могут быть разного разрешения. Кроме …

0голосов

2ответа

142показа

Страницы выдают 404 в Google Pagespeed Insights

Сайт https://armoservis.ru выдает подобную ошибку при анализе любых страниц, кроме главной (например, https://armoservis.ru/about): Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Не удалось …

0голосов

0ответов

54показа

Оценка скорости сайта без учета скриптов «яндекс-метрики»

На данный момент пытаюсь повысить скорость загрузки главной страницы сайта, оценку изменений произвожу через Google PageSpeed и Performance в консоли Chrome. Но результаты сильно разнятся от теста к …

0голосов

0ответов

25показов

Как сжать полупрозрачное изображение для прохождения рекомендаций по Pagespeed?

При оптимизации сайта в Pagespeed получаю предупреждение: «Настройте подходящий размер изображений» — потенциальная экономия 0,46с и «Используйте современные форматы изображений»…

-1голос

1ответ

120показов

GZIP включено, а PageSpeed не видит этого. Как исправить?

На сайте включено сжатие GZIP, а Google PageSpeed все равно пишет, что необходимо включить его. В чем может быть проблема? Вот скриншот в фаербаге, что сжатие включено: Вот скриншот из Pagespeed: …

0голосов

982показа

Что это за строчка? chrome-extension://napifgkjbjeodgmfjmgncljmnmdefpbf /styles.css

Нужно оптимизировать сайт, но в инспекторе показывает, что это расширение не используется на 100%, а вес имеет. «chrome-extension://napifgkjbjeodgmfjmgncljmnmdefpbf /styles.css» — что это такое? нужно …

0голосов

1ответ

28показов

Не включается сжатие текстовых ресурсов по рекомендации PageSpeed Insights

PageSpeed Insights пишет, что ни фига не включено сжатие текстовых ресурсов. Что посоветуете? файл .htaccess <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts …

0голосов

0ответов

298показов

Оптимизация кеша для статических объектов

Всем объектам проставил на максимум время кеша в htaccess, а google page speed все-равно ругается. Пользуюсь плагином LiteSpeed Cache Возможно где-то ошибся или упустил? # BEGIN WP Rocket v3.4.1.2 # …

0голосов

1ответ

166показов

PageSpeed Insights ошибка при тестировании

При попытке просканировать сайт http://izba.ixweb.ru/ выдается ошибка и не сканирует его вовсе, в чем может быть проблема? Lighthouse returned error: INTERNAL: Extension result empty. Lighthouse …

3голоса

0ответов

5kпоказов

Яндекс.Метрика затормаживает загрузку сайта

Если прогнать сайт через https://developers.google.com/speed/pagespeed/insights/, то наблюдается интересная штука. В разделе влияние стороннего кода видно, что сторонний код Яндекс.Метрики блокирует …


Stack Overflow на русском лучше работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принять все файлы cookie Настроить параметры

 

Оптимизация сайта для Google page speed и Lighthouse — ВебКадеми

На чтение 13 мин Просмотров 1.6к. Опубликовано

В этой статье я описал множество способов и приемов которыми можно оптимизировать скорость загрузки и отрисовки страницы. С помощью них вы сможете добиться высоких показателей в Google Page Speed Insights, Lighthouse и других тестах.

Валидация HTML и CSS

Перед тем как оптимизировать скорость загрузки и отрисовки страницы необходимо убедиться что в коде страницы нет ошибок. Для проверки используем сервисы для валидации HTML и валидации CSS кода.

Валидатор HTML: https://validator.w3.org/
Валидатор CSS: https://jigsaw.w3.org/css-validator/

Веб-шрифты формата woff2. Отказ от Google Fonts

Для оптимизации скорости загрузки лучше разместить веб-шрифты в проекте. На сегодняшний день можно смело использовать формат woff2 – он современный, оптимизированный по весу, поддерживается всеми браузерами, кроме IE и Opera mini. Сам сервис Google Fonts использует только его, отказавшись от всех остальных форматов.

Скачать шрифт в формате ttf для конвертации в woff2 можно на том же Google Fonts. Сервисы для конвертации в woff2: transfonter.org или fontsquirrel.com

При конвертации, или при описании директивы @font-face не забудьте указать в ней CSS свойство font-display: swap; это позволит не задерживать отображение текста, пока загружается веб-шрифт.

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

Предварительная загрузка шрифтов и других ресурсов

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

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

Делается это тегом link внутри тега head. Пример предварительной загрузки шрифтов:

<link rel="preload" href="./fonts/montserrat/Montserrat-Bold.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/montserrat/Montserrat-ExtraBold.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/montserrat/Montserrat-Medium.woff2" as="font" crossorigin="anonymous">

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

Сжатие jpg и png графики

После экспорта jpg и png графики из макета, она зачастую весит больше, чем могла бы. Это зависит от алгоритмов и степени сжатия. Для оптимизации веса рекомендую использовать специальные сервисы.

Сервис tinypng позволяет значительно сократить вес jpg и png файлов. Порой получается сэкономить до 90% от исходного веса файла.

Сжатие jpg и png графики: https://tinypng.com/

Сжатие svg графики

SVG — это векторный формат, который полностью описан через код и формулы. Но несмотря на это и его можно сжать, значительно сократив количество кода и выиграв в весе изображений. Сжатие SVG зачастую не дадут под сотни сэкономленных килобайт, как это может быть с jpg форматом, однако иногда это может быть полезно и позволит сократить вес svg файла на 20-30%.

Сжатие svg графики: https://vecta.io/nano

Использование webp и других современных форматов графики

webp может составить хорошую конкуренцию png и jpeg (зависит от метода сжатия jpeg) форматам, без особой потери качества. Если на вашем сайте много оформительской png графики, то можно рассмотреть её конвертацию в webp.

У webp есть один минус — он не поддерживается в Safari, поэтому нужно будет помещать его в тег picture и делать fallback до jpeg формата. На nginx серверах есть возможность настроить автоматическую отдачу webp формата тем браузерам которые его поддерживают, чтобы настроить это — обратитесь к вашему системному администратору.

Для ручной подготовки webp графики, можно воспользоваться сервисом squoosh.app чтобы оптимизировать графику не только в webp но и в более компактный, по сравнению с обычным, jpeg формат (например используя метод сжатия MozJPEG).

inline код для svg графики

Вставив svg графику через inline код в html разметку страницы, мы уменьшаем количество запросов к файлам. Меньше подключений файлов, означает меньше запросов, это напрямую влияет на скорость загрузки страницы. Делать inline вставку svg графики стоит аккуратно. Если подразумевается что эта графика будет редактироваться через CMS, то от inline способа стоит отказаться. Если это верстка элемента интерфейса, который не является изменяемым контентом через CMS — то inline способ будет подходящим решением.

Удаление лишнего CSS кода

Стоит позаботиться о том чтобы в CSS файле не было селекторов с стилями которые не используются в проекте. Тут нужно либо внимательно писать стили, не создавая селекторы которые не используются, либо проверять себя через сервисы которые помогут найти неиспользуемый CSS в проекте. Также посмотреть неиспользуемый CSS можно через DevTools в Chrome браузере. Используя Gulp сборку можно воспользоваться gulp-плагинами, которые налету будут удалять ненужный CSS код и он не будет попадать в итоговый CSS файл.

Сервисы по поиску неиспользуемого CSS:

Плагин для Gulp и не только: purge.css

Отключение sourcemaps в CSS и JS

Исходные карты полезный инструмент во время разработки. С помощью них мы понимаем где изначально описан тот или иной селектор или JS код. Но файлы sourcemaps порой весят больше чем сам CSS файл, поэтому при оптимизации скорости загрузки — от них стоит отказаться. Они нужны только при разработке и отладке, но не на продакшене.

Сжатие (минификация) CSS, JS, HTML кода

На CSS файлах можно сэкономить несколько десятков КБ, это конечно зависит от размеров проекта. Для этого в CSS стоит минифицировать. Это такое сжатие CSS кода, когда из него удаляются все символы которые можно удалить, при этом оставив файл работоспособным. К ним относятся пробелы, переносы строки, точки с запятой после последнего свойства в селекторе. Визуально такой файт становится нечитаемым, зато за счёт такой чистки — его вес может уменьшится на 30%

Также подобное сжатие можно проводить для HTML и JS кода. Такая операция позволит сократить вес проекта на несколько десятков килобайт.

Объединение CSS, JS файлов

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

Вынесение критической части CSS кода в inline

Если CSS файл имеет вес более 100Кб то можно вынести из него стили которые нужны для загрузки первого экрана страницы — который видит пользователь. Эти стили минифицуируются и размещаются inline кодом через тег style внутри тега head.

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

Здесь преследуется цель — отрисовать первый экран сайта как можно быстрее, счет идет на миллисекунды.

Отложенная загрузка для изображений

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

Отложенная загрузка для iframe

Карты Yandex и Google Maps, iframe блоки для видео с Youtube и другого контента. Если они не нужны мгновенно при открытии сайта, то стоит сделать для них отложенную загрузку.

Разделение на модули и отложенный запуск JavaScript кода

Если на проекте есть много JS кода, то возможно эффективным будет разделение кода на отдельные файлы, и отложенный запуск.

Например в проекте используется библиотека карусели, которая работает на библиотеке jQuery. Также на сайте есть скрипты для открытия навигационного меню и прочие небольшие интерактивные вещи написанные отдельными скриптами на нативном JS.

В нашем примере скрипты на чистом JS присутствуют уже в шапке сайта и на первом экране. А карусель которая требует jQuery находится в самом низу сайта, и чтобы до неё добраться нужно скроллить несколько экранов.

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

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

Включить кэширование ресурсов на стороне клиента

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

Для хостингов с использованием сервера Apache сделать это можно настройкой в файле .htaccess. Для оптимизации под Google Page Speed 1-го месяца кэширования порой недостаточно. Поэтому предлагаю ниже вариант файла .htaccess c установкой срока кэширования в 1 год.

Пример .htaccess файла с настройками для кэширования:

<ifModule mod_expires.c>

# Add correct content-type for fonts & SVG
AddType application/font-woff2 .woff2
AddType image/svg+xml .svg

ExpiresActive On
ExpiresDefault "access plus 12 month"

# Cache Images
ExpiresByType image/x-icon "access plus 12 month"
ExpiresByType image/jpeg "access plus 12 month"
ExpiresByType image/png "access plus 12 month"
ExpiresByType image/gif "access plus 12 month"
ExpiresByType image/svg+xml "access plus 12 month"

# Cache Fonts
ExpiresByType application/font-woff2 "access plus 12 month"
ExpiresByType image/svg+xml "access plus 12 month"

# Cache other content types (CSS, JS, HTML, XML)
ExpiresByType text/css "access plus 12 month"
ExpiresByType text/javascript "access plus 12 month"
ExpiresByType application/javascript "access plus 12 month"
ExpiresByType application/x-javascript "access plus 12 month"
ExpiresByType text/html "access plus 12 month"
ExpiresByType application/xhtml+xml "access plus 12 month"

</ifModule>

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml

</ifModule>

Статья по теме про настройку сайта через .htaccess, в том числе и про кэширование: https://habr.com/ru/post/154643/

gZip или другой способ сжатия данных сайта

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

Проверить включено ли на вашем сайт gZip сжатие можно на сервисе: gidnetwork.com/tools/

Если вы хотите узнать применяется ли вообще какая либо технология сжатия, то можно проверить сайт на сервисе: whatsmyip.org/http-compression-test/

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

Пример .htaccess файла с настройками для gZip сжатия:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Включить протокол HTTP/2

Для наших задач протокол HTTP/2 хорош тем что позволяет сразу передавать несколько файлов от сервера к клиенту, избегая длинных очередей. С HTTP/1 это было невозможным. Включив HTTP/2 вы сразу значительно ускорите загрузку сайта.

SSL сертификат

SSL сертификат необходим для сайта чтобы включить HTTP/2 протокол. Можно приобрести платный либо воспользоваться бесплатным Lets Encrypt SSL сертификатом.

Сервисы бесплатных SSL сертификатов:

Accessibility — доступность

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

Размеры для изображений

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

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

Чтобы такого не происходило стоит указать ширину изображений в тегах img через атрибуты width и height. Тогда браузер будет заранее резервировать место под них, и смещение контента не произойдет.

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

Атрибут aria-label для тегов button

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

Пример использования атрибута aria-label:

<button aria-label="Navigation" >
	Open navigation
</button>

Теги label c описанием элементов формы

Для скрин-ридеров необходимо добавлять теги label c описанием для каждого элемента формы. Даже если такой тег отсутствует по дизайну, его стоит разместить и скрыть через CSS.

Пример html:

<label for="searchInput">Поиск на сайте</label>
<input type="text" placeholder="Введите текст для поиска">

Стили для скрытия тег label:

.visually-hidden {
	width: 1px;
	height: 1px;
	position: absolute;
	left: -6000px;
}

Заключение

При оптимизации сайта под Google Page Speed и Lighthouse — стоит понимать что главным приоритетом должно оставаться удобство пользования сайтом и скорость его работы, а не нарисованные синтетические баллы.

Некоторые приемы оптимизации могут быть неудобны с точки зрения разработки при частом обновлении проекта.

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

В этой статье рассмотрены только аспекты HTML верстки. Если проект работает на CMS или фреймворке, то также стоит оптимизировать работу сервера и бэкенда.

Оптимизация сайта для Google: 6 актуальных правил

Самостоятельно продвинуть сайт в ТОП-3 очень сложно, поскольку этот процесс зависит от целого ряда факторов ранжирования, на которые надо обращать внимание. В настоящее время ключевыми из них являются:

Высокая скорость загрузки

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

Наличие мобильной версии

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

Внешняя ссылочная масса на качественных источниках

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

Защищенный протокол https

Статистика Mozcast указывает на то, что больше половины всех сайтов, индексируемых системой Google, работают с протоколом https. Поэтому современные требования к продвижению ресурсов в Гугл предполагают обязательное наличие защищенного соединения.

Релевантность сайта

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

Внутренняя перелинковка

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

Чего не нужно делать для продвижения сайта?

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

Основные ошибки при SEO-продвижении сайта в Google:

  • Перенасыщение контента ключевыми фразами. Когда поисковые системы использовали сравнительно «слабые» алгоритмы, у них прослеживалась зависимость ранжирования страницы от количества ключевых слов на ней. Сегодня они сильно ужесточились, поэтому система легко идентифицирует сайт с переизбытком ключевых слов. Это может стать причиной его плохого продвижения и даже попадания под фильтр, из-под которого чрезвычайно сложно выбраться.
  • Ссылки с плохих сайтов. Имеются в виду ресурсы, которые созданы исключительно для зарабатывания средств на размещении ссылочной массы. По этой причине на них находится очень много исходящих линков. Не стоит размещать свои ссылки на таких сайтах, поскольку это может сильно навредить.
  • Копирование страниц и контента. Стоит избегать дублирования страниц с других сайтов, поскольку это отрицательно влияет на ранжирование. Ни в коем случае не используйте копипаст (копирование контента без уникализации).
  • Скрытые ссылки и текст. Это черный метод, суть которого заключается в обозначении текста или ссылок тем же цветом, что и фон страницы. Это делает их невидимыми для посетителя, но поисковик легко находит их. Кроме того, к таким нечистым методам относится и применение нулевого шрифта. Подобные решения способны свести на нет все усилия, потраченные на продвижение сайта.

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

Все, что вам нужно, чтобы набрать 100/100 очков

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

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

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

  1. Что такое Google PageSpeed ​​Insights?
  2. Зачем заботиться о Google PageSpeed ​​Insights?
  3. Гарантирует ли рейтинг PageSpeed ​​Insights 100/100 высокую позицию в поисковой выдаче?
  4. Способы повышения производительности веб-сайта с помощью рекомендаций Google PageSpeed ​​Insights

Что такое Google PageSpeed ​​Insights?

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

Как видно на изображении ниже, после того, как вы вставите URL-адрес своего веб-сайта и нажмете кнопку « Анализ », инструмент предоставит оценку производительности вместе с несколькими рекомендациями по улучшению вашего веб-сайта.

PageSpeed ​​Insights

Он дает общую оценку из 100 на основе различных передовых методов оптимизации производительности и скорости.

Google PageSpeed ​​Insight

Самое приятное в этом инструменте то, что он бесплатен и помогает вам легко понять, что вам нужно исправить, а что нужно улучшить.

С конца 2018 года оценка PageSpeed ​​Insights рассчитывается и определяется автоматизированной платформой Google Lighthouse с открытым исходным кодом. Этот инструмент анализирует лабораторные данные веб-страницы и факторы, включая доступность, производительность, прогрессивные веб-приложения и т. д.

Зачем вам Google PageSpeed ​​Insights?

Как обсуждалось во введении, скорость вашего веб-сайта играет решающую роль в его ранжировании на более высокой позиции на странице результатов поисковой системы (SERP).

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

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

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

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

Гарантирует ли рейтинг PageSpeed ​​Insights 100/100 высокую позицию в поисковой выдаче?

Ответ: НЕТ !

Оценка, которую вы набираете в PageSpeed ​​Insights, действительно имеет некоторое влияние на SERP (страницу результатов поисковой системы). В какой-то степени Google использует оценку аналитики для определения рейтинга SERP.

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

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

Способы повышения производительности веб-сайта с помощью рекомендаций Google PageSpeed ​​Insights

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

1. Сократите CSS и JavaScript

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

Когда вы минимизируете CSS или JavaScript, он сжимает файл и избавляется от пробелов, дублирования и ненужных символов.

Эта минимизация также уменьшает размер файлов JavaScript и CSS, что, в свою очередь, увеличивает скорость загрузки вашего сайта.

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

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

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

Это можно сделать с помощью атрибута srcset

3. Реализовать кэширование в браузере

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

Он запоминает ресурсы и элементы (такие как изображения, заголовки, нижний колонтитул и т. д.) ранее загруженной страницы, поэтому страница не должна загружаться каждый раз, когда новый пользователь открывает веб-страницу.

W3 Total Cache — отличный инструмент, помогающий браузеру кэшировать сайты WordPress.

4. Избавьтесь от неиспользуемого CSS

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

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

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

5.Уменьшить время выполнения JavaScript

Время выполнения JavaScript является основным фактором, влияющим на работу основного потока.

Google PageSpeed ​​Insights оповещает ваш веб-сайт и рекомендует решить проблему или выдает предупреждение.

6. ​​Включить сжатие текста

Эта рекомендация Google PageSpeed ​​Insights относится к использованию сжатия GZIP .

В то время как сжатие текста включается на их сервере автоматически для некоторых веб-сайтов, это не относится к другим веб-сайтам.

В таких случаях вы можете рассмотреть следующие рекомендации:

  1. Установите плагин с функцией сжатия GZIP. Вы можете установить его из WP Rocket.
  2. Или вы можете сжать текст вручную, отредактировав файл .htsaccess. Однако вы должны помнить, что это решение немного рискованно, поэтому мы рекомендуем сделать последнюю резервную копию данных.

Такие инструменты, как GiftOfSpeed, также помогают проверить сжатие текста на сайте.

7. Минимизация HTML

Кодирование HTML занимает много места на вашем сайте.Сокращение этого пространства может значительно повысить производительность вашего веб-сайта и помочь ему получить хорошую оценку Google.

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

Минификация — это в основном процесс форматирования, исправления или сокращения кода и удаления неиспользуемого кода.

HTML Minify — это полезный инструмент, с помощью которого вы можете завершить процесс минимизации вашего веб-сайта.

8.Предотвращение перенаправления нескольких страниц

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

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

9. Уменьшить время ответа сервера

Время ответа сервера или TTFB (время до первого байта) — это время, необходимое браузеру вашего веб-сайта для получения первого байта данных с сервера вашего веб-сайта после выполнения запроса.Низкий TTFB предположительно полезен для общей производительности сайта.

Google PageSpeed ​​Insights выдает предупреждающее сообщение «Пройден аудит», если ваш веб-сайт достигает низкого показателя TTFB.

Добиться низкого TTFB можно с помощью следующих стратегий:

  1. Использование облегченных плагинов и тем
  2. Выбор качественного хостинг-провайдера
  3. Внедрение кэширования браузера
  4. Использование CDN (Content Delivery Network)
  5. Уменьшение количества установленных плагинов на вашем сайте
  6. Выбор подходящего провайдера DNS (сервера доменных имен)
10.Предотвращение использования чрезмерного размера DOM (объектной модели документа)

DOM или объектная модель документа отвечает за преобразование HTML-кодов в объекты. Это означает, что чем больше и больше DOM вашего веб-сайта, тем больше времени потребуется для его загрузки в браузере.

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

Тяжелая тема веб-сайта также способствует добавлению большого количества элементов DOM на ваш веб-сайт, что приводит к снижению скорости веб-сайта.

Таким образом, рекомендуется избегать использования тяжелого или чрезмерного размера DOM и переключаться на менее тяжелую тему веб-сайта.

Заключение

Google Page Speed ​​Insights — действительно очень полезный инструмент для повышения производительности вашего веб-сайта, но зацикливаться на оценке 100/100 — нежизнеспособное решение для этого.

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

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

Как улучшить свой результат

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

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

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

Введение в Google PageSpeed ​​Insights

У Google есть собственный тест скорости страницы под названием PageSpeed ​​Insights.Это помогает издателям измерять время загрузки своих веб-страниц на настольных и мобильных устройствах. Вы можете выявить узкие места и использовать эту информацию для оптимизации скорости загрузки страниц сайта. Начните с ввода любого URL-адреса и запустите тест.

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

Но здесь все немного сложнее. Многие рекомендации не будут иметь смысла для не-разработчиков. Но это нормально! Если вы используете CMS, такую ​​как WordPress, многие из этих рекомендаций можно реализовать без каких-либо знаний о кодировании (подробнее об этом позже).

Почему не стоит гнаться за результатом 100/100

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

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

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

Попробуйте выполнить тестирование с помощью других инструментов для повышения скорости страницы, таких как Pingdom, YSlow и GTMetrix. Эти инструменты также проверяют скорость загрузки сайта из разных мест. Вы заметите, что цифры из разных инструментов точно не совпадают, что показывает, насколько произвольными могут быть эти тесты.

Как Google использует PageSpeed ​​Insights

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

С 2018 года Google использует скорость мобильной страницы в качестве фактора ранжирования результатов поиска. В июне 2021 года Google обновил свой поисковый алгоритм, включив Core Web Vitals в качестве сигнала ранжирования для результатов на рабочем столе.Вы можете прочитать больше об обновлении CWV в нашем предыдущем сообщении в блоге.

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

Как улучшить показатель PageSpeed ​​

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

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

Как исправить: Если на веб-странице не так много JS или CSS, вы можете избавиться от этого предупреждения, встроив их, то есть включив код JS/CSS в файл HTML. Если вы используете WordPress, для этого вы можете использовать такой плагин, как Autoptimize. Встраивание работает только для очень маленьких сайтов. Для больших сайтов следует использовать атрибуты async и defer , чтобы скрипты не блокировали рендеринг.Оба этих атрибута указывают браузеру загружать скрипт в фоновом режиме, чтобы он не блокировал отрисовку веб-страницы. В то время как асинхронные сценарии будут выполняться, как только они закончат загрузку, отложенные сценарии будут соблюдать порядок документов. Наконец, чтобы уменьшить блокировку рендеринга пользовательских шрифтов, загружайте их локально, а не через CDN, например Google Fonts.

Оптимизация размера и доставки изображений

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

Как исправить: Очевидно, что лучшее время для оптимизации изображений — до их загрузки на веб-сайт. Это означает установление стандартов формата и максимального разрешения, которых придерживаются все пользователи сайта. Помимо предоставления изображений надлежащего размера, также важно предоставлять изображения следующего поколения, такие как WebP, JPEG 2000 или JPEG XR.Загружайте изображения ниже сгиба только тогда, когда они впервые попадают в окно просмотра пользователя (это также известно как ленивая загрузка). Наиболее часто используемые CMS, такие как WordPress, Drupal, Magento и т. д., предоставляют сторонние расширения и плагины для преобразования изображений в форматы следующего поколения, отложенной загрузки и массовой оптимизации.

Избегайте цепочки критических запросов

Что это значит: Это связано с концепцией критического пути отрисовки , который относится к последовательности шагов, которые браузер выполняет для преобразования JS, CSS и HTML в пиксели на экране.Критические цепочки запросов — это серия зависимых сетевых запросов, важных для рендеринга страницы. Длина цепочки и размер загрузки влияют на показатель PageSpeed.

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

Поддерживайте небольшое количество запросов и небольшие размеры передачи

Что это означает: Чем больше запросов браузеры должны сделать, чтобы загрузить ваш сайт, и чем больше размер каждого запроса, тем дольше будет загружаться ваш сайт. Подобно цепочке критических запросов, Google не присваивает этому тесту оценку «пройдено» или «не пройдено», но предоставляет подсчет общего количества сгенерированных запросов и связанных с ними размеров загрузки.

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

Уменьшить неиспользуемый JavaScript и CSS

Что это значит: Доставка неиспользуемого кода — распространенная проблема в веб-разработке. Допустим, вам нужно добавить панель навигации на свой сайт из библиотеки Bootstrap, поэтому вы добавляете ссылку на таблицу стилей Bootstrap в свой HTML. Однако таблица стилей содержит не только панель навигации, но и все компоненты Bootstrap. Весь этот неиспользуемый код способствует задержке страницы.

Как исправить: Издателям, использующим WordPress, следует подумать об уменьшении количества подключаемых модулей, которые добавляют посторонний код JS/CSS на веб-страницы.Вы можете использовать покрытие кода в Chrome DevTools, чтобы определить URL проблемных скриптов или таблиц стилей. Остерегайтесь компонентов темы или плагинов, которые имеют много красного цвета в коде. Также рассмотрите минимизацию вашего кода JS, CSS и HTML — процесс удаления синтаксиса и дополнительного пространства для сжатия кода, чтобы еще больше сократить время загрузки и использование полосы пропускания. Вы можете использовать Autoptimize или WP Rocket для автоматической минимизации кода в WordPress. Издатели, использующие другую CMS или специально созданный веб-сайт, могут использовать сторонний JavaScript Minifier и CSS Minifier для минимизации своего кода вручную.

Как улучшить показатель Google PageSpeed ​​в WordPress

WordPress — самая популярная система управления контентом (CMS), используемая для создания веб-сайтов. Помимо простых в создании тем для создания красивых веб-сайтов, они предлагают множество плагинов WordPress, которые помогают владельцам веб-сайтов повысить скорость своего сайта.

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

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

Конечно, это еще не все

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

Как повысить показатель скорости страницы в Google 🚀

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

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

  • Почему скорость страницы имеет значение
  • Как использовать PageSpeed ​​Insights
  • Как повысить скорость страницы Google
  • И многое другое

Если вам нужна помощь в ускорении работы вашего веб-сайта, WebFX предлагает услуги по оптимизации скорости страницы, которые могут улучшить ваш пользовательский опыт, а также оценку Google PageSpeed ​​Insights.Свяжитесь с нами онлайн или позвоните нам по телефону  888-601-5359  , чтобы узнать больше сегодня!

Почему скорость страницы имеет значение?

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

1. Пользователи ненавидят страницы с медленной загрузкой

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

 

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

 

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

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

2. Пользователи проводят меньше времени на вашей странице, если она работает медленно

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

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

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

3. Это влияет на ваш коэффициент конверсии

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

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

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

В среднем увеличение скорости страницы на одну секунду повышает коэффициент конверсии на семь процентов.Если вы зарабатываете 100 долларов в день, вы упускаете 2555 долларов в год из-за того, что ваша страница работает на секунду медленнее.

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

4. Это влияет на ваш рейтинг SEO

Если вы используете поисковую оптимизацию (SEO), скорость страницы является ключевым элементом.Google признает, что скорость страницы является важным элементом для пользователей, и начал двигаться к тому, чтобы сделать скорость страницы главным фактором для пользователей SEO.

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

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

5. Это влияет на показатель качества

Вы проводите кампанию с оплатой за клик (PPC)? Если это так, скорость вашей страницы повлияет на показатель качества вашего объявления.

Когда вы создаете кампанию PPC, ваша максимальная ставка и показатель качества определяют место размещения вашей рекламы. Если ваш показатель качества снизится, это снизит позицию вашего объявления и потенциально увеличит цену за клик (CPC).

 

«Медленные страницы могут снизить показатели качества объявлений, что может привести к увеличению цены за клик и снижению показателей конверсии.”

 

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

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

6.Это первое впечатление пользователей о вашем бизнесе

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

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

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

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

Что такое Google PageSpeed ​​Insights?

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

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

Как использовать Google PageSpeed ​​Insights

При первом входе в PageSpeed ​​Insights вы увидите строку, на которой вы можете ввести URL своего веб-сайта. Вы хотите ввести URL-адрес своей домашней страницы в эту строку и нажать «Анализ». Google займет несколько секунд, чтобы просканировать ваш сайт.

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

Внутри системы показателей Google PageSpeed ​​Insights

Когда вы перейдете на экран результатов Google PageSpeed ​​Insights, вы увидите две оценки.

Один рейтинг скорости вашей страницы, а другой рейтинг оптимизации.

Рейтинг скорости страницы

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

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

В зависимости от скорости вашей страницы вы увидите два разных числа:

  • First Contentful Paint (FCP) : FCP измеряет, сколько времени требуется пользователям, чтобы увидеть визуальный отклик с вашей страницы. На приведенном выше примере фотографии пользователи видят ответ на контент через одну секунду.
  • DOM Content Loaded (DCL) : DCL измеряет загрузку HTML-документов.Вам нужно, чтобы это число было небольшим (например, 1,2 секунды на фото из примера), так как это приводит к снижению показателя отказов. Как мы обсуждали ранее, более низкий показатель отказов является признаком сохранения ваших потенциальных клиентов и повысит ваш SEO-рейтинг на страницах результатов поисковых систем.
Показатель оптимизации

Далее вам нужно посмотреть на свой показатель оптимизации. Эта оценка оценивается из 100.

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

Оценка оптимизации в основном касается двух областей:

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

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

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

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

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

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

7 советов по улучшению оценки PageSpeed ​​Insights

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

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

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

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

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

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

2. Уменьшите количество и размер больших файлов

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

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

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

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

ПРОВЕРКА СКОРОСТИ СТРАНИЦЫ SEO: ОГРОМНАЯ ЦЕННОСТЬ ТЕСТА СКОРОСТИ СТРАНИЦЫ

3. Сократите CSS, JavaScript и HTML

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

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

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

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

4.Уменьшить количество переадресаций

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

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

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

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

5. Используйте кэширование браузера

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

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

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

6. ​​Используйте сеть распространения контента (CDN)

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

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

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

Сравнение PageSpeed ​​Insights и служб скорости страницы

PageSpeed ​​Insights — это отличный инструмент, который поможет вашему бизнесу повысить скорость вашего сайта. Это дает вам возможность выявить проблемы и внести изменения.

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

Так какая разница?

 

«PageSpeed ​​Insights требует внесения рекомендуемых изменений. Службы ускорения загрузки страниц вносят изменения за вас».

 

При использовании PageSpeed ​​Insights вам необходимо вносить изменения самостоятельно. Предложения предоставлены Google, но вы должны внести изменения самостоятельно.

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

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

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

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

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

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

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

Начните повышать скорость своей страницы Google уже сегодня

Если вы готовы начать повышать скорость своей страницы Google, чтобы получать больше потенциальных клиентов и конверсий, мы здесь, чтобы помочь. Свяжитесь с нами через Интернет или позвоните нам сегодня по телефону 888-601-5359, чтобы поговорить со специалистом по стратегии о вашем индивидуальном плане оптимизации скорости страницы.

Мы будем рады помочь вашему бизнесу расти!

Улучшите свой показатель Google PageSpeed ​​Insights для изображений

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

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

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

И если этого недостаточно, согласно Google, существует прямая связь между коэффициентами конверсии и временем загрузки страницы.

Скорость имеет значение.

Что такое Google PageSpeed ​​Insight?

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

Предоставляет ли PageSpeed ​​отчеты для изображений?

Да.
Google PageSpeed ​​создает отчет для всей страницы. А поскольку изображения являются частью страницы, они также включаются в отчет. И теперь, с использованием Lighthouse, он дает несколько звездных предложений по улучшению ресурсов, связанных с изображениями, на вашем веб-сайте.

Источник — Google Lighthouse

Но почему изображения?

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

Скачать шпаргалку

О каких проблемах с изображениями сообщает Google?

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

1. Предоставление изображений в форматах нового поколения

WebP, AVIF, JPEG2000 и JPEG XR — это современные форматы изображений, поддерживаемые браузером, обеспечивающие лучшее сжатие и визуальное качество по сравнению со старыми форматами JPG и PNG. Более высокое сжатие при сохранении визуального качества означает, что ваши изображения потребляют меньше данных по сети и загружаются быстрее.

Среди этих форматов наибольшее распространение получил WebP.Поскольку Firefox также принял его, теперь он поддерживается более чем на 80% устройств.

Тем не менее, как JPEG2000, так и JPEG XR не догнали поддержку браузеров с 13% и 4% соответственно. JPEG2000 поддерживается в Safari, тогда как JPEG XR поддерживается в браузерах IE. С такими низкими показателями внедрения вы можете полностью пропустить их, чтобы сэкономить усилия. Инструмент Google PageSpeed ​​также не сообщает о случаях, когда JPEG2000 и JPEG XR не используются.

Как это сделать?
ImageKit можно использовать для автоматической доставки изображений в правильном формате.Он поддерживает преобразование в форматы изображений следующего поколения, такие как AVIF и WebP.

Узнайте больше о том, как ImageKit может отображать изображения в формате AVIF по тому же URL-адресу изображения, без необходимости что-либо менять в серверной части.

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

2. Правильный размер изображений

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

Изображение, выбранное с помощью цифровой зеркальной камеры, может иметь размер более 5000 × 3000 пикселей, а это не то, что вам нужно на вашем веб-сайте.

Предположим, вам нужно это изображение на трех разных страницах вашего веб-сайта, каждая из которых имеет разный размер —

  • Страница сведений о продукте — 1000×1000 пикселей.
  • Страница со списком товаров — 400×400 пикселей.
  • Главная страница сайта — 100×100px.

Итак, вы должны изменить размер и обрезать исходное изображение размером около 5000×3000 пикселей до трех указанных выше размеров.

Как это сделать?
Для этого лучше всего использовать решение для изменения размера изображения в реальном времени, такое как ImageKit, которое позволяет изменять размер и обрезать изображение до любого размера с помощью параметров URL. Это имеет два преимущества:

  • Вам не нужно изменять размер вручную или писать какой-либо собственный код для этого.
  • Решение в режиме реального времени позволяет быстро адаптировать изображения к изменениям в макетах.

Например, исходное изображение имеет размер 1280×853 пикселей.

  https://ik.imagekit.io/ikmedia/woman.jpg  
Исходное изображение 1280×853

Чтобы получить изображение шириной 200 пикселей, используйте tr=w-200 параметр запроса

  https://ik. imagekit.io/ikmedia/woman.jpg?tr=w-200  
Широкое изображение 200 пикселей

Чтобы изменить размер изображения до ширины 400 и высоты 200, вы можете использовать tr=w-400,h-200

  https: //ik.imagekit.io/ikmedia/woman.jpg?tr=w-400,h-200  
400×200 изображение

Если у вас есть адаптивный веб-сайт и вам интересно, как загрузить изображение правильного размера на разных устройствах , то вам следует рассмотреть возможность реализации атрибутов srcset и size тега img вместо простого тега src.Эти новые атрибуты позволяют предоставить браузеру список URL-адресов изображений и их размеры. Затем браузер автоматически загружает наиболее подходящий ресурс изображения из доступного списка на основе фактической ширины устройства.

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

3. Эффективное кодирование изображений

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

Обычно уровни сжатия определяются по шкале от 1 до 100, где 100 соответствует наилучшему качеству (или минимальному сжатию). Lighthouse, который используется в Google PageSpeed, тестирует изображение на уровне сжатия 85.

Обычно безопасно предоставлять изображения с уровнем качества от 75 до 90. На этих уровнях компромисс между размером изображения и качеством изображения является приемлемым, и визуальное ухудшение будет незаметным для человеческого глаза. Регулировка уровня сжатия может значительно уменьшить размер изображения, что позволит ускорить загрузку.

Как это сделать?
ImageKit обеспечивает сжатие в реальном времени непосредственно из URL-адреса.

Например, вы можете установить качество изображения 20.

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=q-20  

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

В ImageKit вы можете установить уровень качества по умолчанию для каждого изображения прямо с панели инструментов.

4. Отложите закадровые изображения

В наши дни длинные веб-страницы часто растягиваются на несколько прокруток.Типичная страница со списком продуктов электронной коммерции содержит сотни продуктов на одной странице, каждый из которых имеет одно или два собственных изображения. Это означает, что страница может загрузить от 100 до 200 изображений, что примерно соответствует более 1 МБ изображений на странице.

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

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

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

Помимо того, что упомянуто в связанном руководстве выше, современные браузеры также намерены поддерживать ленивую загрузку изображений с использованием атрибута «загрузка». Это, вероятно, будет доступно, начиная с Chrome 76 для настольных устройств. Пока это не выйдет, методы Javascript, упомянутые в руководстве, будут хорошо работать в разных браузерах.

5. Обслуживайте статические ресурсы с помощью эффективной политики кэширования

Самый быстрый способ загрузить ресурс — использовать кэш браузера и избежать двустороннего обмена данными по сети.

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

Вы можете установить время кэширования любого ресурса с помощью заголовка Cache-Control. Вы можете прочитать больше об этом здесь.

Изображения должны храниться в кэше в течение длительного периода времени (обычно год или более). Тем не менее, после проб и испытаний с разным временем кэширования PageSpeed ​​Insights ищет время кэширования не менее 180 дней для этого конкретного предупреждения. Это предупреждение появится для ресурсов со временем кэширования менее 180 дней.

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

Заголовки управления кешем

ЗАКЛЮЧИТЕЛЬНЫЕ МЫСЛИ

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

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

Как набрать 100 баллов в Google PageSpeed ​​Insights

Оптимизированные веб-сайты получают хорошие оценки по сотням факторов ранжирования Google.

В результате они занимают более высокое место и всегда имеют конкурентное преимущество.

Одним из факторов, который Google использует для определения рейтинга веб-сайта, является скорость загрузки веб-сайта.

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

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

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

Кто бы не хотел, чтобы оценка Google PageSpeed ​​Insights выглядела так?

Чем ближе к 100% заработок веб-сайта, тем больше вероятность того, что Google отдаст предпочтение веб-сайту в рейтинге результатов поиска.

Важность времени загрузки веб-страницы

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

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

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

  • Быстрая загрузка
  • Высокий уровень оптимизации
  • Мало случаев, когда зрители покидают веб-сайт до завершения его загрузки

Нетерпеливые пользователи могут покинуть веб-сайт, который не загружается в течение 400 миллисекунд. И 1 из 4 пользователей покинет веб-сайт, который не загружается в течение 4 секунд, при этом 46% пользователей отказываются повторно посещать веб-сайт, который они считают медленно загружаемым.

Согласно последним отчетам Google, среднее время загрузки большинства бизнес-сайтов составляет от 7,9 до 11,3 секунд. Это оставляет важные возможности для конкурентов, которые могут оптимизировать свои веб-сайты и перенаправлять потенциальных клиентов на свои веб-сайты с превосходной производительностью.

Определение того, как Google измеряет скорость загрузки вашего веб-сайта

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

  1. Скопируйте и вставьте (или введите вручную) URL своего веб-сайта в инструмент Google PageSpeed ​​Insights.
  2. Нажмите «Анализ», чтобы Google провел быструю проверку вашего сайта.
  3. В отчете, который генерирует Google, будет указан процент, указывающий уровень оптимизации. Если процент не равен 100%, Google укажет, какие части веб-сайта необходимо оптимизировать, чтобы достичь 100%.

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

Обязательно проверьте, как работает мобильная версия вашего сайта. Редко веб-сайт будет отображаться одинаково на мобильном устройстве и на настольном компьютере или ноутбуке, поэтому сканирование каждого формата жизненно важно для достижения 100% оптимизации.

  1. Введите URL своего веб-сайта в Test My Site и нажмите Enter.
  2. В созданном отчете будут указаны проблемы, которые необходимо исправить для повышения эффективности мобильного сайта.

Как достичь 100% оптимизации

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

1. Уменьшите размер изображений вашего веб-сайта

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

Для новичков мы рекомендуем WP Smush Image Compression and Optimization. WP Smush можно использовать бесплатно, и он имеет множество привлекательных функций, которые могут сделать уменьшение размера изображения простым и быстрым:

  • Автоматическое обнаружение изображений, которые являются кандидатами на уменьшение
  • Автоматическое уменьшение изображений при загрузке
  • Массовая загрузка изображений
  • Сокращение до 50 файлов за раз

Crush.pics — это альтернативный инструмент для пользователей Shopify.Compress JPEG и Optimizilla — это два из нескольких бесплатных онлайн-инструментов, которые выполняют услуги по уменьшению изображений. В крайнем случае пользователи Windows с ограниченными ресурсами могут открыть Microsoft Paint и использовать функцию изменения размера, чтобы уменьшить размер изображения в процентах.

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

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

HTML-кодировщики должны учитывать, что уменьшение изображения путем определения переменных высоты и ширины в теге IMG не меняет размер изображения. Уменьшение изображения также вызовет предупреждения, касающиеся минимизации HTML (что будет рассмотрено в третьей задаче оптимизации).

2. Поймите, как работают запросы и кэширование, а затем примените эти принципы для повышения скорости загрузки

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

Разработчикам WordPress следует загрузить приложение W3 Total Cache.

Инструмент также помогает минимизировать HTML, JavaScript и CSS.

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

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

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

Что касается получения ресурсов, чрезмерное количество подключаемых модулей на вашем веб-сайте может замедлить время загрузки до сканирования. Даже простой на вид плагин, такой как кнопка Google+, может увеличить время загрузки на две секунды. Обратите внимание, однако, что один плагин, выполняющий несколько сложных операций, может иметь худшее время загрузки, чем несколько небольших плагинов, выполняющих одну задачу. Если вы сомневаетесь, ищите причины для удаления плагинов.Общее эмпирическое правило заключается в том, чтобы ограничить вашу веб-страницу 10 или менее небольшими, простыми, однофункциональными плагинами.

3. Максимально уменьшите код.

«Оптимизация кода» — это простой способ описания минимизации. Минимизированный код удаляет функциональную избыточность и пробелы, чтобы уменьшить размер файла кода.

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

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

  • Удаление всех комментариев
  • Максимальное удаление форматирования (например, вложенных тегов с отступом) без ущерба для функциональности кода
  • Удаление всего неиспользуемого кода
  • Сокращение имен переменных
  • Сокращение имен функций

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

Многие веб-хостинги также позволяют «минимизировать» целые файлы кода. Используя инструмент сжатия, такой как GZip, вы можете уменьшить размер файлов кода, таких как файлы HTML и CSS, а затем загрузить заархивированный файл на хост. Вам нужно будет согласовать с веб-хостом, чтобы хост мог читать сжатый код, но это может снизить скорость загрузки веб-страницы, когда файлы кода больше 150 байт.Обратите внимание, однако, что не рекомендуется пытаться сжимать файлы изображений с помощью программного обеспечения для сжатия файлов; продолжайте использовать инструменты для уменьшения изображений в форматах GIF, JPG, PNG и подобных файлах изображений.

4. Понимать и применять протоколы AMP

 AMP – это сокращение от Accelerated Mobile Pages.

Целью AMP является оптимизация кода, которая особенно повышает производительность на мобильных устройствах. Акцент делается на удалении или сокращении количества элементов, которые либо полностью несовместимы с мобильными устройствами, либо более громоздки на мобильном устройстве, чем на ноутбуке или настольном компьютере.Google отдает приоритет AMP-оптимизированным мобильным сайтам, обозначая их как «Главные новости».

Онлайн-руководство по AMP

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

Плагины

WordPress, такие как AMP для WP, являются альтернативой для пользователей, не разбирающихся в технологиях.

Заключение

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

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

  1. Используйте инструмент Google PageSpeed ​​Insights, чтобы определить текущую производительность вашего веб-сайта и предлагаемые шаги для улучшения оценки вашего веб-сайта в последующих тестах скорости.
  2. Сжимайте и оптимизируйте изображения на своем веб-сайте, используя комбинацию правильного формата файла изображения и инструментов, которые сжимают или уменьшают размер файла без существенного влияния на качество изображения.
  3. Используйте подключаемый модуль для использования кэширования браузера. Кроме того, веб-администраторы, разбирающиеся в коде, могут вносить изменения как в веб-сайт, так и в веб-хост для дальнейшего расширения возможностей кэширования.
  4. Сократите код. Меньший размер файла кода приводит к более короткому времени загрузки. Торговля удобочитаемостью или стандартами для лучшего ранжирования результатов поиска может быть хорошим компромиссом, особенно при сохранении «стандартной» автономной резервной копии файлов кода.
  5. Нет ничего плохого в том, чтобы больше узнать о коде и механизмах, связанных с веб-страницами, поскольку такие знания могут заполнить пробелы, оставленные приложениями и инструментами. Знание того, что делать — и чего не делать — позволяет вам выполнять небольшие, точечные корректировки, которые могут быть быстрее и точнее, чем машинные модификации.
  6. Улучшайте и расставляйте приоритеты для мобильных веб-сайтов, применяя протоколы AMP. Если вы сомневаетесь, сосредоточьтесь больше на производительности и функциональности, а не на улучшениях и «гламуре». Пометка вашего веб-сайта Google как оптимизированного для AMP может значительно увеличить ваш веб-трафик.

Работайте с нами

Мы гарантируем 90+ в Google PageSpeed ​​Insights! Если вам нужна помощь в ускорении медленного WordPress, Shopify или любой другой CMS веб-сайта, свяжитесь с нами!

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

PageSpeed ​​Insights Optimization — доверенные эксперты по оптимизации

1 — Критический путь рендеринга

 

Google определяет его как «код и ресурсы, необходимые для отображения начального вида веб-страницы».Много не понял? Давайте разберем это предложение слово за словом!

 

— Критично / Совершенно необходимо

 

— Render/Show (Когда страница рендерится, это означает, что она отображается)

 

— Путь / Точная цепочка событий, которые должны быть выполнены для отображения веб-страницы в вашем браузере

 

— начальный вид / часть веб-сайта, которая видна пользователю без прокрутки. Также называется «над сгибом»

 

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

 

2 — Время ответа сервера

 

Для получения времени ответа сервера рассчитываются два действия:

 

Когда веб-браузер делает запрос с вашего сервера

И когда сервер отвечает на этот запрос

 

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

 

3 — Кэширование в браузере

 

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

 

То же самое относится и к браузерам. Если вы правильно используете кеширование браузера, ваша скорость PageSpeed ​​возрастает, поскольку браузеры «запоминают» элементы вашего веб-сайта.

 

4 — Свести к минимуму перенаправления

 

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

 

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

 

Хорошая служба оптимизации PageSpeed ​​Insights способна очистить все используемые вами перенаправления и оставить только те, которые вам действительно нужны!

 

5 — Оптимизация изображения

 

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

 

Поэтому важно использовать правильные размеры для ваших изображений и ВСЕГДА их сжимать. Наша служба оптимизации PageSpeed ​​Insights включает в себя оптимизацию изображений, которая поможет вам повысить скорость вашего веб-сайта для получения быстрых и заметных результатов.

 

Это не дополнительная услуга. Если вы хотите ранжироваться, оптимизация PageSpeed ​​— это, возможно, самый важный шаг, который вы должны предпринять, поскольку от него будет зависеть большинство других показателей.

 

Эксперт по оптимизации Google PageSpeed. Мы вас найдем 95+/100

Core Web Vitals

🟢 1,7 с Первая отрисовка с содержанием
🟢 1,9 с Индекс скорости
🟢 1,8 с Самая большая отрисовка с содержанием

🟢 1.8 с Время до начала взаимодействия
🟢 10 мс Общее время блокировки
🟢 0 Совокупный сдвиг макета

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

Здесь, в Planet Marketing, мы не преувеличиваем и не преувеличиваем наши услуги. Мы работаем только с компаниями, которые соответствуют этим критериям, когда речь идет о Google PageSpeed ​​Insights.

  • ТОЛЬКО WordPress
  • Нормально с доставкой в ​​течение 3-6 недель
  • Пользовательское программирование не включено
  • В зависимости от количества плагинов WordPress вашему сайту может потребоваться поддомен
  • Не просите ничего, что выходит за рамки проект, как создание новых страниц, чтобы мы могли закончить вовремя.
  • Полный доступ к Диспетчеру тегов Google (для Google Analytics, Facebook Pixel или других скриптов)
  • Желание перейти в профессиональную веб-хостинговую компанию на Google Cloud Platform или AWS (с промежуточным сайтом).Мы НЕ работаем с мусорными серверами GoDaddy!
  • В вашем штате есть человек, готовый помочь с изображениями, тестированием, вводом данных и т. д. мы не хотим слышать его советы 🙂

Цены на оптимизацию Google PageSpeed ​​Insights

Google PageSpeed ​​Optimization


План Lite

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

Оптимизация Google PageSpeed ​​


Стандартный план

Стандартный план предназначен для сайтов, использующих формы подписки, WooCommerce, LMS (система управления обучением), такие как Learndash, AffiliateWP и т. д. Эти программы значительно замедляют работу веб-сайта.

Оптимизация Google PageSpeed ​​


Расширенный план

Расширенный план предназначен для компаний, которые использовали конструктор страниц, такой как Elementor, Thrive Architect, Beaver Builder, Divi, WPBakery и т.

Leave a Reply