Проверить сайт гугл девелоперс – Автоматизируем получение данных о скорости загрузки сайта из Google PageSpeed Insights [шаблон]

как ускорить загрузку страниц сайта на любых устройствах

Реальная скорость загрузки и рейтинг PageSpeed

Важность скорости загрузки

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

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

В Google провели исследование, обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.

В январе 2018 было объявлено, что с июля данного года Google вводит page speed в качестве фактора ранжирования для мобильного поиска. Это связано с упомянутым исследованием, в котором ясно показано: скорость имеет значение. Здесь Google рекомендует разработчикам заняться оптимизацией своих сайтов и предлагает для анализа их эффективности использовать инструменты:

• Chrome User Experience Report. Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
• Lighthouse. Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
• PageSpeed Insights. Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.

Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.

О чём говорит Google Pagespeed Insights

Всё говорит о том, что скорость загрузки сайта — важнейший показатель, влияющий и на лояльность пользователей, и на позиции в выдаче. Как в улучшении данной метрики помогут Google Insights?

Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.

• Данный инструмент не измеряет скорость загрузки страниц.
• Показатель Page Insights не влияет на ранжирование.
• Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.

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

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

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

А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.

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

• Pingdom Tools. Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
• WebPageTest. Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
• GTmetrix. Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.

Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье.

Сквозная аналитика

Подробные отчеты от вложений до прибыли по каждому рекламному каналу

• Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
• Получайте данные из CRM и рекламных площадок
• Стройте воронку от показов рекламы до сделок
• Более 30 показателей эффективности в отчетах

Как ускорить загрузку своего сайта на любых устройствах

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

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

Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:

• Предварительная оптимизация

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

Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.

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

• Подберите формат

В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

Сложно сказать, правы ли здесь авторы, так как PNG входит в перечень наиболее оптимизированных для веб форматов. У него, в отличие от JPEG, имеется возможность загрузки изображений неправильной формы без необходимости дорисовки до прямоугольника. Если нужна круглая кнопка, JPEG добавит к кругу непрозрачные уголки, чтобы изображение вышло квадратным. Загружая PNG, вы оставляете только ту графику, которую хотели, а остальное пространство между вашим изображением и прямоугольным контейнером остаётся прозрачным.

Старайтесь прибегать к JPEG для размещения фотографий. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.

• Сжимайте изображения

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

Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

• Используйте атрибуты с правильным размером

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

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

Оптимизация JavaScript и CSS

Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

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

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

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

Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor. В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.

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

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

• Сокращение JavaScript

Для такой задачи подойдёт инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.

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

• Загрузка контента из Google CDN

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

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

GZIP сжатие

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

Существует 2 типа сжатия gzip: динамическое и статическое.

• Динамическое сжатие

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

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

• Статическое сжатие

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

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

Использование кеша

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

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

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

С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control.

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

Стоит ли пользоваться Google Pagespeed Insights

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

Сквозная аналитика

Подробные отчеты от вложений до прибыли по каждому рекламному каналу

• Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
• Получайте данные из CRM и рекламных площадок
• Стройте воронку от показов рекламы до сделок
• Более 30 показателей эффективности в отчетах

Следуя рекомендациям Pagespeed Insights, уделяйте внимание главным методам оптимизации:

• Оптимизация JavaScript и CSS;
• Оптимизация изображений;
• Сжатие gzip;
• Кеширование в браузере.

Проверить скорость работы сайта, google pagespeed insights

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

Ссылка на ресурс:

https://developers.google.com/speed/pagespeed/insights/

Результат анализа скорости загрузки сайта выглядит так:

После проведения анализа скорости загрузки сайта чаще всего можно получить следующие рекомендации:

Optimize images

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

Enable Compression

Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.

Leverage browser caching

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

Eliminate render-blocking JavaScript and CSS in above-the-fold content

JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.

Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>

Minify CSS

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

 

Minify HTML

Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.

 

Avoid landing page redirects

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

 

Prioritize visible content

В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.

Reduce server response time

Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.

 

 

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

 

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

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

 

Читайте про то как включить кэширование для Apache или для Nginx

100 из 100 в Google PageSpeed Insights (Баг или фича)? / Habr

Многие из Вас наверное пользовались замечательным сервисом от Google: PageSpeed Insights? Хотите получить заветные 100 из 100?

Картинка для привлечения внимания

А дело-то за маленьким.

Итак, результаты моего теста.

Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):

• скорость для мобильных — 79/100;
• скорость для компьютера — 93/100;

Неплохо да?

Жалуется на:

Исправьте обязательно:
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 3. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Делаем небольшие махинации. Переносим стили из файла в код:
Было:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <title></title>  
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

Стало:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
    /* и другие стили */
  </style>
  <title></title>  
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
 

И — ура! — у нас результаты выше (ссылка на сайт):

• скорость для мобильных — 99/100;
• скорость для компьютера — 99/100;

И жалуется только на:

Исправьте по возможности:
Сократите HTML
Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.

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

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

Сколько они весили в файле, столько же весят и в коде!

А теперь самый главный вопрос: Баг или фича?
Спасибо!

UPD 07.09.2015 16:55: Раздул стили на сайте (+сжал css) до 5 мегабайт, а результат тот же даже из-за сжатия лучше 100 из 100.

Как получить 100% в Google Page Speed Insights

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

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

Если вы проверите ваш сайт через Google’s PageSpeed Insights, согласно которому будет 100%, значит он достаточно быстрый. Google предоставит предпочтительное решение проблемы, чтобы веб-сайт загружался быстрее. Чем быстрее загружается сайт, тем ниже показатель отказов. Если сайт быстрый, у вас есть больше шансов ранжироваться выше в поисковике Google среди медленных сайтов, приводящих к высоким показателям отказов. К счастью, Google предоставляет бесплатный инструмент, позволяющий узнать, что необходимо исправить. Однако они не дают точных инструкций, как добиться 100%. Здесь представлены способы поднятия уровня сайта в Google’s Page Speed Insights до 100%.

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

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

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

Недавно Backlinko (Сайт Брайана Дина) провели исследование, где было проанализировано более миллиона страниц результатов поисковой системы (SERPs) в Google.

Полная статья-исследование доступна по ссылке (на английском).

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

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

В Google позиции, занимающие самое высокое положение, были одинаковыми.

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

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

Аналогично показатель отказов был затронут в исследовании Брайна Дина:

Фактор влияния скорости сайта влияет на показатель отказов — и опосредованно — влияет на позицию.

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

Это значит, что если страница грузится 10 секунд, то кто-то покинет сайт ожидая прогрузки с вероятностью более, чем в 120%! Посмотрите на график от Backlinko сверху, согласно ему все ранжированные сайты на первой странице Google загружают страницы менее 3 секунд. И согласно последнему отчету Google, большинство веб-сайтов крайне медленные.

Среднее время загрузки большинства сайтов составляет 8 секунд, а может превышать и 11 в сфере высокотехнологичной индустрии. Однако самый лучший результат теста был менее 3 секунд. Практически у всех нет сигнала, когда речь заходит о быстрой загрузке сайта. Если вы хотите попасть на первую страницу поисковика Google, то ваш сайт должен грузиться менее чем за 3 секунды. Исследование Backlinko показало, что тестирование от Google еще больше укрепило свои позиции.

В другом исследовании от Big Commerce были выявлены коэффициенты конверсии торговых онлайн-площадок, которые варьировались в среднем в 1-2%. Portent использовали последние данные для собственного исследования. Они выяснили, что ускорение загрузки страницы с двух секунд до одной дает рост дохода за просмотр страницы на 100%. Поднятие скорости до двух секунд может удвоить просмотры и доход.

Что же заставляет загружаться страницу медленно?

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

Размер и вес страницы часто измеряется байтами, то есть байты это общий размер для измерения веб-страницы. Согласно сравнительным тестам от Google идеальный размер для страницы составляет менее 500 КБ.

Одна из концепций из отчета Google выражается во впечатляющей цитате: «Так или иначе, быстрее – значит лучше, а меньше — значит больше». Это достаточно веский аргумент, если учитывать, что 70% страниц превышает 1МБ, 36% больше 2МБ, и 12% — более 4МБ. Google выяснил, что страница весом всего в 1,49МБ, что сопоставимо с размером среднего HD-изображения, требует 7 секунд для загрузки страницы. Во время исследования они даже обнаружили веб-страницу с изображениями, каждое из которых в среднем занимало 16 МБ. Google дает понять, что у нас есть возможность улучшить наши сайты.

Как проверить полную и мобильную версию сайта

Осознание того, медленные веб-сайты «убивают» конверсию – только начало. Основные проблемы, лежащие на поверхности – только первый шаг. Большинство сайтов работает медленно из-за больших изображений, но это не обязательно касается всех. Чтобы внести какие-либо поправки для повышения статуса до 100% в Page Speed Insights необходимо точно знать, что именно вызывает медленную загрузку. Для начала работы нужно открыть инструмент Page Speed Insights и ввести адрес своего сайта.

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

Чтобы добиться 100%, необходимо проработать все пункты из Page Speed Insights. Сначала мы хотим начать с верхних пунктов. Затем следует протестировать мобильную версию нашего сайта отдельно. Для этого можно использовать тестировщик мобильной версии от Page Speed Insights, однако, Google выпустил обновленную и более точную версию для проверки. Для этого нужно перейти на сайт Test My Site и ввести адрес своего сайта.

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

Помните: рекомендуемая скорость загрузки – 3 секунды или меньше.

4 способа привести показатели к идеальным в Page Speed Insights

Заполучить заветные 100% в Google Page Speed Insights сложная задача, не решающаяся в одночасье, придется потратить много времени, работая над решением ряда проблем.

Поможет в этом информация на https://www.youtube.com/watch?v=youstCMC8oQ

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

1. Сжатие изображений.

Самая большая причина медленной загрузки сайта – это большие изображения. После того, как я исправил эту проблему, я выявил её огромное влияние на скорость. Сжатие изображений одно из лучших способов для оптимизации. Вы сэкономите в среднем на 50% или более на размере изображения, используя простые инструменты сжатия. Если вы работаете на WordPress, то лучшим способом сделать это, не тратя много времени, будет использование плагина. Мой любимый плагин для сжатия изображений WP Smush:

У WP Smush есть множество отличных бесплатных инструментов. Можно сжать изображения автоматически, добавив плагин. Он сканирует медиа-библиотеку на WordPress и находит изображения для сжатия. Можно сжимать тонны изображения, для этого их нужно загрузить сразу в плагин. Единовременно сжимается до 50 изображений. В настройках можно включить автоматическое сжатие изображений при загрузке.

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

Если вы не знакомы с плагинами или не хотите ими пользоваться, то можно обратиться к другим бесплатным инструментам онлайн: Compress JPEG, Optimizilla и другие. Они быстрые и бесплатные, позволяют сжать до 20 изображений за один раз. Например, Optimizilla уменьшил размер файла за 2 секунды на 68% практически без ухудшения качества.

2. Используйте кеширование браузера.

Кеширование браузера оказывает большое влияние на скорость загрузки страницы. Для загрузки ресурсов сайта потребуется больших усилий. Нужно прогрузить каждого элемента и изображения на странице, а также тяжелый HTML и кодинг. Каждый раз, когда кто-то загружает ваш сайт, этот процесс происходит снова и снова, что слишком долго. В этом случае поможет кэширование браузера. Это работает путем «запоминания» ранее загруженной информации, поэтому не нужно перезагружать её каждый при каждом посещении. Когда посетитель переходит на другую страницу вашего сайта, все основные данные (логотипы и футер) больше не нужно загружать, что значительно увеличит скорость. Итак, как это сделать? К счастью, не нужно быть профессионалом в кодировании, поскольку можно воспользоваться плагином W3 Total Cache для сайтов на WordPress. У него более миллиона активных установок, его считают самым популярным плагином для кэширования.

Если верить W3 Tota lCache, он способен увеличить общую производительность сайта как минимум в 10 раз. Кроме того, утверждают, что плагин поможет добиться более высоких результатов в PageSpeed от Google. Инструмент также поможет уменьшить HTML, который будет загружаться в следующий раз, JavaScript и CSS, давая до 80% экономии пропускной способности. Использовать W3 Total Cache можно сегодня, даже если у вас нет опыта в кодировании.

3. Уменьшите свой HTML-код.

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

Вы можете убить одним выстрелом сразу двух зайцев. Поскольку Google Page Speed Insights рекомендует минимизировать HTML, JavaScript и CSS, нужно включить настройки «HTML» и «InlineJavaScript». Самое замечательное в этом плагине то, что он расскажет вам, какое действие подходит для каждого параметра. Если вы не знакомы с тем, как работают эти параметры, выберете следующие параметры. Минимизация кодирования окажет мгновенное влияние на отчет Page Speed Insights.

4. Выполните АМР.

AMP это сокращение от Accelerated Mobile Pages (ускоренные мобильные страницы). Это проект от Google, предназначенный для ускорения загрузки страниц в мобильной версии. Принцип его работы заключается в создании формата с открытым кодом, удаляются тонны ненужного контента, заставляя страницы прогружаться почти мгновенно. Пример страницы с AMP:

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

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

Google AMP Viewer Tinder UX для контента.Данная функция работу пользователей на мобильных устройствах. Прошли те времена, когда приходилось ждать 10 секунд загрузки сайта и еще 10 секунд, чтобы вернуться с результатам поиска, а потом еще 10 секунд для загрузки следующего сайта. Вы можете получить доступ к содержимому нескольких статей, не нажимая кнопку «Назад». Это чрезвычайно эффективно для ускорения вашего сайта и снижения вероятности того, что кто-то уйдет. Множество компаний используют AMP.

Компания WIRED начала внедрять AMP, чтобы лучше работать с клиентами:

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

Инвестирование в AMP оказало большое влияние на компанию. Коэффициент кликабельности из обычного поиска сайта возрос на 25%, а в новостях обнаружили 63% увеличение на рекламе.

Gizmodo AMP и отметили значительные улучшения на своей мобильной версии. Они получили более 100 тысяч посещений страниц каждый день из-за скорости загрузки, которая стала в 3 раза быстрее, чем стандартные мобильные страницы. Конверсия также возросла на 50%. Исходя из этого, можно с уверенностью сказать, что АМР играет огромную роль в повышении Google Page Speed Insights.

Менее опытные пользователи могут воспользоваться плагином для WordPress — AMPforWP. У него около 80000 активных установок, постоянная поддержка и обновления. Плагин включает в себя конструктор страниц, который позволяет легко перетаскивать элементы страниц. Это один из самых простых способов создания AMP-контента. Все, что вам нужно сделать, это загрузить и установить плагин на панели инструментов WordPress и активировать его. Оттуда вы можете использовать конструктор страниц для каждого нового поста, которое вы загружаете. Затем эти страницы создают AMP-версию, которая будет отображаться в результатах мобильного поиска.

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

Заключение

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

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

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

Все эти проверенные инструменты помогают решить проблему медленной загрузки и заполучить заветные 100% в PageSpeed Insights.

Оптимизация на Page-speed.ru: показатель google pagespeed insights

Правда о важности оценки Google PageSpeed

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

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

Исследования Google

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

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

•   При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
•   От 1 до 5 секунд до 90%
•   От 1 до 10 секунд вероятность отказа уже 123%
• Не трудно догадаться, какое количество посетителей мы теряем.

Скорость страниц будет важным фактором для ранжирования

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

А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.

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

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

Несколько советов по увеличению скорости загрузки

•  1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
•  2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
•  3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
•  4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
•  5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.

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

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

Улучшаем скорость сайта с помощью Google PageSpeed Insights

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

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

Интерфейс Google PageSpeed Insights

Чтобы начать работу, откройте инструмент PageSpeed Insights и введите URL вашего сайта в соответствующее поле, затем нажмите «Анализировать»:

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

Вот как выглядит мой отчет:
 

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

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

Скорость загрузки страницы замеряется по Cобытию первой отрисовки контента (FCP) и DOM Content Loaded (DCL):

Отчет состоит из 3 разделов:

1. Информация о скорости загрузки страницы — показывает количество операций и обращений к серверу при загрузке страницы;
2. Предложения по оптимизации — чек-лист того, что нужно внедрить на странице для улучшения скорости;
3. Внедренные приемы оптимизации — показывает то, что уже оптимизировано на сайте.

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

Читайте также: Оптимизация под голосовой поиск

Рекомендации Google PageSpeed Insights

1.Сократите время ответа сервера  

Нормальным показателем будет 200-500 мс (0,2-0,5 с). Все что выше — Google уже отмечает. 

Многое зависит от хостинга, а именно конфигурации и настроек сервера. Если он недостаточно мощный — могут возникать задержки в ответе сервера. 

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

Как дополнительный вариант, можно отключить все ненужные службы, работающие на сервере, чтобы увеличить скорость.
Но самая большая разница, которую я заметил, чтобы уменьшить время отклика сервера, достаточно перейти на новую версию PHP, например PHP 7.  Разные отчеты в интернете показывают увеличение скорости на 20-50% с переходом на PHP 7. 

Читайте также: Как улучшить позиции сайта в мобильной выдаче

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

• перейти на более современный и быстрый хостинг с поддержкой PHP 7
• изменить или обновить версию CMS сайта
• отключить или удалить все ненужные, устаревшие и “тяжелые” плагины на сайте, уменьшив таким образом количество обращений к базе данных и снизив нагрузку на CPU сервера
• очистить базу данных сайта от лишних записей, что также уменьшит использование CPU

Больше рекомендаций по оптимизации сервера в документации Google:
https://developers.google.com/speed/docs/insights/Server

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

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

К примеру, для ПС Google все, что превышает 100 Кб считается большим.

Как только я сжал все свои изображения на сайте — получил огромное прибавление в скорости.

Если вы используете WordPress, один из лучших способов сжать изображения, не потратив много времени, использовать плагин. Мой любимый плагин для использования — WP Smush Image Compression and Optimization:

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

Читайте также: A/B тест рассылки

Бесплатные сервисы для сжатия изображений:

Более детально об оптимизации изображений:
https://developers.google.com/speed/docs/insights/OptimizeImages

3.Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Некоторые скрипты и стили, расположенные в самом верху страницы в header, блокируют отображение страницы. 

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

Детальнее о блокирующих элементах кода в документации Google: 
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

4. Используйте кеш браузера

Кэширование браузера или Leverage browser caching — еще один инструмент, который может оказать большое влияние на скорость страницы. Получение ресурсов для загрузки вашего сайта требует больших усилий. Он требует загрузки каждого элемента изображения и страницы, а затем имеет дело с тяжелым HTML и кодированием. Каждый раз, когда кто-то загружает ваш сайт, этот процесс должен происходить снова и снова. Ваш сайт будет слишком долго загружаться. И именно здесь может помочь кэширование. 

Кэширование позволяет вашему браузеру «помнить» определенные элементы, которые были недавно загружены — заголовок, навигация, логотип и т. д. Чем больше элементов браузер может кэшировать, тем меньше элементов он должен загружать, когда пользователь делает запрос и, в конечном счете, быстрее загрузится страница. Google рекомендует минимальную политику кэширования в течение одной недели, а для элементов, которые в основном остаются неизменными, предпочтительнее один год.

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

Читайте также: Как использовать og image

5. Сократите JavaScript и CSS

Сведение к минимуму пространства, которое занимает ваше кодирование в формате Java Script, является еще одним важным фактором получения идеального результата от Google. Минимизация — это процесс удаления или исправления ненужных или дублированных данных, не влияя на то, как браузер будет обрабатывать HTML. Он включает в себя исправление кода, форматирование, удаление неиспользуемого кода и сокращение кода, когда это возможно. И еще раз, благодаря потрясающим плагинам WordPress, вам не нужно быть гением программирования, чтобы исправить это.

Желательно начать с валидации всего HTML-кода сайта: https://validator.w3.org

Список сервисов для оптимизации JavaScript:

Список сервисов для оптимизации CSS:

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

6. Включите сжатие

Существует большой объем данных, которые необходимо передавать между серверами и пользователями при доступе к сайту. К счастью, есть способ сжатия передаваемой информации. Он называется — gzip (от GNU Zip).

Пользователи WordPress могут включить gzip сжатие, установив плагин GZip Ninja Speed Compression.Читайте также: Советы для SEO по WordPress.

На многих хостингах gzip-сжаите уже включено по умолчанию, но вы можете проверить включено оно или нет на вашем сайте с помощью сервиса: https://checkgzipcompression.com/

Детальнее о сжатии в документации Google:
https://developers.google.com/speed/docs/insights/EnableCompression#-

7. Мобильная версия

Все рекомендации выше касались десктопной версии сайта. Для мобильной они мало чем отличаются, но связаны с работой сайта под смартфоны и планшеты. Думаю, не стоит рассказывать вам, насколько важны обе, особенно с введением Mobile first Index в Google. Большую роль тут играет адаптивность и наличие AMP-страниц (Accelerated Mobile Pages). Что выбрать — мобильную версию или качественную адаптивную верстку — читайте в статье: Мобильный поиск в современном SEO

Выводы

В целом, Google PageSpeed Insights — полезный инструмент, но нужно понимать, что он не является “мерилом” скорости сайта, а средством SEO аудита с точки зрения быстродействия сайта. Если нужно проверить реальную скорость — для этого существуют такие сервисы как GTMetrix, Pingdom или WebPageTest. PageSpeed же соберет для вас полезную информацию по проблемным зонам, тормозящие сайт и предоставит чек-лист для оптимизатора.

Так же, на мой взгляд, не стоит гнаться за 100/100 оценками в PageSpeed Insights. В некоторых ситуациях это практически невозможно. Чтобы их достичь, иногда нужно пойти в ущерб функциональности сайта. Да и не все рекомендации могут быть безопасными. Например, если перенести CSS в нижнюю часть страницы, как рекомендует PageSpeed, веб-страница будет сперва подгружаться без стилей, что конечно же увеличит количество отказов. 

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

Читайте также: Поисковые подсказки Google

Почему не нужно беспокоиться о показателе Google PageSpeed Insights — Devaka SEO Блог

Как владелец сайта вы знаете, что он должен быть быстрым. И вы уже читали разные статьи о том, как ускорить свой сайт, возможно уже даже что-то внедрили. Дальше становится интересно, насколько же быстро загружается сайт. Тут вы идете в Google PageSpeed Insights, как самый популярный инструмент, получаете оценку и список рекомендаций от гугла. И здесь большинство из нас теряется:

• Важен ли показатель PageSpeed Insights для SEO?
• Почему оценка моего сайта не максимальна?
• Что значат все эти рекомендации?

Ранее вы включили на сайте кеширование и ожидали, что оценка PageSpeed будет почти идеальна, а теперь думаете, почему этот плагин не пофиксил всех проблем со скоростью? Может он не очень хорош? Короткий ответ в том, что:

Показатель Google PageSpeed не имеет значения.

Да, это так… но почему он не имеет значения?

Page speed vs PageSpeed Insights

Скорость (время загрузки сайта) имеет значение и является важной метрикой в SEO, а также влияет на пользовательский опыт. Когда гуглбот индексирует сайт, он не видит показатель PageSpeed, а только знает саму скорость. Знаете ли вы, что Google PageSpeed Insights не измеряет скорость вашего сайта? Да, прочитайте это ещё раз:

Google PageSpeed Insights не измеряет скорость сайта.

Для измерения скорости загрузки вы можете использовать GTMetrix или Pingdom Tools.

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

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

Скорость загрузки здесь менялась от 5.5 сек до 5.7 сек, а показатель PageSpeed Insights от 47 до 81. Ниже пример еще одного сайта, имеющего низкий показатель PageSpeed, но при этом, в 1.5 раза быстрее тех сайтов, что упомянуты выше.

Из этих примеров видно, что Google PageSpeed совсем не индикатор скорости. Гнаться за этим показателем не стоит.

Выжимать максимум индикатора — пустая трата времени

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

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

JavaScript и CSS, блокирующий отображение верхней части страницы

Частая рекомендация в PageSpeed Insights — удалить код JavaScript и CSS, блокирующий отображение верхней части страницы. Давайте рассмотрим подробней.

1. Удалить JavaScript, блокирующий рендеринг

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

2. Оптимизация CSS-кода

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

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

Так в чем же польза Google PageSpeed?

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

Статья написана по материалам wp-rocket.