Скорость загрузки сайта – это огромная часть впечатления пользователя от вашего блога. Вот почему наличие быстрого сайта является залогом успеха, если вы собираетесь начать вести блог. Вводим: это руководство по оптимизации Google PageSpeed от моего друга и талантливого разработчика Энди Фелисиотти. Google также ранжирует сайты по скорости их работы, используя показатель PageSpeed. Нелегко добиться того, чтобы ваш сайт набрал 100 баллов по тесту Google PageSpeed. Но я здесь, чтобы помочь! Независимо от того, блог у вас или сайт электронной коммерции, мы рассмотрим шаг за шагом, как довести ваш Google PageSpeed до 100 баллов.
Что такое Google PageSpeed?
Скорость страницы – это время, которое требуется содержимому вашего сайта, чтобы попасть в браузер пользователя. Это очень важно, поскольку пользователи, посещающие ваш сайт, не хотят ждать вашего контента. Вам знакомо это чувство: вы находите ответ на свой вопрос в Google, переходите по ссылке и в итоге сдаетесь, когда страница так и не загружается. Google тоже это знает, поэтому скорость работы сайта является одним из основных факторов ранжирования. Самым популярным инструментом для проверки скорости сайта является инструмент Google PageSpeed Insights. Это лучший способ узнать, что именно Google думает о вашем сайте с точки зрения скорости страницы.
Примечательные метрики Google PageSpeed:
- Крупнейший контентный рисунок (LCP): Измерение воспринимаемой пользователями скорости загрузки страницы. В первую очередь, когда заканчивается загрузка контента, расположенного выше сгиба.
- Задержка первого входа (FID): Измерение в секундах задержки до того момента, когда пользователь сможет взаимодействовать с веб-сайтом.
- Кумулятивный сдвиг макета (CLS): Измерение в секундах до тех пор, пока макет страницы не перестанет “смещаться”. Например, загрузка изображения может вызвать смещение макета на вашем сайте. Это важно, поскольку пользователь может захотеть нажать на какой-либо элемент на вашем сайте до того, как он закончит загрузку, а сдвиг может заставить его нажать на что-то другое.
- First Contentful Paint (FCP): Измерение времени, когда что-либо отображается на экране.
- Interaction to Next Paint (INP): Interaction to Next Paint наблюдает за задержками при взаимодействии пользователя со страницей. Например, если пользователь нажимает на аккордеон и происходит неожиданная задержка при его открытии.
- Время до первого байта (TTFB): Измерение времени до получения браузером ответа от сервера.
Вы увидите, что эти термины часто используются в Google Search Console (отчет Core Web Vitals), PageSpeed Insights и Chrome User Experience Report.
Почему скорость страницы имеет значение?
Скорость страницы важна, потому что она напрямую влияет на количество трафика и денег, которые может заработать ваш блог. Исследования показали, что скорость сайта напрямую влияет на коэффициент конверсии. Данные Portent показывают, что если скорость загрузки страницы составляет 1 секунду против 5 секунд, то конверсия снизится почти на 50%. Время загрузки сайта влияет не только на рейтинг Google, но и на коэффициент конверсии.
Время загрузки страницы вашего сайта влияет на все аспекты пользовательского опыта – от вашего положения в результатах поиска Google до терпения клиентов. Поскольку пользователи в основном пользуются мобильными устройствами, каждый килобайт, загружаемый вашим сайтом, должен быть продуманным. Чем дольше пользователю приходится сидеть и ждать загрузки страницы, тем выше будет показатель отказов. Скорость вашего сайта влияет не только на SERP Google, большинство поисковых систем учитывают скорость загрузки страниц. Вот почему в современном Интернете очень важно иметь сайт, который быстро загружается. К счастью, сделать быстрый сайт не так уж сложно, если вы используете современные инструменты и знаете, что делать.
Как проверить скорость вашего сайта
Если вы не знакомы с Google PageSpeed, это серия тестов, которые Google проводит на вашем сайте, чтобы определить, насколько быстро загружается ваш сайт. Когда пользователь Google нажимает на результат поиска, он ожидает, что тот будет загружаться быстро. Именно поэтому Google создал тест Google PageSpeed Insights. Он дает владельцам сайтов инструменты, позволяющие точно знать, что именно замедляет работу их сайта и как это исправить. Кроме того, это дает Google данные для правильного ранжирования сайта в алгоритме поисковой системы.
Пользоваться инструментом очень просто – достаточно ввести URL вашего сайта и нажать кнопку “Анализ”. Тест будет проведен быстро, и вы получите множество ключевых показателей. Кроме того, если вы хотите провести локальное тестирование, вы можете использовать Lighthouse от Google с открытым исходным кодом для получения аналогичных результатов прямо в браузере. Еще одно место, где можно посмотреть производительность сайта, – это отчет Google Analytics о тайминге страниц. Скорее всего, вам не понадобится исправлять все, о чем пойдет речь в этой статье, но я рассмотрю наиболее распространенные проблемы PageSpeed и способы их устранения.
Лучшие практики PageSpeed: Распространенные проблемы Google PageSpeed и способы их устранения
Большая часть советов в этом разделе предполагает, что у вас есть блог WordPress. Я также включил более подробные инструкции для разработчиков по устранению проблем вручную. Самым лучшим способом улучшить скорость загрузки сайта WordPress, который я нашел, является использование WP-Rocket. WP-Rocket – это платный плагин, но он того стоит, поскольку в нем реализованы многие из лучших практик производительности прямо из коробки. Для устранения большинства проблем со скоростью страницы я выделю, если WP-Rocket может помочь, и дам бесплатную альтернативу, если таковая имеется. Ваша тема WordPress также играет огромную роль в основных показателях сайта.
Ускорение времени отклика сервера
Быстрое время отклика сервера необходимо для отличного показателя Google PageSpeed. По сути, время отклика сервера – это то, сколько времени требуется серверу вашего сайта, чтобы создать веб-страницу для пользователя. Это одна из самых простых проблем, которую можно решить, если вы видите предупреждение в отчете PageSpeed. Наиболее распространенным способом устранения этой проблемы является использование кэширования страниц. Это означает, что ваш сайт будет обслуживать веб-страницу из кэша, так что серверу практически не придется работать.
- Включите кэширование страниц: Когда пользователь запрашивает страницу с вашего сайта, она должна быть отрисована и обработана. Этот процесс можно полностью пропустить с помощью кэширования страниц. По сути, когда пользователь посещает страницу на вашем сайте, она сохраняется для следующего пользователя в кэше, чтобы к ней можно было мгновенно вернуться. Многие хостинг-компании WordPress имеют встроенное кэширование страниц, но если вы наблюдаете высокое время отклика сервера, скорее всего, оно не включено. Лучшие решения для кэширования страниц WordPress включают WP-Rocket, W3 Total Cache и Cache Enabler. Другим популярным вариантом кэширования страниц является использование CloudFlare’s Automatic Platform Optimization for WordPress. При этом используется технология CloudFlare
- Используйте современный стек: Версия PHP и MySQL, которую использует ваш хостинг, играет огромную роль в скорости работы страницы. Высококачественные хостинговые компании должны позаботиться об этом. Если вы разработчик, это означает, что вы должны быть в курсе последних версий PHP и баз данных.
Включить сжатие
Ваш сайт может сжимать содержимое и размер страницы перед отправкой в браузер пользователя с помощью сжатия Brotli (более новая версия, поддерживается Chrome) или GZIP. Эти методы сжатия не влияют на отображение вашего сайта, поскольку браузеры пользователей автоматически обрабатывают сжатый контент. Большинство популярных хостинг-компаний WordPress автоматически применяют сжатие для вас. Если вы хотите убедиться, что метод сжатия включен на вашем сайте, вы можете воспользоваться онлайн-тестом сжатия GZIP. Популярные плагины WordPress для повышения производительности автоматически применяют GZIP-сжатие, включая WP-Rocket, WP Super Cache (должен быть включен в настройках) и W3 Total Cache (должен быть включен в настройках). WP-Rocket автоматически применит GZIP-сжатие на вашем сайте, если вы используете Apache без каких-либо настроек.
Для разработчиков: Чтобы включить Brotli или GZIP-сжатие на вашем сервере, вам нужно знать, используете ли вы Apache или Nginx. Вот руководство по включению Brotli на Apache и руководство по включению Brotli на Nginx. Вместо того чтобы разбираться с конфигурацией сервера, я бы рекомендовал использовать CloudFlare. CloudFlare бесплатно применяет сжатие GZIP и Brotli в зависимости от того, что поддерживает браузер пользователя и какой контент обслуживается автоматически.
Минимизация CSS, HTML и JavaScript
HTML, CSS и JavaScript – все они влияют на скорость загрузки страницы. При написании кода большинство разработчиков включают табуляцию, пробелы и другие несущественные символы, чтобы сделать его удобочитаемым. Все эти неиспользуемые символы накапливаются и могут слегка замедлить работу сайта. К счастью, все эти активы могут быть легко минимизированы без ущерба для удобства пользователей. WP-Rocket предлагает страницу оптимизации файлов с опциями минификации для CSS и JavaScript. Кроме того, если в WP-Rocket включено кэширование страниц, минификация HTML будет применена к страницам. Бесплатным вариантом является использование плагина Autoptimize для минификации CSS/JS/HTML. Имейте в виду, что при минификации JavaScript могут возникнуть проблемы с функциональностью, поэтому обязательно протестируйте его при включении.
Для разработчиков: Существует множество инструментов для разработчиков, которые позволяют им сжимать файлы во время рабочего процесса. Пакеты Node.js, такие как Clean CSS, могут быть добавлены в рабочий процесс для сжатия минифицированных файлов во время работы над ними. Кроме того, для небольших проектов существует множество онлайн-инструментов, которые сжимают CSS, JS и даже HTML. Если вы используете WordPress, то, скорее всего, захотите использовать плагины, поскольку они позволяют достичь тех же результатов с гораздо меньшими усилиями.
Сократите неиспользуемый CSS
Удаление неиспользуемого CSS может быть затруднено. Правила CSS, которые есть на вашей странице и которые не используются для стиля страницы, считаются неиспользуемым CSS. Большинство фреймворков, тем и плагинов оставят на вашем сайте неиспользуемый CSS. Например, ваша тема WordPress может содержать стили для страницы контактов, но они не используются на всех остальных страницах вашего сайта, но все еще существуют в таблице стилей.
К счастью, если вы используете WordPress, есть несколько плагинов, которые автоматически сокращают неиспользуемый CSS. WP-Rocket и Perfmatters отлично справятся с удалением неиспользуемого CSS из вашего блога. Эти плагины загружают ваши страницы и обеспечивают наличие только того CSS, который необходим для правильного отображения вашей страницы, в результате чего вы получаете файл CSS меньшего размера.
Для разработчиков: Чтобы выполнить этот процесс вручную, разработчики могут поработать над удалением таблиц стилей с сайта WordPress. Это позволит вам вручную выбрать CSS, который вы хотите добавить в таблицу стилей вашей темы. Существуют также онлайн-инструменты для поиска неиспользуемых CSS на вашем сайте, но, скорее всего, их использование для больших сайтов будет нестабильным.
Использование кэширования браузера
Когда пользователи посещают несколько страниц вашего сайта, они, скорее всего, используют одни и те же ресурсы. Часто изображения, CSS и JavaScript используются совместно на всем сайте. Именно здесь на помощь приходит кэширование браузера: вы можете указать браузеру пользователя сохранять ресурсы для последующего использования. Большинство плагинов производительности для WordPress добавляют правила кэширования браузера из коробки.
Для разработчиков: В зависимости от того, используете ли вы Apache или Ngnix, вы можете добавить конфигурацию сервера, чтобы указать браузерам пользователей кэшировать определенное содержимое. Обычно эти методы кэширования применяются к CSS, JS и изображениям.
Устранение ресурсов, блокирующих рендеринг
Когда веб-браузер читает код вашего сайта, он определяет, что загрузить и отобразить. Файлы JavaScript и CSS в теге <head> считаются ресурсами, блокирующими рендеринг. Когда браузер пытается вернуть страницу пользователю, ему приходится останавливаться, загружать файл, что в целом задерживает отрисовку страницы. Если на вашем сайте есть блокирующие рендеринг ресурсы, Google PageSpeed Insights покажет вам самые большие файлы и потенциальную экономию.
К счастью, большинство плагинов производительности для WordPress помогут вам отложить или встроить JavaScript и CSS. Плагины WordPress также помогут вам переместить несущественные таблицы стилей и JS для загрузки в нижней части страницы. WP-Rocket, Autoptimize (бесплатно) и Perfmatters делают свою работу по устранению блокирующих рендеринг активов.
Для разработчиков: Разработчики могут воспользоваться многочисленными функциями браузера для улучшения загрузки активов. Это включает использование атрибута defer для скриптов, перемещение CSS/JS в нижний колонтитул и включение только критических CSS в заголовок. Руководство Google по блокирующим рендеринг ресурсам.
Эффективное кодирование изображений
Алгоритмы сжатия изображений показывают невероятные результаты при сжатии изображений без ощутимой потери качества. Обычно изображения JPG и PNG могут использовать дополнительное сжатие при экспорте. Imagify, ShortPixel и Smush – это отличные плагины WordPress для автоматического сжатия изображений. По сути, эти плагины будут сжимать ваши изображения по мере их загрузки, что приведет к увеличению скорости загрузки страниц. Вы также можете выбрать степень сжатия изображений. Поскольку сжатие изображений требует затрат вычислительной мощности, многие из этих плагинов будут платными при большом количестве изображений. ShortPixel также предлагает плагин для сжатия изображений в облаке с помощью своей сети доставки контента и API. Если ваш сайт уже использует CloudFlare, вы можете подписаться на их тарифный план Pro, чтобы оптимизировать изображения на лету.
Для разработчиков: Существует множество инструментов для оптимизации изображений, включая онлайн-инструменты, такие как Image Compressor, и настольные приложения, такие как Pichi. Скорее всего, вы захотите сжимать изображения в масштабе, поэтому я предпочитаю использовать CDN, которая автоматически сжимает изображения. Мой личный фаворит – тарифный план CloudFlare Pro ($20/м), который автоматически сжимает и даже серверные webp-изображения. Вы также можете перейти на использование SVG для графики, например, логотипа вашего сайта. Также хорошим правилом является использование файлов JPEG для реальных фотографий и SVG/PNG для графики. Использование PNG-файла для фотографии приведет к неоправданно большому размеру файла.
Правильный размер изображений
Примером изображений неправильного размера может служить большое изображение размером 2000px на 2000px в div шириной 800px. Поскольку видимым является только 800px, браузеру приходится загружать более крупное изображение без какой-либо причины. Это приводит к замедлению скорости загрузки страницы и ухудшению впечатлений пользователей. Большинство хорошо разработанных тем WordPress не имеют такой проблемы.
Для разработчиков: Если вы разрабатываете тему WordPress, вы можете установить размеры изображений WordPress по умолчанию, чтобы они правильно соответствовали ширине вашей темы. После изменения размеров изображений вам нужно будет заново создать эскизы WordPress. Имейте в виду, что если вы хотите использовать изображения для retina-дисплеев, вам следует использовать атрибут srcset. WordPress также имеет встроенные функции для отображения изображений на дисплее с высокой плотностью пикселей.
Отложить изображения за пределами экрана
При загрузке веб-сайта, если он содержит изображения, все они будут загружены, даже те, которые находятся ниже сгиба. Это пустая трата ресурсов и использование сети, поскольку изображения доступны для просмотра. К счастью, откладывать изображения за пределами экрана стало проще, чем когда-либо, теперь все основные браузеры поддерживают ленивую загрузку. По умолчанию WordPress будет применять атрибут loading=”lazy” к изображениям, чтобы автоматически откладывать изображения за пределами экрана, поэтому вы, скорее всего, не увидите этой ошибки. WP-Rocket также будет применять ленивую загрузку к изображениям, iFrames и вставкам YouTube. Также вы можете использовать бесплатный плагин a3 Lazy Load для применения ленивой загрузки к внеэкранным элементам. Если на вашем сайте много файлов изображений и gif-файлов, это важный аспект улучшения загрузки страницы.
Для разработчиков: Самый простой способ добавить ленивую загрузку к изображению – включить атрибут loading=”lazy” в тег < img>. Существует также множество библиотек JavaScript для ленивой загрузки контента.
Весь текст остается видимым при загрузке Webfont
Когда появились веб-шрифты, было принято скрывать текст до загрузки шрифта. Это большой минус, так как пользователи хотят мгновенно начать читать ваш сайт. WP-Rocket автоматически оптимизирует отображение веб-шрифта, если включены оптимизации CSS. Бесплатный WordPress плагин Swap Google Fonts Display также добавит нужный параметр в Google Fonts для вашего WordPress сайта. Для разработчиков: Скорее всего, вы используете Google Fonts, и решить эту проблему довольно просто. Все, что вам нужно сделать, это добавить строку запроса “&display=swap” в URL-адрес шрифтов Google; более подробную информацию можно найти в Google.
Избегайте множественных перенаправлений страниц
Если на вашем сайте много перенаправлений, они будут медленно увеличивать скорость загрузки страницы. Например, если ваша домашняя страница / переходит на /home.html, это приведет к задержке ответа для ваших пользователей. Вы можете увидеть эту ошибку, если у вас есть CSS или JS файлы, которые также ведут к перенаправлению. Другой пример – если URL в навигации по заголовку переходит на URL, который перенаправляет. Скорее всего, ваш сайт не будет отмечен за это, если вы используете WordPress.
Заключительные мысли об оптимизации Google PageSpeed для вашего блога
Надеюсь, эти советы по оптимизации Google PageSpeed помогут улучшить производительность вашего блога и приведут к увеличению органического трафика со временем. По мере развития Интернета и упрощения использования инструментов ускорять сайты WordPress будет все легче и легче. Есть масса вещей, которые вы можете сделать для улучшения показателей Google PageSpeed, но я бы рекомендовал пройти тест. Прохождение теста (показатель выше 90) сыграет большую роль в ранжировании вашего контента в верхних строчках результатов органического поиска Google. Однако не забывайте, что достижение идеального результата в 100 баллов может оказаться бесконечной задачей, поскольку веб-стандарты меняются, поэтому старайтесь оставаться в диапазоне 90+, и все будет в порядке.
