Руководство Google по оптимизации PageSpeedКак набрать 100 баллов в PageSpeed ​​Insights (и повысить производительность своего блога)

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

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

Оптимизация Google PageSpeed: как получить 100 баллов в PageSpeed ​​Insights

1. Что такое Google PageSpeed?
2. Почему Google PageSpeed ​​имеет значение?
3. Как проверить скорость вашего сайта
4. Рекомендации Google PageSpeed
5. Google PageSpeed ​​Optimization & Insights: часто задаваемые вопросы

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

Готовы начать свой блог сегодня?

Ознакомьтесь с моим окончательным руководством «Как начать блог (на стороне)», которое было представлено в Forbes , Inc и Entrepreneur .

Сначала давайте рассмотрим основы Google PageSpeed, а затем углубимся в ускорение вашего блога.

Что такое 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.

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

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

Исследования показали, что скорость сайта напрямую влияет на коэффициент конверсии. Данные Portent показывают, что при скорости загрузки страницы в 1 секунду по сравнению с 5 секундами конверсия снизится почти на 50%. Мало того, что время загрузки вашего сайта повлияет на ваш рейтинг в Google, это также повлияет на коэффициент конверсии.

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

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

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

Как проверить скорость вашего сайта

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

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

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

Еще одно место, где можно увидеть производительность веб-сайта, — это использовать отчет 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 для 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/м), который автоматически сжимает и даже серверирует веб-изображения. Вы также можете перейти к использованию SVG для графики, такой как логотип вашего сайта. Также хорошим правилом является использование файлов JPEG для реальных фотографий и файлов SVG/PNG для графики. Использование файла PNG для фотографии приведет к излишне большому размеру файла.

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

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

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

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

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

По умолчанию WordPress применяет атрибут loading=”lazy” к изображениям, чтобы автоматически откладывать закадровые изображения, поэтому вы, скорее всего, не увидите эту ошибку. WP-Rocket также будет применять ленивую загрузку к изображениям, iFrames и вставкам YouTube. В качестве альтернативы вы можете использовать бесплатный плагин a3 Lazy Load, чтобы применить отложенную загрузку к элементам за пределами экрана. Если на вашем сайте много файлов изображений и гифок, это важный аспект улучшения загрузки страницы.

Для разработчиков: Самый простой способ добавить ленивую загрузку к изображению — включить атрибут loading="lazy" в тег <img>. Существует также множество библиотек JavaScript для ленивой загрузки контента.

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

Когда появились веб-шрифты, обычной практикой было скрывать текст перед загрузкой шрифта. Это большое «нет-нет», так как пользователи хотят мгновенно начать читать ваш сайт. WP-Rocket автоматически оптимизирует отображение веб-шрифтов, когда включена оптимизация CSS. Бесплатный плагин WordPress Swap Google Fonts Display также добавит правильный параметр в Google Fonts для вашего сайта WordPress.

Для разработчиков: скорее всего, вы используете Google Fonts, что довольно просто решить эту проблему. Все, что вам нужно сделать, это добавить строку запроса «&display=swap» к вашему URL-адресу Google Font; более подробная информация от Google.

Избегайте переадресации нескольких страниц

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

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

Google PageSpeed ​​Optimization & Insights: часто задаваемые вопросы

Вот самые распространенные вопросы о Google PageSpeed. Если чего-то не хватает, спрашивайте в комментариях в конце статьи.

Заключительные мысли об оптимизации Google PageSpeed ​​для вашего блога

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

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

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

Готовы начать свой блог сегодня?

Ознакомьтесь с моим окончательным руководством «Как начать блог (на стороне)», которое было представлено в Forbes , Inc и Entrepreneur .