Speedtest page google: Make the Web Faster  |  Google Developers

Содержание

Как получить 100/100 в Google Page Speed Test Tool?

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

Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта «Monitor Backlinks».

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

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

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

Стартовые показатели подопытного сайта — 87/100.

В итоге, после применения определенных манипуляций, было получено следующие результаты:

О том, как удалось достичь таких показателей, читайте далее.

Как ускорить загрузку страниц?

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

Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).

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

Шаг № 1: Оптимизация изображений

Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:

  • Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.

  • Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с javascript и CSS.

Шаг № 2: Минимизация javascript, CSS и HTML

В примере, Google предлагает сократить объемы javascript и CSS файлов.

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

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

Дополнительно уменьшить размеры javascript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.

Оптимизировать javascript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание».

Детальнее об оптимизации javascript и CSS файлов вы узнаете по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

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

Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.

Вот результаты, полученные после минимизации javascript и CSS:

Шаг № 3: Использование кэш браузера

Для многих веб-мастеров этап использования кэширования браузера является самым сложным.

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

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

Вот визуализация того, как работает CDN:

На подопытном сайте все изображения, файлы javascript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.

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

Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.

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

Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.

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

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

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

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

Шаг № 4: Удаление блокирующих кодов

Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода javascript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.

Более детально смотрите по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force javascript» и установите ее на «Inline all CSS».

Шаг № 5: Включение сжатия

Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-

Шаг № 6: Оптимизация мобильного формата

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:

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

Вывод

В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта «Monitor Backlinks». В итоге была оптимизирована не только главная страница, но и все внутренние страницы.

Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:

  1. Использование CDN.

  2. Устранение блокирующих кодов. (Избегайте javascript в теле кодирования, лучше переместите его в низ файлов.)

  3. Оптимизация размеров и сжатие изображений.

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

Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.

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

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

Как получить 100/100 в Google Page Speed Test Tool

50% интернет-трафика уже сейчас приходится на долю мобильных устройств, и их пользователи ожидают, что страницы сайта будут загружаться практически мгновенно. Поэтому в этой статье мы рассмотрим, как при проверке скорости загрузки страниц бесплатным инструментом Google PageSpeed Insights Tool получить 100/100 баллов как для мобильной, так и для десктопной версии сайта.

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

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

Для применения некоторых советов требуются глубокие технические знания, для других — достаточно общего понимания принципов работы сайта. Все рекомендации подходят для использования в любой CMS системе.

Шаг #1: Оптимизируем изображения

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

  • Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG. Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
  • Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.

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

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

Шаг #2: Максимально сократите CSS и JavaScript код

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

может быть сокращен до:

Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs. На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google.

А для сайтов на WordPress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

Для многих сайтов пункт об использовании кэша браузера — настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.

CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

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

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

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

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

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

Шаг #4: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

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

Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.

Заключение

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

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

  1. Используйте сеть CDN (content delivery network).
  2. Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
  3. Оптимизируйте размер изображений и сожмите их.

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

(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)

Как исправить «Lighthouse returned error: NO_FCP.» при запуске Google Page Speed Test?

Я запускаю тест скорости страницы Google для https://www.oceanluxe.com.au и получаю следующее сообщение:

> Lighthouse returned error: NO_FCP. Something went wrong with the recording
> the trace over your page load. Please run the Lighthouse again. (NO_FCP)
> (NO_FCP)

Кто-нибудь может помочь?

Пробовал на разных серверах, пробовал разные URLs, а также http://oceanluxe.com.au

lighthouse

Поделиться

Источник


NJohns    

24 апреля 2019 в 09:27

5 ответов

Поделиться


Paweł Bystrzan    

28 апреля 2019 в 00:20


7

Я получил ту же ошибку. Это было потому, что страница не могла ничего напечатать на экране в течение оговоренного времени. Я просто напечатал что — то перед трудоемким кодом, и это исправило проблему.

Поделиться


Ajith P. Francis    

10 октября 2019 в 13:04


3

Вы можете попробовать эту работу вокруг, это помогло мне:

Сначала откройте «https://www.google.com/» или любой хороший сайт URL, а затем откройте свой сайт URL.
Это может показать две вкладки mobile и desktop. Вкладка mobile может выдавать ту же ошибку, поэтому следует нажать на вкладку Desktop, она может показать статус этого URL.

Поделиться


D. Pareek    

01 июля 2019 в 06:22


1

Две вещи могут помешать при использовании инструмента Маяк :

  • Используемые расширения
  • Cookies и файлы из кэша

Поэтому a ‘workaround’ здесь должен быть простым:

  • Очистка данных браузера:

    Windows, Linux или хром OS ➖28

    Мак ➖ ⌘ + Shift + Delete

  • Использование окна инкогнито :

    Windows, Linux или хром OS , Ctrl + Shift + N

    Мак ➖ ⌘ + Shift + N

Поделиться


Dzenis H.    

08 ноября 2019 в 18:21


1

При рассмотрении вопроса о начале загрузки страницы был введен 15-секундный тайм-аут. Если ваша страница не ответит или какой-либо контент в течение ~15 секунд, Lighthouse выйдет из игры. Это приведет к ошибке NO_FCP.

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

Поделиться


pramod_maddu    

08 июня 2020 в 13:13

Похожие вопросы:

Новый Google page speed insight

Кто-нибудь может помочь мне получить оптимизированные изображения, скрипты и файлы css с помощью google page-speed insight. Мой сайт имел оптимизированные изображения и другие оптимизированные вещи,…

Google page speed insight and lighthouse behavior on blocking css ressources

У меня есть приложение NextJs, размещенное сейчас на Zeit, которое я оптимизировал, чтобы оно могло работать в Google Page Speed Insight с оценкой 100/100. Чтобы пройти тест устранить блокировку…

как я могу исправить ошибку «Lighthouse returned error: NO_FCP.», возвращенную «PageSpeed Insights» на моем сайте «WordPress» после установки модуля кэша

Я только что опубликовал сайт WordPress с темой Hoteller, я выполняю тесты PageSpeed Insights, но когда я устанавливаю плагин управления кэшем (WP Fast Cache, WP Super Cache, W3 Total Cache) без…

Error Lighthouse returned error: generic::internal: APP::1: ненормальное завершение рендеринга, status = crashed exit_code = 1

При проверке скорости работы сайта здесь Он выдает эту ошибку: Lighthouse returned error: generic :: internal: APP :: 1: анормальное завершение рендеринга, status = crashed exit_code = 1 Пожалуйста,…

Ошибка Lighthouse в Google PageSpeed Insights — ERRORED_DOCUMENT_REQUEST

Я получаю следующую ошибку при запуске моего сайта через Google PageSpeed Insights. Но у меня нет никаких проблем с загрузкой сайта в браузере или при запуске Lighthouse в Google Chrome….

Сообщение об ошибке Google Page speed: Lighthouse returned error: FAILED_DOCUMENT_REQUE

Я получил это сообщение об ошибке от Google page speed test. Несколько месяцев назад он работал нормально. Маяк вернул ошибку: FAILED_DOCUMENT_REQUEST. Lighthouse не смог надежно загрузить…

Почему Google Speed insights & Google Lighthouse & Web.Dev показывают разные результаты аудита для одного и того же url?

Почему Google Speed insights & Google Lighthouse & Web.Dev показывает разные результаты аудита для одного и того же url? Хотя я использую инструменты, основанные на Lighthouse! ( Гугл…

ошибка на Google Page Speed Insights и не работает на одном веб-сайте, который я сделал,

Я попытался запустить Google Page Speed Insights и получил это сообщение об ошибке. Я искал и, кажется, не могу найти, как это исправить. Я также запускал Page Speed Insights с другими веб-сайтами,…

Ошибка: Ошибка протокола JSON API при запуске Lighthouse с сервером TestCafe

Я пытаюсь написать код, который раскрутит сервер TestCafe, войдет на аутентифицированную страницу, перейдет на нужную страницу, а затем выполнит Lighthouse против этой страницы. Вот мой файл…

Удалите неиспользуемый код Google Page Speed и другие ошибки

Google Page Speed сообщает мне здесь об ошибке, которую я не могу понять. Удалить неиспользуемый код я использую все javascript, что говорит Google Page Speed, на самом деле vendor.js-это основной…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для работы вам нужны лучшие инструменты SEO.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Избегайте зависимости содержимого страницы от внешних сайтов

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

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

Если вам нужен обмен в социальных сетях, поищите очень легкий плагин.Я использую Social Pug на некоторых своих сайтах, потому что это не влияет на скорость сайта. Бесплатная версия отлично подходит для большинства пользователей.

Другие интернет-сервисы, которые могут замедлять работу элементов на вашем сайте, включают рекламу и виджеты Amazon, а также большие баннеры Google. Если у вас есть Google AdSense, попробуйте использовать рекламу в статьях вместо больших баннеров и установите рекламный баланс примерно на 70-80 процентов.

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

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

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

3. Проверьте медленные файлы javascript

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

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

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

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

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

4. Установите W3 Total Cache

Есть много очень хороших плагинов кэширования для WordPress, включая WP Super Cache и WP Fastest Cache. Но я использую W3 Total Cache более десяти лет на всех своих сайтах.

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

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

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

5. Установите Autoptimize

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

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

Он уменьшает размер всех файлов CSS и Javascript, а затем объединяет их в один файл CSS и один файл Javascript. Затем эти два файла загружаются, чтобы не блокировать рендеринг.

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

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

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

6.Установите a3 Lazy Load

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам нужно использовать сеть доставки контента (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.Установите Autoptimize

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

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

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

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

Google Page Speed ​​Test — это важно?

В приведенной ниже информации я буду использовать фразу «потеря 10 баллов в концепции».На самом деле это не так просто, как оценка 1 к 1. Я имею в виду, что Google использует масштабированные критерии, и только они понимают используемую систему баллов. Однако мы определили, что когда вы помечаете предмет, вы не получаете все 10 баллов. Потеря очков за оцениваемый предмет снижает ваш счет.

Ну вот … «выпустить Каркен ….» — я имею в виду выпустить решение!

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

Включить сжатие — Мы редко видим, чтобы эта проблема была отмечена с помощью современных современных технологий.Если ваш веб-сайт был создан до 2010 года, ваша хостинговая компания не прислала вам неприятное письмо об обновлении, и вас не взламывали десятки раз, тогда ваш веб-сайт и хостинговая компания могут не поддерживать сжатие gzip. По сути, это просто причудливый способ сервера вашей веб-хостинговой компании сокращать контент, который должен быть доставлен посетителю, прежде чем он пройдет через Интернет и попадет на компьютер посетителя. Лучше всего сжать данные перед отправкой. Неспособность сервера или веб-сайта использовать сжатие приведет к пометке и потере 10 баллов в концепции.

Увеличьте время отклика сервера — OMG! Чего хочет Google? Что ж, Google это ясно в своей документации. Google хочет, чтобы сервер веб-хостинга ответил менее чем за 200 мс (или 0,2 секунды). Единственный способ контролировать это — купить самый дорогой пакет выделенного хостинга на планете. Это не то, что ваш веб-разработчик может контролировать, кроме запуска теста, который доказывает или опровергает, что вы получаете время отклика, которое Google оценивает и отмечает. Невозможность достичь 200 мс приводит к потере 10 баллов в концепции.

Используйте кеширование браузера — Хороший веб-сайт — это больше, чем просто набор текста и изображений. Однако, если мы вернемся к старым добрым временам простого HTML, это кеширование станет менее сложной задачей. Надеюсь, вы уже слышали термин «кэш». Если не беспокойтесь …. это просто. Ваш компьютер может хранить информацию на жестком диске или в памяти вашего компьютера для дальнейшего использования. Это избавит ваш компьютер от необходимости возвращаться к источнику для получения той же информации (это кэширование 101).Теперь хороший веб-сайт использует ряд инструментов, часто небольшие программы, называемые скриптами (точнее, JavaScripts). Сценарии — это не что иное, как программы, которые запускают процедуру, когда ее запускают для этого. Некоторые программы и ресурсы могут храниться (кешироваться) локально во время посещения веб-сайта, а некоторые — нет, поскольку они могут быть динамическими по своей природе. Те программы, которые могут быть сохранены, должны, а в некоторых случаях, разработчик может указать, как долго хранить такие ресурсы. Если все сделано правильно, это действие кеширования браузера.Если вы этого не сделаете, вас помечают как возможные ресурсы. Это приводит к потере 10 баллов в концепции. (Примечание: если ваш веб-сайт основан на CMS с купленной темой, у вас может не быть полного контроля над тем, как используются ресурсы. Когда и если это так, возможно, пришло время получить новый веб-сайт).

Сократите ресурсы — Я только что говорил о ресурсах выше, и мое заключительное примечание относится к этому элементу оценки. Нам нравится использовать плагины и надстройки на разрабатываемых нами веб-сайтах.Мы приобретаем и покупаем высококачественные плагины, в которых указано, что они зарыли свои ресурсы. Хорошо … что это значит? Хорошие программисты пишут кучу комментариев внутри своего кода, чтобы облегчить им отладку в дальнейшем. Комментирование замечательно во время разработки и производства, однако, если вы живете комментариями внутри вашего кода, который публикуется для публики, вы добавляете ненужный вес своему инструменту (программе). Итак, Google предлагает минимизировать этот код, чтобы уменьшить вес ресурса.Удачи! Если это не ваш код или вы не программист, вам, скорее всего, не удастся минимизировать ресурс. Большинство веб-сайтов помечаются за это и теряют 10 баллов за концепцию.

Оптимизировать изображения — Наконец-то у нас есть немного больше контроля! Это просто …. если у вас есть фотография размером 5 x 5 и она используется на веб-сайте в области 2 x 2, вы будете отмечены флажком. Лучше всего использовать изображения, близкие к размеру, который вам действительно нужен.Все, что больше, будет помечено, что приведет к потере 10 баллов за концепцию. Кроме того, вы также можете снизить качество изображения с помощью такого инструмента, как Photoshop, чтобы уменьшить размер файла.

Оптимизация доставки CSS — это еще одна проблема с ресурсами. Что такое CSS? Каскадные таблицы стилей — это то, что означает CSS. По сути, CSS помогает уменьшить размер файлов на страницах веб-сайта, помещая правила форматирования в один документ (лист стилей), на который могут ссылаться все страницы. Это ускоряет рендеринг (отображение) страницы.Иногда разработчики заимствуют таблицы стилей, которые хранятся в других местах. Почему? Что ж, в случае надстроек и надстроек у вас может не быть выбора. Разработчик подключаемого модуля может сохранять контроль над ресурсом CSS, чтобы сделать его более эффективным для обновления, отладки и, в некоторых случаях, для повышения производительности программы (надстройки, надстройки или приложения). Если у вас есть ресурсы, которые полагаются на внешние файлы, вы потеряете 10 баллов за концепцию.

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

JavaScript с блокировкой рендеринга — JavaScript — отличный язык программирования. Есть много версий этого языка. Часто, когда вы добавляете новый ресурс в свою систему, он может поставляться с автономной версией JavaScript, или программа может полагаться на внешний файл.Если программа использует файлы, внешние по отношению к вашему сайту, вы будете отмечены. Это не значит, что это плохо, и в большинстве случаев, если ваш дизайнер / разработчик не написал исходный код, вы мало что можете с этим поделать. Если у вас их много, вы можете подумать о поиске надстроек на замену, посмотрев, что, если что-то делает для вас инструмент. Неспособность решить проблему приводит к потере 10 баллов в концепции.

Используйте асинхронные скрипты — Мы часто рекомендуем клиентам добавлять мини-скрипты на свои веб-сайты, чтобы помочь с Live Chat, Optin-Forms, отслеживанием Facebook и Google Analytics.Для большинства этих инструментов мы рекомендуем использовать технологии, которые могут выполнять свою работу в фоновом режиме и не нуждаются в полной загрузке страницы для рендеринга (отображения). Программы, которые могут продолжать загружаться и не влиять на отображение страницы, являются асинхронными. Те программы, которые не могут этого сделать, помечаются и приводят к потере 10 баллов за концепцию.

Заключение

Хорошо … Имеет ли это какое-нибудь значение? Там, где есть место и возможность оптимизировать и исправлять, вы должны. Наверняка все упомянутое, если бы вы были отмечены для элементов, действительно решило бы проблему.У нас есть клиент, который отмечен по 8 из 10 пунктов. Их скорость страницы равна 20. 20 — это F, верно? Неправильный! Этот сайт загружается за 4 секунды. ЕСЛИ мы смогли обратиться к 8 пунктам, которые, как мы определили, не можем, веб-сайт может загрузиться за 3 секунды. Этот веб-сайт работает фантастически!

Итак, впадать в депрессию из-за результатов Google Page Test не стоит головной боли. Конечно, отчет следует просмотреть, но настоящий тест скорости следует проводить с использованием коммерческого инструмента, такого как инструменты.pingdom.com предоставляет. Этот инструмент позволит вам узнать, насколько быстро загружается ваш сайт, так как это действительно важно для SEO. Инструмент предоставляет вам аналогичную информацию, которая указывает, где вы и ваш разработчик можете улучшить свою работу. (примечание: может быть ключевым словом в этом предложении).

Обратите внимание, я сказал, что это важно для SEO, это еще одна сложная тема. Как производительность Page Speed ​​влияет на SEO? Может, но вы должны досконально понимать, как работает SEO, и все 250 критериев, которые оцениваются.Этот пост я создам в другой день.

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

Как запустить тест скорости страницы Google — Blue Wolf Digital

Вы также научитесь анализировать показатели, связанные со скоростью вашей страницы, также известные как Core Web Vitals:

  • First Contentful Paint (FCP): этот показатель относится к странице первый бит времени загрузки. Метрика представляет собой первую обратную связь для пользователя, которая загрузилась должным образом.

  • Задержка первого ввода (FID): этот показатель измеряет интерактивность страницы; FIP представляет собой время с момента первого взаимодействия пользователя с вашим сайтом до момента, когда браузер может надлежащим образом отреагировать на это взаимодействие.

  • Совокупный сдвиг макета (CLS): этот показатель выделяет случаи, когда макет страницы или визуальная стабильность страницы неожиданно смещаются. Если страница сдвигается, пользователи могут случайно нажать не ту кнопку на странице.

Кроме того, данные, собранные в вашем отчете, разбиты на два отдельных параметра для упрощения использования:

  • Параметр 1: Время до загрузки верхнего сгиба.

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

Оценка Google PageSpeed ​​Insights варьируется от 0 до 100 баллов. Очевидно, что если вы наберете 100%, ваш сайт будет быстро . Поэтому всегда старайтесь стремиться к более высокому баллу, поскольку это указывает на то, что страница работает хорошо.

Как повысить скорость вашей страницы Google

Чтобы достичь высоких результатов в Google PageSpeed ​​Insights, вы можете рассмотреть несколько моментов:

1. Ограничение перенаправления страниц

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

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

2. Сжатие элементов страницы

Конечно, вы хотите, чтобы размер ваших файлов был как можно меньше, не жертвуя при этом их качеством.Чем меньше ваши файлы, тем быстрее они загружаются. Сюда входят файлы HTML, CSS, JavaScript, обычный текст и XML.

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

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

3. Приоритет содержимого верхней части страницы

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

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

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

4. Ускорение времени ответа сервера

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

Есть несколько элементов, которые влияют на время отклика сервера:

  • Медленные запросы к базе данных

  • Медленная логика приложения

  • Медленная маршрутизация

  • Истощение ресурсов ЦП

  • Изображения большого размера

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

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

5. Регулярно отслеживайте производительность

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

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

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

Готовы получить лучшие результаты для следующего теста скорости страницы Google?

Теперь, когда у вас есть пара хитростей в рукаве, самое время найти им хорошее применение. Помните, что повышение скорости загрузки вашей страницы требует времени. Было бы полезно разработать SMART-цель, прежде чем стремиться к скорости загрузки 100% или менее четырех секунд.

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

Часто задаваемые вопросы

Влияет ли тест скорости страницы Google на рейтинг моего сайта в Google?

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

Как запустить тест скорости страницы Google?

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

Что делать, если у меня низкий показатель скорости страницы Google?

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

Хотите, чтобы мы помогли вам повысить скорость загрузки страниц Google?

Щелкните здесь, чтобы назначить бесплатную 20-минутную консультацию.

Скорость тестовой страницы для обновления страницы Google

Производительность веб-сайта — важный аспект поддержания высокого рейтинга в выдаче. Регулярная проверка производительности вашего сайта, особенно информации о скорости вашей страницы, является обязательной для любого оптимизатора поисковых систем. Хороший пользовательский интерфейс становится все более и более важным для поисковых систем, особенно Google, поскольку он готовится к обновлению Page Experience Update, которое выйдет в мае 2021 года.

СКАЧАТЬ БЕСПЛАТНО ВЕБИНАР CORE WEB VITALS

Общие сведения о Core Web Vitals, связанных с тестами скорости страницы

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

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

  • LCP — Самый большой Contentful Paint относится к моменту, когда основное содержимое загружается на страницу
  • CLS — Накопительный сдвиг макета — это нестабильность макета, когда контент смещается вверх или вниз, и вы неожиданно взаимодействуете с частью сайта, которую не имели в виду.
  • FID — First Input Delay означает задержку, когда ваша страница загружается, но вы не можете сразу с ней взаимодействовать

В этом сообщении вы можете узнать больше об оценке и исправлении Core Web Vitals.

Ресурсы для тестирования скорости веб-сайта для вашего бизнеса

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

BrightEdge Instant. Вы можете использовать BrightEdge Instant для оценки скорости загрузки страниц и получения информации о показателях Core Web Vital. Instant предоставляет действенные и предписывающие рекомендации по повышению скорости загрузки наиболее важных страниц вашего сайта. Вы можете запустить десять URL-адресов для проверки скорости веб-сайта с помощью Instant, что ускоряет задачу по сравнению с вводом одного URL-адреса за раз с помощью Lighthouse.

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

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

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

Вес каждой метрики производительности, которую учитывает Lighthouse 6, включает:

  • Первая насыщенная краска — 15%
  • Индекс скорости — 15%
  • Краска с наибольшим содержанием — 25%
  • Время до взаимодействия — 15%
  • Общее время блокировки 25%
  • Совокупный сдвиг макета — 5%

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

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

Повышение скорости загрузки страницы

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

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

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

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

SEO: тест скорости страницы Google

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

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

Essential Definition

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

Теперь давайте посмотрим, насколько важна быстрая загрузка веб-сайта и как тест Google Page Speed ​​Test может помочь вам определить, как увеличить скорость вашего сайта.

Важность быстрой загрузки веб-сайта

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

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

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

Поскольку все эти аспекты SEO тесно связаны со скоростью загрузки страницы, обязательно запустить тест Google Page Speed, чтобы убедиться, что ваш веб-сайт быстро загружается.

Рекомендации по скорости страницы

Существует ряд факторов, которые могут вызывать медленную загрузку вашего веб-сайта.Когда вы запустите Google Page Speed ​​Test для своего веб-сайта, вам будет предоставлен список предлагаемых исправлений, которые помогут вашей странице загружаться быстрее. Они будут отличаться для каждого веб-сайта, но некоторые аспекты, которые следует учитывать, приведены ниже:

  • Кодирование: Низкая скорость загрузки страницы может быть связана с проблемами кодирования. Сократите кодирование JavaScript, CSS и HTML, чтобы повысить скорость загрузки страницы вашего веб-сайта. Также рассмотрите возможность внедрения ускоренных мобильных страниц.
  • Оптимизация изображений: Другая распространенная проблема — слишком большие изображения на вашем сайте.Убедитесь, что ваши изображения правильно отформатированы, и сжимайте их, чтобы ускорить загрузку страницы.
  • Видимое содержимое: Содержимое над сгибом очень важно для скорости вашего веб-сайта. Убедитесь, что важный контент размещен в верхней части вашего веб-сайта, чтобы ускорить загрузку.
  • Избегайте переадресации: Хотя перенаправления страниц, такие как переадресация 301, иногда необходимы, они могут вызвать проблемы со скоростью загрузки страницы. Это связано с тем, как перенаправления работают по своей сути — когда вы открываете веб-сайт, который перенаправлен на новую страницу, серверу требуется больше времени для загрузки страницы.
  • Время отклика сервера: Есть несколько факторов, которые влияют на время отклика сервера. Трафик веб-сайта, использование ресурсов, программное обеспечение и ваша хостинговая компания могут сыграть важную роль в том, сколько времени потребуется вашему серверу для ответа на запрос страницы.

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

Как выполнить тест скорости загрузки страницы Google

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

  1. Сначала введите «Pagespeed Insights» в Google. Нажмите на первый результат, который будет гласить «PageSpeed ​​Insights — Google Developers».
  2. Отсюда вы увидите экран и панель с запросом URL веб-страницы.Вы можете перейти на главную страницу своего сайта или на определенную страницу, которая загружается медленно. Введите URL-адрес и нажмите «анализировать».
  3. 3. Затем Google быстро проанализирует страницу, прежде чем предоставить результаты, которые упорядочены в порядке, который они считают наиболее приоритетным. Кроме того, Google перечисляет исправления для проблем со скоростью мобильных и настольных компьютеров, а также общую оценку скорости.
  4. 4. Внесите соответствующие исправления. Конечно, для многих из этих исправлений может потребоваться разработчик, поэтому вам может потребоваться найти кого-то, кто поможет вам внести необходимые изменения.Чтобы получить представление о том, как отображаются предложения, см. Изображение ниже:

    Отслеживайте трафик вашего веб-сайта с помощью StatCounter

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

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

    Поделиться статьей

Google PageSpeed ​​Checker → Инструменты проверки SEO

Инструмент тестирования Google PageSpeed.

Обновление: средство проверки Google PageSpeed ​​теперь работает на основе последней версии Google API , расширяя возможности отчета Chrome User Experience Report и данных из Google Lighthouse.

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

Выводы, которые вы можете ожидать от этого инструмента:

  • Оценка скорости страницы для мобильных и настольных компьютеров (шкала от 0 до 100)
  • Рекомендации для конкретных устройств, которые помогут вам повысить показатель скорости загрузки страницы.
  • Отзыв о конкретном устройстве, чтобы показать вам, какие части вашего веб-сайта успешно прошли тестирование.
  • Данные лаборатории Google Lighthouse.
  • Отчет об удобстве использования Chrome.

Chrome User Experience

Данные Chrome User Experience собираются реальными пользователями Chrome.

  • First Contentful Paint (Chrome)
  • First Input Delay (отчет Chrome UX)

Дополнительные сведения о данных Chrome User Experience: https: // developers.google.com/web/tools/chrome-user-experience-report

Google Lighthouse.

  • Первая полноценная отрисовка
  • Первая значимая отрисовка
  • Индекс скорости
  • Время до взаимодействия
  • Общее время блокировки

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

Скорость страницы важна, потому что веб-сайт с быстрой загрузкой улучшает общее впечатление пользователя, снижает показатель отказов и повышает коэффициент конверсии. По этим причинам Google также решил сделать скорость страницы частью своего алгоритма ранжирования.Еще в 2010 году Google официально объявил скорость страницы как фактор ранжирования SEO.

Каков хороший показатель Google PageSpeed?

хорошо Google PageSpeed ​​считается равным 90 или выше. Оценка скорости страницы от 89 до 50 квалифицируется как Требуется работа , а оценка ниже 49 получает метку Плохо возвращает инструмент анализа скорости страниц Google и API. Эти оценки довольно стабильны из-за методологии, используемой Google для расчета этих чисел.

Как улучшить время загрузки вашего сайта?

  • Устранение ресурсов, блокирующих рендеринг.
  • Использовать кеширование браузера.
  • Увеличьте время отклика сервера.
  • Показывать изображения в форматах следующего поколения.
  • Правильный размер изображений.
  • Отложить закадровые изображения / ленивую загрузку закадровых изображений.
  • Используйте видеоформаты для анимированного содержимого.
  • Включить сжатие.
  • Минимизируйте CSS, JavaScript и HTML.
  • Удалите неиспользуемые JavaScript и CSS.
  • Уменьшите время выполнения JavaScript.
  • Сведите к минимуму стороннее использование.
  • Сохраняйте низкое количество запросов и небольшие объемы переводов.
  • Избегайте переадресации нескольких страниц.
  • Минимизируйте работу основного потока.
  • Избегайте чрезмерного размера DOM.
  • Используйте кеширование, чтобы можно было ограничить количество запросов браузера.
  • Оптимизируйте изображения для Интернета, уменьшите размер и сохраните качество.

Оценка Google PageSpeed ​​объяснена

Оценка Google PageSpeed ​​уникальна из-за того, как Google ее вычисляет.Большинство инструментов смотрят на общее время загрузки веб-страницы, и из-за колебаний и количества внешних факторов это дает вам только моментальный снимок для определенного времени. При измерении скорости сайта с помощью таких основных инструментов, как WebPagetest и Pingdom, вы будете видеть разное время загрузки почти каждый раз при выполнении теста.

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

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

Обзор правил скорости страницы Google:

  • Избегать перенаправления целевой страницы
  • Включить сжатие
  • Увеличить время отклика сервера
  • Использовать кеширование браузера
  • Сократить ресурсы
  • Оптимизировать изображения
  • Оптимизировать доставку CSS
  • Приоритет видимости контент
  • Убрать блокировку рендеринга JavaScript
  • Использовать асинхронные скрипты

Внешние ресурсы:

Пожалуйста, поделитесь ❤

Аудит Описание Вес
Первая полная краска (FCP) Первый момент времени, когда пользователь может увидеть любое содержимое страницы на экране. 15%
Индекс скорости (SI) Визуальный прогресс загрузки страницы и скорость отрисовки содержимого. 15%
Краска с наибольшим содержанием (LCP) Время, пока самый большой элемент содержимого не станет полностью видимым на экране. 25%
Время до взаимодействия (TTI) Время, необходимое для того, чтобы страница стала полностью интерактивной. 15%
Общее время блокировки (TBT) Степень неинтерактивности страницы до тех пор, пока она не станет надежно интерактивной. 25%
Накопительное смещение макета (CLS) Как часто пользователь сталкивается с неожиданными сдвигами макета. 5%