Оптимизация Google PageSpeed является неотъемлемой частью рейтинга любого блога или веб-сайта в результатах поиска Google. Вот мое пошаговое руководство по оптимизации скорости страницы вашего блога WordPress и достижению идеальной производительности 100 в Google PageSpeed Insights.
Скорость загрузки вашего сайта является важной частью опыт пользователя в вашем блоге. Вот почему наличие быстрого веб-сайта необходимо для успеха, если вы хотите создать блог.
Google также ранжирует веб-сайты на основе их скорости, используя показатель PageSpeed. Получить высший балл 100 в тесте Google PageSpeed непросто. Но я здесь, чтобы помочь вам! Неважно, ведете ли вы блог или сайт электронной коммерции, мы шаг за шагом объясним, как повысить показатель Google PageSpeed до 100.
Оптимизация Google PageSpeed: как набрать 100 баллов в PageSpeed Insights
Давайте сначала рассмотрим основы Google PageSpeed, а затем мы углубимся в оптимизацию скорости вашего блога.
Что такое Google PageSpeed?
Скорость страницы – это время, за которое содержимое вашего веб-сайта достигает браузера пользователя.
Это очень важно, потому что пользователи, посещающие ваш сайт, не хотят ждать вашего контента. Вам знакомо это чувство или вы находите ответ на свой вопрос в Google, нажимаете на ссылку и в конечном итоге сдаетесь, потому что страница загружается медленно.
Google тоже это знает; вот почему скорость вашего сайта является основным фактором ранжирования. Самым популярным инструментом для проверки скорости вашего сайта является Google PageSpeed Insights . Это лучший способ точно узнать, что Google думает о вашем сайте с точки зрения скорости страницы.
Известные показатели Google PageSpeed:
- Самая большая содержательная краска (LCP): измерение скорости загрузки страницы, воспринимаемой пользователями. В основном, когда контент в верхней части страницы закончил загрузку.
- Первая задержка ввода (FID) : измеряйте в секундах задержку, пока пользователь не сможет взаимодействовать с веб-сайтом.
- Сдвиг накопительного макета (CLS) : измеряется в секундах, пока макет страницы не перестанет «меняться». Например, загрузка изображения может привести к изменению макета на вашем сайте. Это важно, потому что пользователь может захотеть щелкнуть что-то на вашем сайте до того, как он завершит загрузку, что может привести к тому, что он щелкнет что-то еще.
- Первая содержательная краска (FCP): Мера времени, в течение которого что-то отображается на экране.
- Взаимодействие со следующей краской (INP): Interaction to Next Paint отслеживает задержку взаимодействия пользователя со страницей. Например, если пользователь нажимает на аккордеон, и при его открытии возникает непредвиденная задержка.
- Время до первого байта (TTFB): измеряет время, пока браузер не получит ответ от сервера.
Вы увидите, что эти термины часто используются в Google Search Console (отчет Core Web Vitals), PageSpeed Insights и отчете об опыте использования Chrome.
Почему скорость страницы важна?
Скорость страницы имеет значение потому что это напрямую повлияет объем трафика et сколько денег может заработать ваш блог .
исследования (на английском языке) показали, что скорость сайта напрямую влияет на обменный курс. Данные Portent показывают, что скорость загрузки страницы в 1 секунду вместо 5 секунд приведет к падению конверсии почти на 50%. Мало того, что время загрузки вашего сайта повлияет на ваш рейтинг в Google, это также повлияет на коэффициент конверсии.
От вашей позиции в результатах поиска Google до терпения клиентов, время загрузки страницы вашего сайта влияет на каждый аспект взаимодействия с пользователем. Поскольку пользователи в основном используют мобильные устройства, каждый килобайт, загруженный вашим сайтом, должен быть преднамеренным.
Чем дольше пользователю приходится сидеть и ждать загрузки страницы, тем выше будет ваш показатель отказов. Скорость вашего сайта влияет не только на поисковую выдачу Google, но и на скорость страницы в большинстве поисковых систем. Вот почему наличие сайта с быстрой загрузкой имеет важное значение в современном Интернете.
К счастью, создать быстрый сайт не так уж сложно, если вы используете современные инструменты и знаете, что делать.
Как проверить скорость вашего сайта
Если вы не знакомы с Google PageSpeed, это серия тестов, которые Google запускает на вашем сайте, чтобы определить, насколько быстро ваш сайт загружается. Когда пользователь в Google нажимает на результат поиска, он ожидает, что он загрузится быстро. Вот почему Google создал тест Google PageSpeed Insights .
Откройте Google PageSpeed Insights
Это дает владельцам веб-сайтов инструменты, позволяющие точно знать, что замедляет работу их веб-сайта и как это исправить. Кроме того, он предоставляет Google данные, необходимые для правильного ранжирования веб-сайта в алгоритме поисковой системы.
Использовать инструмент так же просто, как ввести URL-адрес вашего веб-сайта и нажать Анализировать. Тест будет выполнен быстро, и вы получите множество ключевых измерений. Кроме того, если вы хотите запустить локальный тест, вы можете использовать lФлагман 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 et Cache Enabler.
- Используйте современный стек: версии 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. Вместо управления конфигурацией сервера я рекомендую вам использовать CloudFlare. CloudFlare будет применять сжатие GZIP и Brotli в зависимости от того, что поддерживает браузер пользователя и какой контент обслуживается автоматически.
Сократите CSS, HTML и JavaScript
HTML, CSS и JavaScript влияют на скорость загрузки вашей страницы. При написании кода большинство разработчиков включают табуляцию, пробелы и другой необязательный код, чтобы сделать его понятным для человека. Все эти неиспользуемые символы складываются и могут немного замедлить работу вашего сайта.
К счастью, все эти активы можно легко свести к минимуму, не влияя на работу пользователя. WP Rocket предлагает страницу оптимизации файлов с параметрами минимизации для CSS и JavaScript. Кроме того, если кэширование страниц включено в WP-Rocket, к страницам будет применена минимизация HTML. Бесплатный вариант — использовать плагин Autoptimize для минимизации CSS/JS/HTML.
Имейте в виду, что когда вы минимизируете JavaScript, это может привести к проблемам с функциональностью, поэтому обязательно протестируйте его при активации.
Для разработчиков: многие инструменты разработки позволяют разработчикам сжимать свои файлы во время рабочего процесса. Пакеты Node.js, такие как Чистый CSS можно добавить в рабочий процесс для сжатия мини-файлов во время работы с ними. Кроме того, для небольших проектов существует множество онлайн-инструментов, которые сжимают CSS , JS и даже HTML . Если вы используете WordPress, вам просто нужно выбрать плагин, так как он даст те же результаты с гораздо меньшими усилиями.
Уменьшить неиспользуемый CSS
Удаление неиспользуемого CSS может быть сложной задачей. Правила CSS на вашей странице, которые не используются для оформления страницы, считаются неиспользуемыми CSS. Большинство фреймворков, тем и плагинов оставят ваш сайт с неиспользованным CSS.
Например, ваша тема WordPress может содержать стили для страницы контактов, но они не используются на всех других страницах вашего сайта, но все еще существуют в таблице стилей.
К счастью, если вы используете WordPress, есть несколько плагинов, которые автоматически обрезают неиспользуемый CSS. WP-Ракета и 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-Ракета, Autoptimize (бесплатно) и Perfmatters все делают работу по устранению ресурсов, блокирующих рендеринг.
Для разработчиков: разработчики могут воспользоваться несколькими функциями браузера для улучшения загрузки ресурсов. Это включает в себя использование атрибут отсрочки на скриптах, перемещая CSS/JS в нижний колонтитул и включая только критический CSS в заголовок.
Эффективно кодируйте изображения
Алгоритмы сжатия изображений дают невероятные результаты для сжатия изображений без потери воспринимаемого качества.
Как правило, изображения JPG и PNG могут использовать дополнительное сжатие при экспорте. Imagify , ShortPixel et Smush все отлично WordPress плагины для автоматического сжатия изображений. По сути, эти плагины сжимают ваши изображения при их загрузке, что ускоряет загрузку страниц. Вы также можете выбрать уровень сжатия, применяемый к изображениям.
Поскольку для сжатия изображений требуется вычислительная мощность, многие из этих плагинов будут взимать плату за большое количество изображений. ShortPixel также предлагает плагин для сжатия изображений в облаке с помощью их сети доставки контента и API. Если ваш сайт уже использует CloudFlare, вы можете подписаться на их профессиональный план для оптимизации изображений на лету.
Для разработчиков: доступно множество инструментов оптимизации изображений, в том числе онлайн-инструменты, такие как изображение компрессора и настольные приложения такие как Пичи. Вам нужно будет сжимать изображения в масштабе, поэтому я предпочитаю использовать 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 чтобы применить ленивую загрузку к элементам за пределами экрана. Если на вашем сайте много файлов изображений и гифок, это важный аспект улучшения загрузки страницы.
Для разработчиков: самый простой способ добавить ленивую загрузку к изображению — включить атрибут loading="lazy" в маяке <img>. Есть также много Библиотеки JavaScript для загрузки ленивого контента.
Весь текст остается видимым во время загрузки веб-шрифта
Когда появились веб-шрифты, было принято скрывать текст перед загрузкой шрифта. Это большое «нет-нет», так как пользователи хотят мгновенно начать читать ваш сайт. WP-Rocket автоматически оптимизирует отображение веб-шрифтов, когда включена оптимизация CSS. в Плагин Wordpress бесплатно Поменять местами отображение шрифтов Google также добавит правильную настройку в Google Fonts для вашего сайта WordPress.
Для разработчиков: вы, вероятно, используете Google Fonts, который довольно просто решает эту проблему. Все, что вам нужно сделать, это добавить строку запроса "&display=swap" на ваш URL-адрес шрифта Google; более подробная информация от Google .
Избегайте многостраничных перенаправлений
Если на вашем сайте много переадресаций, это будет медленно увеличивать скорость загрузки страницы. Например, если ваша домашняя страница перенаправляется на /home.html, это приведет к задержке ответа ваших пользователей. Вы можете увидеть эту ошибку, если у вас есть файлы CSS или JS, которые также приводят к перенаправлению.
Другой пример: если URL-адрес в меню навигации вашего заголовка переходит на URL-адрес, который перенаправляет. Скорее всего, ваш сайт не будет отмечен этим, если вы используете WordPress.
FAQ по оптимизации и статистике Google PageSpeed
Вот наиболее часто задаваемые вопросы о Google PageSpeed. Если чего-то не хватает, спрашивайте в комментариях в конце этой статьи.
Что такое тест Google PageSpeed?
Предварительный тест Google PageSpeed используется для определения производительности веб-сайта. По результатам теста вы получите оценку PageSpeed из 100.
Что такое оценка Google PageSpeed?
Оценка Google PageSpeed — это тест, который Google проводит для анализа производительности веб-сайта. 100 — это идеальный результат, а 90 — хорошо. В то время как оценка между 50 и 90 нуждается в улучшении, а оценка ниже 50 является плохой.
Влияет ли скорость страницы на SEO?
Да. Оценка Google PageSpeed Insights играет важную роль в SEO. Google использует скорость страницы как ключевой фактор ранжирования веб-сайта.
Как я могу улучшить свой показатель Google PageSpeed?
Надеюсь, что эта статья помогла улучшить ваш показатель Google PageSpeed. Основы включают удаление ресурсов, блокирующих рендеринг, удаление неиспользуемого CSS, оптимизацию изображений и уменьшение времени до первого байта.
Заключительные мысли об оптимизации Google PageSpeed для вашего блога
Я надеюсь, что эти советы по оптимизации Google PageSpeed помогут улучшить производительность вашего блога и со временем приведут к увеличению органического трафика. По мере развития Интернета и упрощения использования инструментов ускорять работу сайтов WordPress будет все проще и проще.
Есть множество вещей, которые вы можете сделать, чтобы улучшить оценку Google PageSpeed, но я рекомендую пройти тест.
Прохождение теста (оценка выше 90) сыграет важную роль в ранжировании вашего контента на первых позициях в результатах обычного поиска Google. Помните, однако, что получение идеального балла 100 может стать бесконечной задачей по мере изменения веб-стандартов, поэтому старайтесь оставаться в пределах этого диапазона 90+, и все будет в порядке.
