Как пройти тест скорости Google с помощью Pagespeed Insights

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

Скорость страницы и Core Web Vitals имеют решающее значение сегодня, и нет причин иметь медленную загрузку страницы или веб-сайта, особенно с сайтами WordPress.

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

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

Как убедиться, что ваш блог в актуальном состоянии

Многие факторы влияют на результаты теста скорости.

Интернет-сервисы, предоставляющие тесты скорости, варьируются от страны к стране и даже от города к городу.

Если вы проверили свое подключение к Интернету, вы знаете, что скорость загрузки и выгрузки зависит от вашего поставщика услуг и эффективности проверки вашего подключения к Интернету и Wi-Fi.

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

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

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

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

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

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

Тест скорости Google дает вам приблизительное представление о скорости вашего сайта.

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

Вам нужны лучшие инструменты SEO для выполнения этой работы.

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

В зависимости от того, сколько трафика вы получаете, вы можете увидеть или не увидеть оценку Core Web Vitals.

Это измеряет данные о реальной скорости пользователя из браузера Chrome.

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

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

Но инструменты проверки скорости страницы Google не очень помогают в отслеживании и устранении проблем.

Поиск способов устранения проблем

Гораздо лучший способ проверить скорость сайта — использовать GTMetrix.

Он имеет открытый исходный код и использует показатель Google Pagespeed и YSlow от Yahoo, и он дает вам гораздо больше информации, чем Google.

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

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

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

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

Для меня это самая важная статистика при измерении истинной скорости веб-страницы.

На изображении ниже вы можете видеть, что хотя время полной загрузки составляет 1,9 секунды, время загрузки DOM составляет всего 1,3 секунды.

Вот еще один вид ниже. Красная линия, отмеченная стрелкой, — это точка загрузки DOM.

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

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

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

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

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

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

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

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

1. Во-первых, избавьтесь от беспорядка на боковой панели

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

Вы должны думать о своих страницах как о главной недвижимости.

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

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

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

2. Избегайте контента на странице, зависящего от внешних сайтов.

Одним из главных виновников замедления веб-страницы и провала теста скорости Google является кнопка «Мне нравится» в Facebook.

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

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

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

Другие интернет-сервисы, которые могут замедлить работу элементов вашего сайта, включают рекламу и виджеты Amazon, а также рекламу Google с большими баннерами.

Если у вас есть Google Adsense, попробуйте использовать рекламу в статьях вместо больших рекламных баннеров и установите баланс рекламы примерно на 70-80 процентов.

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

Вот страница на нашем сайте с Google Ads, измеренной с помощью GTmetrix.

Влияние на время загрузки минимально.

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

Кроме того, реклама загружается с опозданием, а это означает, что страница не ожидает в Google до ее отображения.

3. Проверьте наличие медленных файлов JavaScript

Каждый элемент на вашем сайте требует времени для загрузки.

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

Вот оценка GTMetrix веб-сайта, который действительно требует срочного внимания. Загрузка страницы за 12,4 секунды сегодня ужасна.

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

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

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

Следующие три пункта объясняют добавление кеша, минимизацию и агрегирование CSS и Javascript, а также ленивую загрузку изображений.

Все три рекомендуемых ниже плагина бесплатны.

4. Установите общий кэш W3

Есть много очень хороших плагинов для кэширования для WordPress, в том числе WP Super Cache и WP Fastest Cache.

Но я использую W3 Total Cache уже более десяти лет на всех своих сайтах.

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

Вот настройки Total Cache. Но они одинаковы для всех кеширующих плагинов.

Вам нужно только активировать браузер и кеш страницы.

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

5. Установите автооптимизацию

Большинство плагинов кэширования также могут минимизировать и агрегировать Javascript и CSS.

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

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

Что он делает, так это уменьшает размер всех файлов CSS и Javascript, а затем объединяет их в один файл CSS и один файл Javascript.

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

Минификация и агрегация имеют огромное значение для скорости вашего сайта.

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

Еще одним дополнительным бонусом Autoptimize является фантастическая поддержка.

6. Установите ленивую загрузку a3

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

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

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

Я попробовал несколько разных плагинов, прежде чем остановился на a3 Lazy Load. Он выигрывает по производительности и простоте использования.

После установки вы можете использовать настройки по умолчанию или внести некоторые изменения.

Плагин будет лениво загружать все ваши изображения, видео и iFrames.

7. Установите WP Rocket

Если вы хотите, чтобы вариант «все в одном» заменил три бесплатных варианта выше, WP Rocket может сделать все и даже больше.

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

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

WP Rocket — это экономичное универсальное решение, позволяющее сделать ваш сайт молниеносным за считанные минуты с минимальными усилиями.

8. Измените размер ваших изображений

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

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

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

Этот сайт имеет ширину 750 пикселей с боковой панелью 300 пикселей. Любое изображение шире 750 пикселей замедляет работу сайта.

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

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

Но на самом деле страница будет загружать полноразмерное изображение 1218px и замедлять скорость сайта.

Никогда не используйте поле « Сведения об изображении » в WordPress для ленивого изменения размера изображений.

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

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

Smush — популярный плагин для уменьшения изображений с помощью сжатия с потерями. Я использую бесплатную версию, и она отлично работает.

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

Как видите, он с потерями уменьшает изображения примерно на 80%.

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

Вы также можете прочитать предыдущую статью о том, как уменьшить изображения.

10. Используйте CDN Cloudflare

Вам нужно использовать сеть доставки контента (CDN)?

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

Но если ваш сайт получает в основном локальный трафик, это не сильно поможет.

Just Publishing Advice размещается в Европе, но большой процент трафика приходится на США. Поэтому имеет смысл использовать CDN.

Если ваш сайт размещен, например, в Австралии, и вы получаете много трафика из Великобритании и США, вы, вероятно, захотите рассмотреть возможность использования CDN.

Cloudflare популярен, эффективен и бесплатен. Так что это хороший выбор.

Тем не менее, вам нужно немного технических навыков, чтобы развернуть его на своем сайте.

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

11. Проверяйте раз в неделю

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

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

Вы будете использовать Pagespeed Insights и GTMetrix большую часть времени.

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

Dot-Com Tools проверяет скорость вашего сайта в режиме реального времени, чтобы вы могли видеть, как оценивается ваш сайт.

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

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

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

Резюме

Вам нужно сделать все, что указано в этом руководстве?

WordPress из коробки обычно работает довольно хорошо с точки зрения скорости.

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

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

Если вы получили отрицательную оценку в тесте скорости Google, то вам определенно нужно срочно выполнить какую-то работу.

Один из советов — активировать тему WordPress по умолчанию, например Twenty Seventeen, и снова протестировать. Большинство тем теперь адаптивны, но некоторые старые темы могут замедлять работу сайта.

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

1. Установите плагин кэширования.

2. Установите автооптимизацию

3. Установите ленивый загрузчик

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

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

Нет причин иметь медленный сайт WordPress и не пройти тест скорости Google.

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