Проверка скорости работы сайта google: Как проверить скорость загрузки сайта? 4 самых актуальных инструмента

alexxlab

Содержание

Ускорение загрузки сайта по Google Pagespeed

Преимущества сотрудничества с ABC Digital

Доводим скорость загрузки сайта Google PageSpeed до зеленых показателей

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

Работаем как с клиентской, так и с серверной оптимизацией

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

Проверка скорости с 3G интернетом через мобильные устройстваx

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

Работаем с 1С Битрикс и MODX

Ускорение работы сайта

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

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

Digital-агентство «АБВ сайт» выполняет оптимизацию скорости загрузки сайта. Мы найдем причину проблемы и быстро устраним ее.

Что замедляет ваш сайт

  • Ошибка в верстке сайта

    Верстка сайта выполнена с большой вложенностью, изображения не оптимизированы, скрипты не объеденены в один файл

  • Ошибки программирования на CMS

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

  • Ошибка кеширования сайта

    Все статичные блоки на сайте должны правильно кешироваться.

    Это значительно снижает нагрузку на сервер

  • Неправильно настроен или подобран хостинг

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

Как мы ускоряем загрузку сайтов

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

Настройка скриптов. Устраняются ошибки, допущенные программистами.

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

Оптимизация БД. Уменьшается количество поступающих к ней запросов.

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

Оформите заказ на ускорение сайта от «АБВ сайт»

Чтобы заказать услугу ускорения сайта, оставьте заявку на сайте или звоните по телефону 8 (495) 125-08-61

Оставить заявку

Схема работы

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

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

Проведем все необходимые работы для ускорения вашего сайта до зеленой зона Google Pagespeed. Проведем тестирование на всех страницах

Проведем тестирование и профилирование кода, определим, сколько нужно дополнительной мощности, произведем настройки выделенного сервера, VDS или виртуального хостинга

Перенесём все исправления в скриптах на ваш боевой сайт, при этом время сбоев в работе вашего проекта будем минимальным, около 30 минут

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

Наши позиции в рейтингах за 2022 год

Создание интернет-магазинов в России

Рейтинг Рунета

Создание и продвижение сайтов в России

Рейтинг Рунета

Разработка сайтов на MODX

Рейтинг Рунета

Создание интернет-магазинов на 1С Битрикс

Рейтинг Рунета

Создание сайтов в Рязани

Рейтинг Рунета

Продвижение сайтов в Рязани

CMS magazine

видеоотзывы

Маша и Медведь

Краснощеков Михаил

Galactic Group

Оксана Сугробова

CartecoPack

Владимир Лукин

RumpHardware

Роман Тремпольцев

Mirdopov. ru

Темников Дмитрий

Consult Group

Стрельников Артем

Блог о программировании — Проверка скорости заргрузки сайта используя Python


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

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

Мы решили создать небольшой код, который будет автоматически проводить проверку скорости загрузки сайтов и страниц сайта, так как ограничение на проверку через API Google pagespeed 25.000, это будет намного приятее и удобнее. Фото ниже:

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

Следующим шагом импортируем библиотеки, которые необходимы для работы:

    import urllib.request, json
    import re
    import pandas as pd

Создаем текстовый документ в переменной среде path, у нас он будет называться как всегда)) 1.txt, в него мы поместим все URL сайтов, скорость которых необходимо проверить. Затем возвращаемся к коду и считываем построчно данные из файла, также создадим пустой словарь для дальнейшего формирования результатов в таблицу с помощью pandas + добавляем переменную key в которой укажем ключ API, который получен через сервисы google (ссылка на инструкцию указана выше):

    f = open('1. \s+|\n|\r|\s+$", '', s)

Формируем URL запроса для получения скорости загрузки:

    url = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" \
    + s + "&strategy=mobile&locale=en&key=" + key

Попытаемся отправить запрос с помощью urllib.request и получить данные в формате json в ответ на наш запрос, если URL рабочий и верно указан, код отработает и мы получим ответ, который будет храниться в переменной data, затем в переменную overall_score получим нужные нам данные из переменной data.

После этого добавим данные в переменную d (URL и код ответа для формирования таблицы)

     try:
        response = urllib.request.urlopen(url)
        data = json.loads(response.read())
        overall_score = data["lighthouseResult"]["categories"]["performance"]["score"] * 100
        d.setdefault("URL", []).append(s)
        d.setdefault("Скорость", []).append(overall_score)

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

    except:
        d.
 
 setdefault("URL", []).append(s)
        d.setdefault("Скорость", []).append("Ошибка сканирования, проверьте указанный URL")

И завершим наше исключение с помощью finally (будет выполнено в любом случае при использовании исключения), перейдем к чтению следующего домена из нашего файла:

    finally:
        s = f.readline()

Когда цикл завершит свою работу, а завершит он ее после прохода всех URL в текстовом файле 1.txt, создадим DataFrame с помощью pandas получив данные из переменной d

    df = pd.DataFrame(data=d)

У нас есть DataFrame, но такие данные использовать неудобно и проблематично, поэтому мы перенесем данные в таблицу Excel, таблица будет создана автоматически в переменной среде path:

    df.to_excel('./googlepagespeed.xlsx')

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

Ниже приведем полный код, для удобного копирования:

    import urllib. \s+|\n|\r|\s+$", '', s)
        url = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" \
        + s + "&strategy=mobile&locale=en&key=" + key
        try:
            response = urllib.request.urlopen(url)
            data = json.loads(response.read())
            overall_score = data["lighthouseResult"]["categories"]["performance"]["score"] * 100
            fcp = data["loadingExperience"]["metrics"]["FIRST_CONTENTFUL_PAINT_MS"]["percentile"] /1000
            fid = data["loadingExperience"]["metrics"]["FIRST_INPUT_DELAY_MS"]["percentile"] /1000
            lcp = data["loadingExperience"]["metrics"]["LARGEST_CONTENTFUL_PAINT_MS"]["percentile"] /1000
            cls = data["loadingExperience"]["metrics"]["CUMULATIVE_LAYOUT_SHIFT_SCORE"]["percentile"]
            d.setdefault("URL", []).append(s)
            d.setdefault("Скорость", []).append(overall_score)
            d.setdefault("fcp", []).append(fcp)
            d.setdefault("fid", []).append(fid)
            d.
 
 setdefault("lcp", []).append(lcp)
            d.setdefault("cls", []).append(cls)
        except:
            d.setdefault("URL", []).append(s)
            d.setdefault("Скорость", []).append("Ошибка сканирования, проверьте указанный URL")
            d.setdefault("fcp", []).append("-")
            d.setdefault("fid", []).append("-")
            d.setdefault("lcp", []).append("-")
            d.setdefault("cls", []).append("-")
        finally:
            s = f.readline()
    df = pd.DataFrame(data=d)
    df.to_excel('./googlepagespeed.xlsx')

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

И самое важное, помните, что в Python нужно соблюдать отступы или один таб или 4 пробела, код нужно привести к такому виду как он указан на сайте, если при копировании (такое бывает довольно часто) количество отступов изменилось или они пропали вообще.

Google PageSpeed ​​Insights помогает сделать ваш сайт быстрее • Yoast

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

Содержание

  • Что такое PageSpeed ​​Insights?
  • Как работает PageSpeed ​​Insights?
  • Показатели PSI: лабораторные данные в сравнении с полевыми данными
  • Начало работы с PageSpeed ​​Insights
  • Ключевые показатели, оцененные PageSpeed ​​Insights
  • Улучшение оценки PageSpeed ​​Insights
  • Заключение

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

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

Инструмент предоставляет оценку от 0 до 100, где 100 означает «самую быструю» и «самую производительную» веб-страницу. Обратите внимание, что получение 100 баллов — это не то, к чему вам нужно стремиться. Но ваши страницы должны пройти общую оценку Core Web Vitals Assessment. Запомните эти слова; вы будете часто их слышать — подробнее на эту тему далее в этой статье.

Страница PageSpeed ​​Insights после запуска теста для cnn.com

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

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

Чтобы понять PSI и то, как он вписывается в SEO-скорость страницы, прочитайте следующие статьи:

  • Что такое скорость страницы и как она влияет на SEO?
  • Как проверить скорость страницы: инструменты и предложения

Как работает PageSpeed ​​Insights?

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

Обзор PageSpeed ​​Insight

Вот еще немного информации о том, как работает процесс тестирования:

  • Анализ URL-адресов: Первым шагом в процессе PSI является проверка тестируемого URL-адреса. Этот URL-адрес может быть любым онлайн-контентом с допустимым URL-адресом, например страницей продукта, записью в блоге или другим веб-материалом. Помните, что тест PSI специфичен для этого URL-адреса и не влияет автоматически на общую производительность вашего веб-сайта.
  • Получение содержимого страницы: После отправки URL-адреса PageSpeed ​​Insights извлечет содержимое страницы, включая HTML, CSS, JavaScript, изображения и все другие элементы, необходимые для отображения страницы.
  • Оценка производительности: После извлечения содержимого страницы PSI проведет несколько тестов для оценки скорости и эффективности страницы. Эти тесты анализируют такие факторы, как размер и структура страницы, количество и размер ресурсов, а также время загрузки страницы.
  • Рекомендации по оптимизации: По результатам тестов производительности PageSpeed ​​Insights предоставляет предложения по оптимизации страницы для ее улучшения. Эти рекомендации включают уменьшение размера изображения, упрощение CSS и JavaScript, включение кэширования браузера и уменьшение количества запросов к серверу.
  • Оценки: PSI присвоит странице оценку в зависимости от того, как она работает. Оценка колеблется от 0 до 100, где более высокие баллы означают лучшую производительность. Он рассчитывает оценку на основе результатов тестирования и рекомендаций по оптимизации.

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

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

Показатели PSI: лабораторные данные и полевые данные

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

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

Полевые данные, с другой стороны, дают более точное представление о том, как пользователи взаимодействуют с веб-сайтом в реальном мире. Эти данные собираются путем мониторинга браузеров пользователей и поступают из отчета об опыте использования Chrome (CrUX). Полевые данные дают ценную информацию о взаимодействии пользователя с веб-сайтом, например о том, какие страницы работают медленно или визуально нестабильны. Также рассматривается, как такие факторы, как сетевое подключение и тип устройства, влияют на взаимодействие с пользователем.

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

Начало работы с PageSpeed ​​Insights

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

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

Введите свой URL-адрес в текстовое поле и нажмите кнопку «Анализ».

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

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

Ключевые показатели, оцениваемые PageSpeed ​​Insights

Некоторое время назад Google представил обновление алгоритма Page Experience. Вместе с ним появился Core Web Vitals, набор показателей, которые измеряют реальный пользовательский опыт веб-сайта. Core Web Vitals включает LCP, FID и CLS. Эти показатели имеют решающее значение для определения того, насколько хорошо страница набрала баллы в тесте. Этот тест направлен на то, чтобы воспроизвести опыт пользователя при загрузке и использовании веб-сайта.

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

Подробное описание некоторых ключевых показателей

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

  • Первая отрисовка содержимого (FCP): Этот показатель измеряет время, необходимое для того, чтобы первое содержимое на странице стало видимым для пользователя. Быстрый FCP помогает гарантировать, что пользователям не придется долго ждать, чтобы увидеть что-то на экране после перехода на страницу.
  • Крупнейшая отрисовка содержимого (LCP): Этот показатель измеряет время, необходимое для того, чтобы самый большой элемент содержимого на странице стал полностью видимым для пользователя. Быстрый LCP имеет решающее значение для хорошего взаимодействия с пользователем, поскольку он указывает, когда страница, вероятно, будет полностью загружена и готова к использованию.
  • Совокупное смещение макета (CLS): Этот показатель измеряет стабильность страницы во время загрузки и взаимодействия с пользователем. Низкий показатель CLS указывает на то, что содержимое страницы не перемещается при загрузке, что обеспечивает лучший пользовательский опыт. CLS составляет 25% рейтингового веса.
  • Interaction to Next Paint (INP): Этот показатель измеряет реакцию страницы на взаимодействие с пользователем путем обновления экрана. Быстрый ввод-вывод помогает обеспечить удобство работы пользователя, гарантируя, что страница быстро реагирует на действия пользователя.
  • Задержка первого ввода (FID): Этот показатель измеряет время, в течение которого страница реагирует на первое взаимодействие с пользователем, например на нажатие кнопки или ввод текста. Быстрый FID помогает гарантировать, что страница быстро реагирует на пользовательский ввод, обеспечивая лучший пользовательский опыт.
  • Время до первого байта (TTFB): Этот показатель измеряет продолжительность с момента, когда браузер запрашивает страницу, до момента, когда клиент получает первый байт данных с сервера. TTFB является важным показателем для производительности веб-сайта и взаимодействия с пользователем, поскольку он указывает на любые узкие места в обработке на стороне сервера или на то, что серверу требуется слишком много времени для создания контента.
  • Общее время блокировки (TBT): Этот показатель рассчитывает время, в течение которого основной контент веб-сайта не отображается пользователям. Этот показатель имеет важное значение, поскольку отражает период, в течение которого пользователи не могут взаимодействовать с веб-сайтом или получать доступ к его содержимому, что влияет на взаимодействие с пользователем. TBT определяет 30% рейтингового балла.
Самые последние весовые коэффициенты, предоставленные Lighthouse для PageSpeed ​​Insights

PageSpeed ​​Insights также имеет индекс скорости

В дополнение к Core Web Vitals и этим дополнительным показателям PageSpeed ​​Insights также учитывает другие факторы при расчете оценок. Индекс скорости — это показатель, который измеряет воспринимаемую скорость загрузки веб-сайта. Он предлагает рейтинг, основанный на скорости, с которой содержимое веб-сайта становится видимым в процессе загрузки, от начала до конца.

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

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

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

Обзорный экран с оценками Web Vitals

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

Раздел Core Web Vitals Assessment

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

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

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

На экране «Диагностика» перечислены улучшения

Раздел «Диагностика» в PageSpeed ​​Insights предоставляет подробные сведения и советы по улучшению вашего веб-сайта. Здесь есть что найти, но давайте рассмотрим популярный в качестве примера. Одно из его предложений — Уменьшить влияние стороннего кода .

PSI показывает, какие скрипты блокируют загрузку вашей страницы.

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

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

Например, инструмент может порекомендовать свести к минимуму некритические сторонние скрипты или оптимизировать загрузку скриптов с помощью отложенных или асинхронных методов загрузки. Кроме того, размещение сторонних скриптов в сети доставки контента (CDN) для повышения скорости загрузки за счет уменьшения задержки.

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

Как улучшить оценку PageSpeed ​​Insights

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

  • Минимизируйте размер ресурсов: Размер ресурсов на вашем веб-сайте, таких как изображения и другие медиафайлы, может значительно повлиять на скорость и производительность вашего веб-сайта. Минимизация размера этих ресурсов может помочь сократить время, необходимое для загрузки вашего веб-сайта.
  • Оптимизация изображений: Оптимизация изображений — один из самых эффективных способов ускорить работу вашего сайта. Вы можете оптимизировать изображения, сжав их, уменьшив их размер и преобразовав в более оптимизированный формат.
  • Выберите лучший веб-хостинг: Качество вашего веб-хостинга играет решающую роль в скорости и надежности вашего веб-сайта. Хороший веб-хостинг должен обеспечивать быстрые и стабильные серверные ресурсы, подключение к сети и расположение сервера рядом с вашей целевой аудиторией (с CDN).
  • Используйте сеть доставки контента (CDN): CDN может помочь распределить ресурсы вашего веб-сайта между несколькими серверами, снизив нагрузку на ваш сервер и повысив производительность вашего веб-сайта.
  • Свернуть плагины: Плагины могут замедлить работу вашего веб-сайта и негативно повлиять на его работу. Минимизация плагинов и выбор легких, высококачественных плагинов может помочь улучшить скорость и производительность вашего сайта.
  • Использовать отложенную загрузку: Отложенная загрузка — это метод, при котором изображения и другие ресурсы загружаются только при необходимости, а не загружаются все сразу. Это может помочь сократить время, необходимое для загрузки вашего сайта.

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

Заключение

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

Эдвин Тунен

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

Далее!

  • Событие

    WordCamp Турин 2023

    14 — 15 апреля 2023 г. Команда Yoast посещает, организует и спонсирует WordCamp Torino 2023. Нажмите здесь, чтобы узнать, будем ли мы там, кто будет там и многое другое! Узнайте, где вы можете найти нас дальше »
  • SEO-вебинар

    Новостной вебинар Yoast SEO — 25 апреля 2023 г.

    25 апреля 2023 г. Наш глава SEO, Джоно Алдерсон, будет держать вас в курсе всего, что происходит в мире SEO и WordPress. Все вебинары Yoast SEO »

Как набрать 100% баллов в Google Page Speed ​​Test: WordPress Edition

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

Что ж, в этом посте я покажу вам точные шаги, предпринятые Tribe SEO, чтобы перейти от 37% Google PageSpeed ​​для мобильных устройств к идеальным 100%.

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

Я разделю все препятствия, которые были преодолены, на пять ключевых этапов, которые позволили нам получить 100% баллов Google Page Speed ​​для мобильных устройств:

  1. Обеспечить чистый код.
  2. Установите плагин Page Speed.
  3. Обновление веб-хостинга.
  4. Улучшить самую большую содержательную отрисовку.
  5. Улучшить время до интерактивности.

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

Итак, приступим.

Веха № 1: Обеспечьте чистоту кода

Осознаете вы это или нет, но ваши веб-страницы состоят из серии сценариев, которые влияют на скорость страницы вашего сайта.

Для простейших сайтов WordPress скрипты PHP и MySQL запускаются всякий раз, когда пользователь запрашивает веб-страницу с сервера.

Однако типичный сайт WordPress использует тему, множество плагинов и иногда конструктор страниц. Это приводит к тому, что обрабатывается гораздо больше сценариев — как на стороне сервера, например PHP и MySQL, так и на стороне браузера, например JavaScript и CSS.

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

Чтобы проиллюстрировать это, вот некоторые статистические данные, предоставленные Oxygen4fun.

Если мы посмотрим на установки по умолчанию для трех популярных компоновщиков страниц, мы увидим, что общий размер файлов JavaScript и CSS для Brizy Pro, Divi Builder и Elementor Pro составляет 1624 КБ, 1243 КБ и 966 КБ соответственно.

Итак, из трех Elementor Pro имеет наименьший размер файла, поэтому самый компактный код.

Но это ни в коем случае не самый компактный из всех компоновщиков страниц, потому что WP Bakery, Beaver Builder и Oxygen Builder имеют меньший размер файла 494 КБ, 59 КБ и 34 КБ соответственно.

Очевидно, что в Oxygen Builder самый компактный код CSS и JavaScript. Это около 4% от общего размера по сравнению с Elementor Pro и 2% по сравнению с Brizy Pro.

Это потому, что Oxygen Builder построен на предпосылке загрузки только того, что необходимо и когда это необходимо.

Oxygen Builder также создает очень чистый HTML-код. Другие конструкторы создают большое количество вложенных элементов div для простых элементов контента, таких как заголовки h2, что увеличивает объем кода.

В отличие от этого, Oxygen не создает ненужных элементов div.

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

Из-за простого кода и поддержки сообщества Facebook Tribe SEO выбрала Oxygen Builder для помощи в разработке нашего нового сайта.

Мы также тщательно выбирали плагины без наворотов. Например, WP Fluent Forms имеет очень маленький размер файла.

Веха № 2: Установите плагин скорости страницы

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

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

Однако наибольшее влияние оказали функции WP Rocket «Оптимизация файлов».

Но сначала давайте посмотрим, как работает домашняя страница Tribe SEO без установленного WP Rocket.

Показатель Google Page Speed ​​для мобильных устройств был заниженным — 37%. Google выделил «красные треугольники» для параметра «Максимальная содержательная отрисовка», «Время до интерактивности» и «Общее время блокировки». Итак, я знал, что эти области нуждаются в улучшении.

Мобильная оценка PageSpeed ​​Insights нуждается в улучшении


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

  • Отложить закадровые изображения
  • Устранить блокирующие ресурсы рендеринга (о которых позаботится WP Rocket)
  • Удалить неиспользуемый JavaScript.
Список возможностей – PageSpeed ​​Insights


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

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

Удалить неиспользуемый JavaScript – PageSpeed ​​Insights


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

Spotlight использовался для девяти видеороликов, все из которых содержали закадровые изображения в виде эскизов видео.

Итак, что было исправлено?

Исправление заключалось в том, чтобы отложить JavaScript трех файлов.

Это легко сделать в WP Rocket, но от меня требуется небольшое усилие.

Итак, вот что я сделал:

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

WP Rocket добавляет некоторые файлы JavaScript по умолчанию, а также позволяет добавлять собственные скрипты. Как видите, я добавил в список, среди прочего, Chatra, Convertbox и Spotlight.

Функция задержки выполнения JavaScript — WP Rocket


Но насколько помог WP Rocket?

Ну, это намного больше, чем просто отложенный JavaScript. Благодаря этому домашняя страница Tribe SEO увеличилась с 37% Google PageSpeed ​​для мобильных устройств до 97%. Что еще лучше, настройка конфигурации WP Rocket заняла всего около пяти минут.

WP Rocket – результаты до и после


Я хочу подчеркнуть, насколько важным было откладывать или откладывать JavaScript в нашем случае. Если я отключу функцию задержки JavaScript, наша оценка скорости страницы Google упадет до 50%.

Веха № 3: Обновление веб-хоста

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

Однако пару месяцев спустя Cloudways, еще одна уважаемая веб-хостинговая компания, предложила мне провести вебинар по Page Experience.

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

Сначала казалось, что производительность ниже, чем у Kinsta. Наш показатель Google PageSpeed ​​для мобильных устройств упал с 97% до 94%.

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

Итак, после некоторых колебаний, я вернулся в раздел «Оптимизация файлов» WP Rocket и поэкспериментировал, отключив «Оптимизировать доставку CSS».

Быстрая очистка кеша позже, проблема с CLS была устранена, и наш показатель скорости загрузки страниц Google для мобильных устройств подскочил с 97% с Kinsta до удовлетворительных 99% с Cloudways.


Я был удивлен, увидев, что смена веб-хостинга также улучшила показатель «Самая большая отрисовка содержимого» с 2,4 до 2,1 секунды.

Если вам интересно, какой пакет мы выбрали с Cloudways, это был Vultr High Frequency 2 ГБ оперативной памяти, который стоил 26 долларов в месяц, что было немного дешевле, чем то, что мы платили с Kinsta.

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

Было ясно, что метрики «Максимальная отрисовка контента» и «Время до интерактивности» были слабыми звеньями, поэтому я сосредоточился на них в последнем рывке.

Веха № 4. Улучшение самого крупного отрисовки содержимого

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

Итак, мы уже видели хороший прогресс LCP за счет задержки JavaScript и обновления нашего веб-хостинга, но что еще мы могли сделать?

Итак, элемент LCP для нашей домашней страницы — это изображение. Это SVG-изображение для нашей «SEO-горы».

Если вашим элементом LCP является изображение, вот некоторые вещи, которые нам помогли:

1. Предварительная загрузка изображения LCP

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

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

У меня уже был установлен бесплатный плагин Code Snippets на нашем сайте, и это позволило мне создать пользовательское правило домашней страницы для предварительной загрузки изображения горы SEO, используя атрибут ‘link rel=»preload»:


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

2. Обеспечьте сжатие на стороне сервера

Для домашней страницы Tribe SEO формат изображения нашего элемента LCP уже подходит, поскольку файлы SVG обычно имеют очень маленький размер для векторной графики. Размер его файла составляет 13 КБ.

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

Водопадная диаграмма GTmetrix


Однако размер файла изображения, загруженного с сервера, по-прежнему составляет 13 КБ, что указывает на то, что веб-сервер не сжимал его.

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

Я отправил запрос в службу поддержки веб-хостинга компании Cloudways, которая подтвердила, что сжатие SVG не включено на их серверах по умолчанию, но с тех пор они включили его для меня.

Конечным результатом стало то, что файл размером 13 КБ был уменьшен до 3,9КБ.

Это также помогло сжать все другие изображения SVG на нашем сайте. Например, наше изображение Learn SEO Fast весит 205 КБ без сжатия на стороне сервера и 42,7 КБ с ним.

3. Отключить отложенную загрузку для элемента LCP

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

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

Я не могу сказать наверняка, но есть достаточно теории по этому вопросу, чтобы предположить, что это возможно. Итак, на всякий случай я отключил SEO Mountain SVG от ленивой загрузки в WP Rocket.

Функция отложенной загрузки — WP Rocket


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

Итак, помогла ли предварительная загрузка нашего образа LCP, сжатие на стороне сервера и отключение отложенной загрузки для образа LCP улучшить наш показатель «Самая большая отрисовка содержимого»?

Да, получилось!

Мы улучшили LCP с 2,1 секунды до 1,8 секунды. И после тестирования выяснилось, что предварительная загрузка нашего LCP-изображения оказала наибольшее влияние на наш показатель «Самое большое содержание отрисовки».

Этого было недостаточно, чтобы поднять наш показатель Google Page Speed ​​для мобильных устройств до 100 %, но я был уверен, что приближаюсь к тому, что нам нужно.

Веха № 5: Сокращение времени до интерактивности

Время до интерактивности (TTI) не является ключевым фактором для Интернета, но влияет на общую оценку Google Page Speed ​​Insights. Он измеряет, сколько времени требуется странице, чтобы стать полностью интерактивной.

Не следует путать с задержкой первого ввода (FID), которая является ключевым элементом Web Vital. FID также измеряет интерактивность, но он фокусируется на первом взаимодействии пользователя со страницей, в то время как TTI фокусируется на том, когда вся веб-страница становится полностью интерактивной.

Теперь я провел небольшую детективную работу, используя калькулятор оценки Lighthouse, и понял, что мне нужно улучшить TTI с 2,5 до менее 2 секунд, чтобы иметь шанс получить 100%-ную оценку скорости мобильной страницы.

Но как я мог это сделать?

Что ж, с моей стороны было много проб и ошибок.

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

100% Мобильный рейтинг PageSpeed ​​Insights


Это привело к неуловимому показателю 100% Google Page Speed ​​для мобильных устройств! TTI также улучшилось с 2,5 до 1,7 секунды.

Но был ли причиной проблемы верхний или нижний колонтитул?

Восстановил шапку, а 100% оценка осталась.

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

Итак, я восстановил нижний колонтитул, но без изображения, и страница сохранила неуловимую 100%-ю оценку Google Page Speed ​​для мобильных устройств.

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

Я не веб-разработчик, и я изо всех сил пытался получить правильный формат фонового изображения. Итак, чтобы облегчить жизнь, я просто добавил его обратно в качестве стандартного изображения, и вуаля, WP Rocket смог проделать свою магию ленивой загрузки, и показатель скорости мобильной страницы Tribe SEO 100% сохранился.

Если вам интересно, вот видео, показывающее все шаги, упомянутые выше:

Обновление WP Rocket версии 3.9

С тех пор, как я в последний раз писал этот пост в блоге, Google перешел с Lighthouse v7 на v8 для расчета ваших оценок Google PageSpeed ​​Insights. Google ужесточил весовые коэффициенты, чтобы набрать 100 %.
На самом деле, если я вручную добавлю свои предыдущие оценки в текущий Калькулятор подсчета очков Lighthouse, мой 100-процентный результат понизится до 99 %.

Lighthouse v8

Но не бойтесь, без внесения изменений самостоятельно, простое обновление до WP Rocket v 3.9 восстановило мой идеальный 100% мобильный счет И без каких-либо действий с моей стороны. Улучшения были просто невероятными. На приведенной ниже диаграмме видно, что LCP улучшился на 22%, а TTI — на 29% .

WP Rocket v3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *