Гугл speed page: Как накручивают 100 баллов на Google PageSpeed — Сервисы на vc.ru

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

В компании Google сделали исследование поведения пользователей на сайтах разных направлений, с целью выявления лучших показателей. В результате данного теста, выяснилось, что если страница сайта загружается более 3 секунд — вероятность отказа повышается в 2.5 раза. И в этом исследовании ясно показано: скорость имеет значение! Поэтому для повышения рейтинга сайта гугл требует чтобы загрузка любой страницы сайта была не более 3-х секунд, оптимальным показателем является 1-2 секунды. Поэтому Google рекомендует разработчикам сайтов заняться оптимизацией своих проектов и предлагает для анализа эффективности скорости загрузки страницы использовать инструмент: Google PageSpeed.

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

Рассмотрим основные аспекты оптимизации скорости загрузки сайта

Оптимизация базы данных (связи, индексы)

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

Оптимизация SQL запросов

Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)

Кеширование результатов SQL запросов

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

Пример кеширования результатов SQL запросов в PHP

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

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

• Все изображения на сайте сжать, используя онлайн инструменты Compressor.io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
• Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

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

Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.

В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено

Пример отложенного вызова CSS файла через JavaScript

В подключении шрифтов font-display параметр swap может показывать текст не дожидаясь полной загрузки всего шрифта.

Пример на CSS

Обязательно загружайте все изображения с помощью отложенной загрузки lazyload

При этом обязательно нужно подключить lazyload. min.js

Если у вас на странице есть svg элементы, то их лучше добавлять в HTML коде, без дополнительного обращения к тегу img. И svg необходимо ужимать тоже.

Минимизация (сжатие) JavaScript, CSS и HTML

Минимизация (сжатие) JavaScript, CSS, HTML позволяет сократить вес файлов, устраняя пробелы, переносы строк, ненужные символы и комментарии. Разработчики при разработке сайта оставляют много места на отступы и комментарии, что существенно удваивает объем JavaScript и CSS.

Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

Включение сжатия gzip

GZIP это формат сжатия в вебе. Перед отображением страницы, файлы загружаются с сервера уже в сжатом виде. Данный тип сжатия поддерживают все современные браузеры.

Включить gzip сжатие файлов вы можете в настройках вашего хостинга.

Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression

Удаление блокирующих кодов

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

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

Оптимизация версии сайта для мобильных устройств

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

Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно. Это связано с спецификой программной организации бесплатной CMS и использованием шаблонных решений, которые оптимизировать не всегда удается или удается на небольшой процент(: Плюс не каждый специалист сможет это сделать так как данный процесс требует определенные знания и опыт, и нужно будет вносить коррективы в ядро системы.

Помогла ли вам статья?

347
раз уже помогла

Комментарии: (1)

Написать комментарий

Что такое Google Page Speed? Как ускорить сайт по Google Page Speed

27.06.2019

Понимание критериев Google Page Speed важно для любой компании, которая полагается на продажи в интернете.

Почему?

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

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

Какие критерии влияют на ранжирование?

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

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

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

Обратите внимание, что это только РЕКОМЕНДАЦИИ. Ваш сайт не обязательно должен набирать 100% по скорости. В большинстве случаев это просто невозможно. Если ваш сайт набирает 80% и более, это уже хорошо. Всегда оценивайте скорость работы сайтов ваших конкурентов по поисковой выдаче. Выберите лучшего и ориентируйтесь на эти показатели.

Дополнительно смотрите на что именно ругается Page Speed и есть ли вообще возможно это убрать. 

Для примера вот скорость официального сайта Apple — apple.com:

Почему важна оптимизация скорости загрузки сайта?

Быстрый сайт — это счастливые клиенты и хорошая конверсия 🙂

Исследования показали, что за каждую. секунду, превышающую базовый 3-секундный эталон скорости загрузки, коэффициент конверсии снижается на 3%. Это значит, что если вашему сайту требуется 6 секунд, чтобы загрузится — ваш коэффициент конверсии падает на 9%.

За последние десятилетия внимание типичного пользователя уменьшилось, поскольку он изменил способ обработки информации. Кроме этого, мы стали весьма нетерпеливым обществом. Ожидание в 10 секунд было нормой в 1999 году, но в 2019 — вряд ли кто-то будет ждать.

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

Как ускорить сайт?

• Используйте современные форматы изображений. TIFF и BMP уже давно пылятся на полке истории. JPEG, GIF и PNG скоро пойдут за ними следом. Обратите внимание на новые форматы файлов, такие как: WebP, JPEG 2000 или JPEG XR. Эти форматы зачастую меньше весят и не теряют качества изображения при сжатии.

• Всегда оптимизируйте изображения. Пусть это станет рефлексом для вашего контент-менеджера. Сжимайте каждый файл, сегодня это можно сделать прямо в браузере. А для тех, кто использует WordPress есть плагин, который будет это делать автоматически. Используйте подходящие размеры изображений. Нет смысла грузить на сайт изображения размером 4000х3000px (за исключением когда необходимо дать возможность пользователю загрузить исходник). Достаточно 1920px по ширине, и то, только в том случае, если это изображение является полноэкранным.

• Асинхронная загрузка изображений. Асинхронная загрузка изображений или отложенная загрузка — метод, при котором загружаются только те изображения, которые в данный момент отображает окно браузера. Вы могли это замечать, если очень быстро скролили страницу. Причина по которой данный метод работает, заключаются в том, что метрики аналити скорости загрузки фокусируются на том, насколько быстро выполняются определенные задачи, такие как FMP (время загрузки наиболее важной части страницы) и FCP (время до начала прорисовки и появления первого контента). Особенно этот метод хорошо работает для длинных страниц.

• Используйте CDN. CDN расшифровывается как Content Delivery Network и может значительно увеличить общую скорость вашего сайта. CDN кэширует страницы на нескольких серверах сразу, вместо одного. Когда кто-то делает локальный запрос на ваш сайт, этот запрос отправляется на ближайший сервер с кэшированной станцией, а не на хост-сервер. Это существенно увеличивает скорость загрузки. Особенно это полезно для компаний, которые работают на большой территории или во всем мире.

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

Итог

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

Как добиться результата 100/100 в Google Page Speed Test Tool? — Lemarbet

Оценивая юзабилити сайта, о скорости загрузки ресурса мы говорим как о ключевом, принципиально важном параметре. Этот же показатель занимает не последнее место среди многочисленных факторов ранжирования SEO. На самом деле сегодня редкий пользователь станет дожидаться загрузки страницы дольше пяти секунд после клика (хорошо еще, если он вытерпит хотя бы 2-3 секунды ожидания). Напрашивается бесспорный вывод — между нажатием пользователя на ссылку и загрузкой данных страницы должен быть кратчайший, минимальный из возможных временной промежуток.

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

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

Мотивация — стремление к совершенству

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

При использовании инструмента PageSpeed Tool, был обнаружен неожиданный нюанс — у веб-ресурса компании Google оказались очень невысокие параметры скорости загрузки (всего 59/100) для мобильных гаджетов.

Версия для десктопов демонстрирует при этом гораздо лучшие результаты — 95/100. Теоретически, им стоило бы использовать собственный инструмент, чтобы оптимизировать свой же сайт. Это вполне логично, не правда ли? Может быть, результат 100/100 — это что-то запредельное и недостижимое? Отнюдь. Это вполне реально, было бы желание. Если вы стремитесь к совершенству, и не опасаетесь технических трудностей, то тоже сможете добиться безупречно быстрой загрузки. Давайте перейдем к подробному рассмотрению методов и манипуляций, с помощью которых начальные показатели “испытуемого” сайта 87/100 превратились вот в такую картину:

5 шагов, которые помогут ускорить загрузку веб-страниц

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

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

1. Оптимизируем изображения на веб-ресурсе

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

• Уменьшать изображения на сайте можно, применяя бесплатные инструменты — Compressor.io и TinyPNG. Вполне реально таким образом сократить размер файлов до 80% и даже более того, при этом можно рассчитывать, что процесс уменьшения в некоторых случаях совершенно не будет иметь негативного влияния на качество изображений.
• Уменьшение размера картинок и фото до минимума без снижения их качества. Приведем пример: если на веб-ресурсе должно находиться изображение размером 150×150 px, то и на сервере у него обязаны быть те же параметры. Эти параметры не имеют права подгоняться за счет CSS или HTML-тегов.

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

2. Минимизируем JavaScript, CSS и HTML

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

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

Если вы работаете на платформе WordPress, можно рекомендовать вам установить плагин Autoptimize. Вы также можете загрузить оптимизированные данные из сервиса PageSpeed. Ниже приведен итог, который стал возможен после работ по минимизации CSS и JavaScript.

3. Используем кэш браузера

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

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

Приведем пример. Допустим, главный сервер сайта располагается в Техасе, а пользователь, который заходит на сайт, находится в Амстердаме. Благодаря использованию CDN, у пользователя нет необходимости ждать, пока весь контент будет “добираться” с американского сервера. Сайт достаточно быстро (практически молниеносно) загрузится с местного (амстердамского или другого близлежащего) сервера CDN.

Проиллюстрируем наглядно принцип работы CDN:

На сайте-образце были перемещены на CDN все картинки и файлы JavaScript и CSS, так что на центральном сервере остались для хранения исключительно HTML файлы. Такая “перестановка” очень существенно влияет на скорость загрузки веб-ресурса. После выполнения действий по переносу файлов, PageSpeed настойчиво предлагал, применить кэширование браузера для некоторых сторонних ресурсов. Смотрите на скриншот:

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

Но обнаружилась еще одна проблема, более досаждающая, чем нюанс со скриптами соцсетей. Код Google Analytics замедлял функционирование сайта. Решить эту задачу оказалось сложнее, чем предыдущую. Поскольку Analytics действительно необходим и удалять его с сайта нецелесообразно, встал вопрос о поиске альтернативы удалению. Google крайне редко вносит изменения в код Analytics, не чаще 1-2 раз в год. Так что Razvan разработал специфический скрипт, для проверки наличия обновлений кода Analytics. Проверки осуществляются постоянно и регулярно — по 3 раза в день. Если скрипт обнаруживает обновления, он тут же загружает их. Это удобное решение позволяет размещать JavaScript код Analytics на сервере и снимает потребность грузить его с серверов Google всякий раз, как новый посетитель заходит на сайт.

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

Посмотрите на скриншот из Pingdom Tools, иллюстрирующий все загрузки из сети серверов CDN, включая и код Google Analytics. Осталась только одна загрузка файла с сервера — главная страница, с совершенно незначительным объемом файла — всего 15,5 Kb. Ликвидировав все сторонние скрипты, удалось весьма существенно повлиять на рост общей скорости загрузки сайта. 

4. Удаляем блокирующие коды

Избавиться от блокираторов — еще одна технически сложная задача в нашей пошаговой инструкции, как повысить скорость загрузки сайта до максимальной. Для ее решения нужны специфические знания и навыки. Главная проблема, требующая решения, — это проверка всего кода JavaScript снизу доверху, от заголовка до футера на каждой странице сайта. Если ваш сайт работает на WordPress, вероятнее всего вы сможете решить поставленную задачу с помощью плагина Autopmize. Попробуйте после проверки настроек снять отметку «Force JavaScript» ви поставить отметку на «Inline all CSS».

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

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

6. Оптимизируем мобильную версию

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

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

Выводы

Как видите, мы последовательно выполнили все шесть шагов, которые составили для вас пошаговую инструкцию. Эти целенаправленные действия позволили добиться впечатляющего результата, к которому мы и стремились, — получить для сайта «Monitor Backlinks» идеальные показатели в Google PageSpeed Tools — 100 из 100. Оптимизации подверглась как главная страница сайта, так и все остальные страницы веб-ресурса.

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

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

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

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

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

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

Лицемерие google. PageSpeed Insights / Хабр

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

Есть такая рекомендация:

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

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

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

На момент написания данной статьи, это всего 80%. Вполне не плохо, но еще слишком мало чтобы использовать повсеместно. И как вы думаете что делает с этой информацией сам PageSpeed Insights? Правильно, он использует PNG:

Ну ладно, не то что сами рекомендуют, но почему бы не SVG? Нужно же подать пример, но зачем? А давайте проверим на оптимизацию сам сайт developers. google.com на котором находится данный сервис:

Мобильная версия всего лишь 51, а вы видели эту страницу? Она практически пустая, несколько меню сверху и снизу, пара новостей и поиск:

Очевидно, что они клали на эту оптимизацию, ведь оно им не надо. Они даже не попытались показать пример… Хотя может это и есть пример? Пример того, что не нужно бездумно пытаться реализовать все рекомендации в ущерб функционалу и здравому смыслу?

В общем любая оптимизация полезна, любая рекомендация имеет смысл быть, но давайте без фанатизма. Спасибо за внимание.

Как получить 100/100 в Google Page Speed Test Tool? — SEO компания UAWEB

НАЗАД

Антон Юдин |
53023

Оптимизация,SEO |

12.04.2016 |

Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования 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. Оптимизация размеров и сжатие изображений.

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

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

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

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

Источник: moz.com

Читайте также:

Как автоматизировать отчеты Google Analytics с помощью Google Таблиц?

Нужны продажи? Настройте Е-commerce интернет-магазина!

Чек-лист по настройке E-commerce в Google Analytics

Как создать сайт, сохранив нервы и деньги?

Маркетинговый план развития сайта: 15 шагов к успеху.

Внутренняя оптимизация сайта: Мета теги

Как бесплатно раскрутить сайт? 5 практических советов.

Please enable JavaScript to view the comments powered by Disqus.

Скорость загрузки сайта – как ее проверить и увеличить

Даже сейчас, когда скорость интернета у большинства провайдеров превышает 100 Мбит/сек, а мобильные операторы развивают 5G, вопрос о скорости загрузки сайта остается актуальным. Этот параметр существенно влияет на конверсию, показатель отказов, посещаемость и другие важные для бизнеса KPI. Потому что при прочих равных условиях человек выберет тот сайт, который быстрее загружается и не заставляет его ждать. Об этом нам говорят логика, личный пользовательский опыт и многочисленные исследования на тему, которые можно найти в сети. Вот, например, исчерпывающая подборка кейсов с цифрами, как компании экспериментировали со скоростью загрузки.

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

В  статье мы расскажем:

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

1. Клиенты уходят к конкурентам — им проще вернуться в поисковик и выбрать следующий сайт.
2. Задержка загрузки на 0,1 секунду уменьшает конверсию на 7% (согласно исследованию Akamai).
3. Снижается вероятность, что пользователи вернутся на сайт. Google говорит, что из-за негативного пользовательского опыта вероятность повторной покупки снижается на 60%. Правда, речь про мобильные версии.
4. Скорость загрузки влияет на ранжирование сайта в поисковиках. Если сайт долго грузится, робот поисковой системы может не успеть его полностью проиндексировать.

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

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

Есть много онлайн-сервисов, которые позволяют проверить быстроту загрузки страниц — достаточно ввести нужный URL. Рассмотрим три самых интересных, на наш взгляд. Для примера будем использовать сайт https://shop.googlemerchandisestore.com/.

1. PageSpeed Insights

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

Если страница показывает не самые лучшие результаты (как в нашем примере), сервис дает конкретные советы, как ее оптимизировать.

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

Кстати, рекомендации PageSpeed Insights можно увидеть в отчете Google Analytics «Ускорение загрузки», если кликнуть на ссылку в соответствующем столбце:

Вообще, группа отчетов «Скорость загрузки сайта» (Site Speed reports) в GA — полезная штука. Если раньше вы не уделяли должного внимания этим отчетам, рекомендуем периодически их просматривать, чтобы отслеживать показатели в динамике и вовремя реагировать на проблемы.

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

Допустим, ваша целевая аудитория находится в Германии. Если вы посмотрите на отчет выше, то увидите, что одна из важных страниц вашего сайта в этой стране грузится очень медленно (19,24 сек.), при этом у нее 140 просмотров. Чтобы ускорить загрузку, нужно оптимизировать страницу. Если же в этом регионе или у этого провайдера скорость интернет-соединения слишком мала для вашего сайта, можно создать альтернативные страницы, адаптированные для низкой пропускной способности.

2. Pingdom Tools

Это один из самых информативных и популярных сервисов для проверки скорости. У него есть бесплатная и платная десктоп-версии, а также мобильное приложение с 14-дневным trial.

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

Кроме того, в бесплатной версии Pingdom Tools вы можете:

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

3. GTmetrix

По функционалу этот сервис очень похож на Pingdom Tools, разве что предоставляет информацию в более удобном и организованном виде. Бесплатная версия показывает браузер и локацию сервера, используемого для тестирования, производительность страницы (PageSpeed и YSlow), время загрузки, количество запросов и общий размер страницы. Учитывая, что сервис сохраняет историю проверок, этих метрик будет достаточно, чтобы анализировать скорость загрузки вашего сайта в динамике.

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

После проверки сайта вы можете прикинуть, сколько заработаете, если ускорите загрузку. Например, с помощью калькулятора от Google или Sharpe Digital.

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

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

1. Страницы большого размера

Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

2. «Тяжелые» изображения

Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т.д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

3. Много запросов от браузера

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

• Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
• Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
• Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.

4. Перегруженный код JavaScript и CSS

Если код JavaScript и CSS слишком длинный, содержит много лишних элементов (пробелы, комментарии и т.п.), то страница может загружаться с задержками. Чтобы оптимизировать код, вы можете:

• Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
• Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
• Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

5. Большое расстояние между сервером и пользователем

Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

6. Медленный хостинг

Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

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

Как регулярно мониторить скорость сайта

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

Если вы собираете данные в Google BigQuery с помощью

OWOX BI Pipeline

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

Получить шаблон дашборда

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

1. Количество пользователей.
2. Количество сеансов.
3. Количество просмотров страниц.
4. Ошибки JavaScript.
5. Ошибки 404.
6. Среднее время загрузки страниц.
7. Среднее время соединения с сервером.

На втором листе можно узнать подробную информацию по ошибкам JavaScript:

• Общее количество ошибок за выбранный период.
• Количество ошибок на страницу.
• Количество сессий с ошибками.
• Сколько процентов пользователей столкнулись с ошибками.
• На каких страницах и типах страниц происходят ошибки (для отслеживания типов страниц, необходимо внедрить pageType на сайте, а также создать пользовательскую переменную уровня хита hits.page.pageType).
• В каком браузере и его версиях происходят ошибки.

На третьей странице представлена подробная информация об ошибках 404:

• Общее количество ошибок.
• Количество ошибок на страницу.
• Количество сессий с ошибками.
• Количество пользователей, у которых возникли ошибки.
• А также рефералы, после которых возникли ошибки.

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

На четвертой странице информация по десктопу:

На пятой странице данные по планшетам и мобильным устройствам:

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

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

Как накрутить Google Pagespeed до 100 и найти себе клиентов. АНТИЛАЙФАК | Урок #280

Длительность: 9:10

Как накрутить Google Pagespeed до 100 и найти себе клиентов. АНТИЛАЙФАК | Урок #280

SEO

&nbsp

В новом аудиоподкасте №280 Николай Шмичков рассказал о том, как накрутить Google Pagespeed до 100.

Текстовая версия выступления:

“Всем привет!

Вы на канале Seoquick.

Меня зовут Николай Шмичков.

Я продолжаю наш цикл SEO подкастов и хотел бы рассказать интересную новость, которую увидел в Фейсбуке.

Это пост со страницы Михаила Шакина о том, как накручивают 100 баллов на Google Page Speed.

Эту статью предоставил автор Алексей (фамилии не видно) на сайте vc.ru.

Он до этого рассказывал статью о мифах, что можно подделать Page Speed.

Он рассказывает, что некоторые фрилансеры могут накручивать Page Speed до 100 баллов.

Это действительно правда.

Если клиент хочет Page Speed 100 баллов, а оплатит мало, то делают простой трюк: отдают для робота Google скриншот вашего сайта вместо самого сайта.

Поэтому если вам сделали Page Speed 100 баллов по цене ниже 10000 руб, то 99% случаев это обман.

Технически это делается так: определяется бот page Speed, в Google page Speed insights загружают скрин главной и сайт показывает 100 и 100.

Как узнать, что вас обманывают?

Если скриншот в Google pageSpeed Insights остаётся старым, нужно копаться в коде, чтобы узнать что же вам такого там наворотили.

На сайте дают рекомендации, как обрабатывать в ручном режиме десятки сайтов.

В 98% из 100 сайтов всё было нормально.

На login express сайт 7 из 10 идеальный почти по всем параметрам.

Время загрузки очень быстрое, замер на Web page Test тест ломается – там показывает больше 20 секунд.

На графике загрузки ресурса видно время около 8 секунд.

Если учесть по оценке Яндекс метрики, то замер до 17 секунд, дает тоже хорошие результаты.

Пишут что сайт идеален, что надо включить серверный push.

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

Эту статью Михаила Шакина вы можете посмотреть – я сделаю её репост.

Автор ускорения сделал очень просто, он сделал скрипт, который подсовывает другую версию страницы только для Page Speed, которую можно видеть в lighthouse.

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

Сам трюк, который можно заметить это 0 элементов структуры DOM, чего у настоящего сайта быть не может. хоть и page Speed говорит, что его надо сократить, но их не должно быть ноль.

У настоящего сайта этот показатель должен быть минимум 1-2.

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

Если сначала подсовывали просто скриншот страницы, то теперь подсовывают просто другую версию страницы.

Чек лист от Алексея, который позволяет проверить такое фейковое ускорение.

Первое.

Если вам ускорили медленный сайт за маленькие деньги и показатель Page Speed больше 90 по мобилке, а логин экспресс показывает ниже 7 баллов, то проверьте вашими хорошими специалистами по ускорению сайта.

Однозначно ищите не фрилансера, а какую-то компанию и закажите аудит полный проверки.

Она делается, конечно же, без всяких Google ботов page Speed.

Сделайте замер внутренней страницы.

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

Как в описанном случае во внутренней странице немножко увидели не то.

Следите за показателями DOM.

Он не должен быть равен нулю.

Это тогда точно не сайт .

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

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

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

Если у вас упал трафик в Google, Page Speed поднялся, то у вас скорее всего обманули, а Google это заметил.

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

У меня есть целый сайт, который позволяет накрутить page Speed.

Есть сайт login.express.

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

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

Допустим для фрилансера, который занимается увеличением Page Speed, но портфолио у него пустое и нужно чем-то похвастаться.

И если на сайте низкая конверсия, но хочется чтобы выглядело всё наоборот.

Они создали сервис, всего одна строчка кода, которая реально позволяет сделать сайт быстрым на 100 баллов по Page Speed insights.

Вставляется строчку в начало индекса сайта PHP, корень сайта, и наслаждаетесь.

Как работает этот код.

Код определяет бота Page Speed по user-agent, а он обязательно содержат Chrome lighthouse.

Только для этого бота он показывает особую страницк вообще без контента.

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

Каждый день скриншот обновляется и на каждой странице сайта будет скриншот, который соответствует этой странице.

В этом и весь функционал.

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

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

После этого они увидят заветную сотню баллов.

На самом деле страница не становится быстрее, обманывается только lighthouse, который Google используют для Page Speed Инсайт.

Так, по факту, Логин Экспресс подготовились к грядущему алгоритму, который вот-вот стрельнет.

Это тоже очень интересно потому что login express – это проект, с которым я столкнулся и возможно их станет больше.

Я думаю этих сервисов станет больше.

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

А что вы думаете? Задавайте вопросы в комментариях.

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

Не забывайте про наш youtube-канал.

Каждый четверг у нас выходят вебинары.

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

Буду всех вас рад там видеть.

Не забываем подписываться наши подкасты.

У нас самые лучшие подкасты в рунете по IT.

До новых встреч.”

Как набрать 100% очков в Google PageSpeed ​​Insights

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

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

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

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

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

Но ускорить работу вашего сайта — непростая задача.

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

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

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

Google закроет ваш сайт, если вы этого не сделаете.

Если вы запустите свой веб-сайт через Google PageSpeed ​​Insights и наберете 100%, ваш сайт будет быстрым.

И Google отдает предпочтение сайтам, которые загружаются быстро.

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

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

Но, к сожалению, они не дают вам лучших инструкций по достижению 100% результата.

Вот как набрать 100% очков в PageSpeed ​​Insights от Google и почему вам нужно это сделать.

Почему нужно заботиться о скорости страницы

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

Если ваш веб-сайт не входит в топ-10 обычных страниц, вы не попадете на первую страницу.

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

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

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

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

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

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

Все топовые позиции в Google имеют одну и ту же общую черту:

Высокая скорость страниц на своих сайтах.

У них были хорошо оптимизированные сайты, которые их создатели явно разработали для скорости.

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

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

И эта корреляция была недавно подтверждена новым отраслевым тестом Google PageSpeed ​​.

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

Это означает, что если ваша страница загружается за 10 секунд, вероятность того, что кто-то покинет ваш сайт еще до того, как он загрузится, увеличивается более чем на 120%!

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

Но, согласно последнему отчету Google, большинство веб-сайтов работают невероятно медленно во всех отраслях:

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

Между тем, лучший тест — меньше трех секунд.

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

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

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

Backlinko доказало это, а тесты Google еще больше подтверждают эти данные.

В другом исследовании BigCommerce обнаружила , что коэффициент конверсии для веб-сайтов электронной коммерции в среднем находится в диапазоне 1-2%.

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

Снижение скорости до двух секунд может удвоить ваш трафик и прибыль.

Итак, что вызывает медленную загрузку страницы?

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

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

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

Размер и вес страницы часто измеряются байтами веса страницы. Проще говоря, байты веса страницы показывают общий размер веб-страницы, измеренный в байтах.

Сравнительные данные Google показывают, что наилучшая практика для размера или веса страницы — менее 500 КБ:

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

Одна из концепций, которые мне больше всего понравились в отчете Google, проистекает из этой короткой, но впечатляющей цитаты:

«Что бы ни случилось, быстрее — лучше, а меньше — лучше».

Поскольку 70% страниц имеют размер более 1 МБ, 36% — более 2 МБ и 12% — более 4 МБ, это утверждение имеет большой вес (не каламбур).

Google обнаружил, что страница весом всего 1,49 МБ (сопоставимая со средним размером одного HD-изображения) загружалась на страницу за семь секунд.

В ходе своего исследования они даже нашли веб-страницу с изображениями, размер каждого изображения которых составлял в среднем 16 МБ.

Google просто говорит нам суровую, но обнадеживающую правду:

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

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

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

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

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

Но это не всегда верно для каждого веб-сайта.

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

Для начала откройте инструмент PageSpeed ​​Insights и введите URL-адрес своего веб-сайта в строку:

Нажмите «Анализировать», чтобы Google провел быструю проверку вашего сайта.

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

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

Это 87/100.

Это не здорово. Впрочем, это тоже не страшно.

Но почти всегда есть возможности для улучшения. Моя цель здесь — довести вас до 100% к концу этой статьи, поскольку мы вместе продвигаемся по скорости страницы.

Во-первых, давайте посмотрим на элементы, которые я оптимизировал и усовершенствовал:

Теперь обратите внимание, что в этом списке всего несколько пунктов по сравнению с моим списком «Возможные оптимизации»:

Эта информация говорит мне, что пункты «Возможные оптимизации» немного менее эффективны, чем те, которые я уже оптимизировал.

Но очевидно, что вам нужно будет позаботиться о каждом элементе, чтобы достичь 100% результатов в инструменте Page Speed ​​Insights.

Вам нужно начать с предметов с наивысшим приоритетом (подробнее об этом позже).

Далее мы хотим отдельно протестировать наш мобильный сайт.

Вы можете использовать тестер мобильных сайтов в инструменте PageSpeed ​​Insights, но Google выпустил обновленную, более точную версию этого.

Зайдите на Test My Site , чтобы попробовать. Введите URL-адрес вашего веб-сайта и нажмите Enter:

.

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

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

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

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

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

Это означает, что моя скорость не соответствует отраслевым стандартам.

И из-за этого я теряю до 10% посетителей просто из-за низкой скорости!

Вот как выглядит мой мобильный тест, когда я сравниваю его с отраслевыми стандартами:

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

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

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

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

Это потрясающе. И поверьте мне, это то, что вам нужно сделать, чтобы сэкономить 10% посетителей или больше.

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

В этом следующем разделе я расскажу вам, как исправить пять основных проблем со скоростью страницы, которые помогут вам набрать 100% результатов в инструменте PageSpeed ​​Insights.

4 способа добиться идеального результата PageSpeed ​​

Получить все 100% с помощью инструмента Google PageSpeed ​​Insights — непростая задача.

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

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

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

Вот четыре основных способа ускорить свой сайт и получить 100% результатов с помощью Google.

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

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

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

Одним из лучших методов оптимизации для исправления размера изображения является сжатие.

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

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

Мой любимый плагин — WP Smush Image Сжатие и оптимизация:

WP Smush имеет множество потрясающих функций бесплатно.

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

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

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

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

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

WP Smush — отличный бесплатный инструмент для обычного пользователя WordPress.

Но если вы не используете WordPress, что вы будете делать?

Ну, есть масса других плагинов для разных сайтов. Например, если вы управляете магазином и сайтом на основе Shopify, вы можете использовать Crush.pics :

Crush.pics говорит, что вы можете ожидать большого скачка оценок PageSpeed ​​Insights, используя их инструмент:

«Оценка PageSpeed ​​до сжатия: 75/100. Оценка PageSpeed ​​после сжатия: 87/100 ”

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

Если вы не знакомы с плагинами или не хотите использовать их на своем сайте, вы можете использовать бесплатные онлайн-инструменты, такие как Compress JPEG , Optimizilla и другие.

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

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

Я уменьшил размер файла на 68% всего за две секунды с помощью Optimizilla. Он уменьшил размер с 380 КБ до 120 КБ практически без разницы в качестве!

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

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

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

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

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

И здесь может помочь кеширование браузера.

Он работает, «запоминая» ранее загруженные ресурсы, поэтому ему не нужно перезагружать их при каждом посещении.

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

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

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

Попробуйте использовать W3 Total Cache для сайтов WordPress. У него более миллиона активных установок, и это самый популярный плагин для кеширования на рынке:

W3 Total Cache утверждает, что он может дать вам как минимум , в 10 раз увеличив общую производительность сайта.

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

Этот инструмент также помогает вам минимизировать HTML (который мы рассмотрим далее), JavaScript и CSS, что дает вам до 80% экономии полосы пропускания.

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

3. Сократите HTML-код

Сведение к минимуму места, занимаемого при кодировании HTML, — еще один важный фактор в получении отличной оценки от Google.

Минификация — это процесс удаления или исправления ненужных или дублированных данных без влияния на то, как браузер будет обрабатывать HTML.

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

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

Один из лучших инструментов для этого — HTML Minify :

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

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

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

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

Перейдите на вкладку настроек вашего плагина Minify HTML и включите все следующие настройки:

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

Google PageSpeed ​​Insights рекомендует минимизировать HTML, JavaScript и CSS.

Включите параметры «Уменьшить HTML» + «Встроенный JavaScript».

Затем обязательно выберите «Да» для «Удалить комментарии HTML, JavaScript и CSS».

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

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

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

4. Реализация AMP

AMP — это сокращение от Accelerated Mobile Pages .

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

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

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

Если вы просматриваете Интернет на своем мобильном телефоне, вы, вероятно, нажимали на статью, основанную на AMP.

Вот как они выглядят:

Их часто помещают в раздел «Главные новости» результатов поиска Google, и они загружаются мгновенно.

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

Когда поисковик в Google нажимает на одну из этих статей AMP, он видит следующее содержание:

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

Например, вы можете просто провести пальцем влево или вправо , чтобы прочитать следующую статью в последовательности:

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

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

Здесь вы можете получить доступ к содержанию нескольких статей, не нажимая кнопку «Назад» один раз.

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

Тонны компаний используют AMP.

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

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

Решение потратить время на AMP оказало огромное влияние на WIRED.

Они увеличили CTR из обычных результатов поиска на 25%.

Они также обнаружили увеличение CTR объявлений в AMP-историях на 63%.

Они также смогли добавить истории AMP к более чем 100 тысячам статей на своем сайте.

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

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

Конверсии тоже увеличились на 50%.

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

Если вы хотите начать использовать AMP на своем сайте, есть несколько способов сделать это.

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

Для тех, кто менее разбирается в технологиях или не имеет опыта работы с HTML, попробуйте использовать плагин WordPress.

Один из самых популярных плагинов — AMP для WP .

Он имеет более 80 000 активных установок и имеет постоянную поддержку и обновления.

Плагин включает в себя конструктор страниц AMP, на который вы можете легко перетаскивать элементы страницы:

Это один из самых простых способов создания контента, удобного для AMP.

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

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

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

AMP — проверенный способ ускорить работу вашего мобильного сайта.

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

Заключение

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

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

Но это часто оставляет вас с веб-сайтом, который работает медленнее, чем лучшие практики, установленные Google.

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

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

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

Чрезвычайно важно, чтобы вы набрали 100% в PageSpeed ​​Insights от Google. Или как можно ближе к этому высшему баллу.

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

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

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

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

Обычно изображения составляют основную часть вашей работы.

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

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

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

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

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

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

Какие лучшие способы вы нашли для увеличения скорости вашего сайта?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четкой окупаемостью инвестиций.

Заказать звонок

Правда о подсчете очков 100/100

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

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

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

Приступим!

Введение в Google PageSpeed ​​Insights

Если вы еще не знакомы с Google PageSpeed ​​Insights, это инструмент, используемый для тестирования производительности веб-сайтов. Вы можете ввести любой URL-адрес и проанализировать его:

Google PageSpeed ​​Insights

Затем Google выставляет тестируемому веб-сайту общую оценку из 100 на основе нескольких рекомендаций по оптимизации производительности:

Оценка Google PageSpeed ​​Insights

Наряду с этим результатом вы также увидите несколько рекомендаций от Google о том, как улучшить вашу производительность (и, следовательно, ваш рейтинг PageSpeed ​​Insights):

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

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

Чтобы увидеть комплексную оценку вашего сайта Lighthouse, вы можете использовать инструмент Google Measure:

Инструмент аудита Google Webmasters Measure

В дополнение к проведению аудита производительности, подобному тому, который проводится в Google PageSpeed ​​Insights, вы получите оценку доступности, передовых методов и поисковой оптимизации (SEO).

Правда о рейтинге 100/100 в Google PageSpeed ​​Insights

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

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

В отличие от PageSpeed ​​Insights, Pingdom Tools позволяет тестировать производительность вашего сайта из разных мест:

Результаты теста скорости Pingdom Tools

Вы также можете запускать тесты на таких платформах, как GTmetrix (который объединяет ваши результаты из PageSpeed ​​Insights и YSlow) и WebPageTest.Скорее всего, ваши оценки по этим различным инструментам не будут точно совпадать, что показывает, насколько произвольными могут быть эти числа.

Что действительно важно, так это фактическая скорость вашего сайта . Для сравнения: мы видели сайты со средним временем загрузки менее 500 миллисекунд (что очень быстро!), У которых не было 100/100 баллов в PageSpeed ​​Insights.

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

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

Как Google использует PageSpeed ​​Insights

Помимо влияния на пользовательский опыт (UX) вашего сайта, производительность также играет роль в SEO.Учитывая, что PageSpeed ​​Insights управляется крупнейшей и самой популярной поисковой системой в мире, само собой разумеется, что ваш результат может некоторым образом повлиять на рейтинг вашей страницы результатов поисковой системы (SERP) (по крайней мере, в самом Google).

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

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

С учетом сказанного, вы все равно можете использовать результаты PageSpeed ​​Insights для улучшения вашего SEO. Например, с 2018 года скорость мобильной страницы была фактором ранжирования для Google. Вы заметите, что ваш тест производительности предоставляет данные как для настольной, так и для мобильной версии вашего сайта:

Вкладка для мобильных устройств в Google PageSpeed ​​Insights

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

Рекомендации Google PageSpeed ​​Insights (24 способа повышения производительности)

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

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

Есть также две диаграммы, которые показывают, где падают ваши средние значения First Contentful Paint (FCP) и First Input Delay (FID):

Данные поля Google PageSpeed ​​Insights

На изображении выше FCP нашего сайта примерно такой же, как 45 процентов сайтов в 75-м процентиле, а наш FID примерно такой же, как 9 процентов из 95-го процентиля.

Лабораторные данные показывают конкретные данные для моделируемой загрузки страницы:

Данные лаборатории Google PageSpeed ​​Insights

Вы заметите, что наши полевые данные и лабораторные данные не совпадают в точности.Это совершенно нормально. Lab Data создается при фиксированных условиях, а Field Data использует фактические скорости загрузки, собранные с течением времени.

Если рассматривать их вместе, Field Data и Lab Data должны дать вам представление о фактическом времени загрузки вашего сайта. Как мы упоминали ранее, это даже более важно, чем ваш общий показатель PageSpeed, поэтому вам стоит обращать внимание на эти числа.

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

1. Устранение ресурсов, блокирующих рендеринг

Одна из наиболее распространенных рекомендаций Google PageSpeed ​​Insights — устранить ресурсы, блокирующие рендеринг:

Рекомендация по устранению блокировки ресурсов рендеринга

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

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

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

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

Посмотрите это видео, чтобы узнать больше о том, как устранить ресурсы, блокирующие рендеринг:

2.Избегайте цепочки критических запросов

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

В рамках этого предложения Google PageSpeed ​​Insights покажет вам цепочки запросов на анализируемой странице:

Рекомендация избегать цепочки критических запросов

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

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

• Устранение ресурсов, блокирующих рендеринг
• Откладывание закадровых изображений
• Минимизация CSS и JavaScript

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

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

3. Сохраняйте низкое количество запросов и малые размеры передачи

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

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

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

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

• Максимальный размер изображения
• Количество используемых веб-шрифтов
• Сколько внешних ресурсов вы звоните на номер
• Размер скриптов и фреймворков

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

4. Сократите CSS

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

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

Уменьшите рекомендацию CSS

Мы рекомендуем использовать такой плагин, как Autoptimize или WP Rocket, для минимизации ваших файлов CSS.

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

Так же, как вы можете уменьшить размер файла CSS с помощью минификации, то же самое относится и к вашим файлам JavaScript:

Минимизировать рекомендацию JavaScript

Autoptimize или WP Rocket может справиться с этой задачей и для вашего сайта WordPress.

6. Удалите неиспользуемый CSS

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами WordPress!

Подпишитесь сейчас

Вот почему Google рекомендует удалить все неиспользуемые CSS:

Удалить неиспользуемые рекомендации CSS

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

7. Минимизируйте работу с основной резьбой

«Основной поток» — это основной элемент браузера пользователя, который отвечает за преобразование кода в веб-страницу, с которой посетители могут взаимодействовать. Он анализирует и выполняет HTML, CSS и JavaScript. Кроме того, он отвечает за взаимодействие с пользователем.

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

Google PageSpeed ​​помечает страницы, которым требуется больше четырех секунд для завершения работы основного потока, и представляет пригодную для использования веб-страницу:

Рекомендация минимизировать работу основного потока

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

• Уменьшение кода
• Удаление неиспользуемого кода
• Реализация кэширования

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

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

8. Сократите время выполнения JavaScript

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

Рекомендация по сокращению времени выполнения JavaScript

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

9. Сократите время отклика сервера (TTFB)

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

Таким образом, сокращение времени ответа сервера входит в число рекомендаций Google PageSpeed ​​Insights. Если вам удается достичь низкого значения TTFB, вы увидите это сообщение под заголовком Пройден аудит :

.

Время ответа сервера низкое сообщение

Есть несколько факторов, которые могут повлиять на ваш TTFB.Некоторые стратегии для его снижения включают:

• Выбор качественного провайдера веб-хостинга, ориентированного на скорость
• Использование легких тем и плагинов
• Уменьшение количества плагинов, установленных на вашем сайте
• Использование сети доставки контента (CDN)
• Реализация кеширования браузера
• Выбор надежного поставщика системы доменных имен (DNS)

Наш пост на TTFB — отличный ресурс для более подробной информации об оптимизации в этой области.

10. Правильный размер изображений

Медиа-файлы, такие как изображения, могут существенно снизить производительность вашего сайта. Правильный выбор размера — простой способ сократить время загрузки:

Рекомендация правильного размера изображений

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

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

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

Например, предположим, что у вас есть изображение заголовка, и вы хотите сделать его адаптивным. Вы можете загрузить три его версии с шириной 800, 480 и 320 пикселей.Затем вы примените атрибут srcset , например:

Атрибут srcset указывает различные доступные файлы, а атрибут sizes сообщает браузерам, какой из них следует использовать в зависимости от текущего размера экрана.

11. Отложить закадровые изображения

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

Меньшая загрузка до того, как страница станет видимой, означает лучшую производительность, поэтому Google рекомендует этот метод:

Рекомендация отложить закадровые изображения

Существует несколько плагинов WordPress, созданных специально для отложенной загрузки, в том числе a3 Lazy Load и Lazy Load от WP Rocket.Различные плагины для оптимизации изображений и производительности, такие как Autoptimize, также имеют функции отложенной загрузки. Ознакомьтесь с нашим полным руководством по отложенной загрузке изображений и видео в WordPress.

12. Эффективное кодирование изображений

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

Рекомендация по эффективному кодированию изображений

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

Другие рекомендации, которые влияют на то, «пройдете» вы или «не пройдете» тест Эффективное кодирование изображений audit, включают:

• Показ изображений с правильным размером
• Реализация отложенной загрузки (отсрочка закадровых изображений)
• Преобразование изображений в форматы файлов следующего поколения, такие как WebP
• Использование видеоформатов для анимированного содержимого, например GIF

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

13. Показывать изображения в форматах следующего поколения

Некоторые форматы файлов изображений загружаются быстрее других. К сожалению, это не обычные форматы PNG или JPEG . WebP Изображения становятся новым стандартом, и Google PageSpeed ​​сообщит вам, если ваши изображения не соответствуют ему:

Рекомендация по показу изображений в форматах следующего поколения

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

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

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

К сожалению, за эти преимущества приходится платить. GIF-файлы требуют загрузки, поэтому PageSpeed ​​Insights рекомендует вместо этого использовать видеоконтент:

Использовать видеоформаты для анимированного содержимого Рекомендация

К сожалению, преобразование GIF в видеоформат — не самый простой процесс.Во-первых, вам нужно решить, какой тип видео вы хотите использовать:

• MP4: Создает файлы немного большего размера, но совместим с большинством основных браузеров.
• WebM: Наиболее оптимизированный видеоформат, хотя он имеет ограниченную совместимость с браузером.

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

Инструмент преобразования формата файлов FFmpeg для видео и аудио

Затем откройте интерфейс командной строки и выполните следующую команду:

  ffmpeg -i input.gif output.mp4  

Это преобразует GIF с именем файла input.gif в видео MP4 с именем файла output.mp4 . Однако изменение формата — это только начало. Теперь вам нужно встроить получившееся видео на свой сайт WordPress таким образом, чтобы оно выглядело как анимированный GIF.

Встраивание видеоконтента в анимацию

Как вы, наверное, заметили, если раньше видели GIF, они немного отличаются от обычных видео. Обычно они запускаются автоматически и запускаются в цикле, и они всегда без звука. Встраивание нового файла MP4 или WebM на сайт WordPress не приведет к появлению этих функций.

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

  <цикл автовоспроизведения видео приглушен, воспроизведение в режиме онлайн>

  

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

15. Убедитесь, что текст остается видимым во время загрузки веб-шрифта

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

Убедитесь, что текст остается видимым во время загрузки веб-шрифта. Рекомендация

Google рекомендует решить эту проблему, применив директиву Font Display API swap в вашем стиле @ font-face .Для этого откройте свою таблицу стилей ( style.css ) и добавьте следующее после атрибута src в поле @ font-face :

font-display: поменять местами

Вы можете узнать больше об оптимизации веб-шрифтов в нашей публикации « Как изменить шрифты в WordPress » и в нашем подробном руководстве по размещению локальных шрифтов.

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

Google PageSpeed ​​Insights ‘ Включить сжатие текста Рекомендация относится к использованию сжатия GZIP:

Включить рекомендацию по сжатию текста

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

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

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

Большинство сайтов WordPress работают на серверах Apache. Код для включения сжатия GZIP выглядит так:

  
  # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов
  AddOutputFilterByType DEFLATE application / javascript
  AddOutputFilterByType DEFLATE application / rss + xml
  AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application / x-font
  AddOutputFilterByType DEFLATE application / x-font-opentype
  AddOutputFilterByType DEFLATE application / x-font-otf
  AddOutputFilterByType DEFLATE application / x-font-truetype
  AddOutputFilterByType DEFLATE application / x-font-ttf
  AddOutputFilterByType DEFLATE application / x-javascript
  AddOutputFilterByType DEFLATE application / xhtml + xml
  AddOutputFilterByType DEFLATE application / xml
  AddOutputFilterByType DEFLATE font / opentype
  AddOutputFilterByType DEFLATE font / otf
  AddOutputFilterByType DEFLATE font / ttf
  AddOutputFilterByType DEFLATE изображение / svg + xml
  AddOutputFilterByType DEFLATE изображение / значок x
  AddOutputFilterByType DEFLATE text / css
  AddOutputFilterByType DEFLATE text / html
  AddOutputFilterByType DEFLATE текст / javascript
  AddOutputFilterByType DEFLATE текст / простой
  AddOutputFilterByType DEFLATE текст / xml

  # Удалите ошибки браузера (требуется только для действительно старых браузеров)
  BrowserMatch ^ Mozilla / 4 gzip-only-text / html. Mozilla / 4 \.0 [678] без gzip
  BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html
  Добавление заголовка Варьируется User-Agent
  

Вы должны добавить его после #END в файле .htaccess . Если у вас есть сайт WordPress на сервере Nginx, вам следует вместо этого добавить следующий код в файл nginx.conf :

  36 gzip on;
37 gzip_disable "MSIE [1-6] \. (?!. * SV1)";
38 gzip_vary on;
39 gzip_types текст / простой текст / текст css / приложение javascript / приложение javascript / x-javascript;  

Если вы хотите проверить сжатие текста на своем сайте, мы рекомендуем использовать такой инструмент, как GiftOfSpeed:

.

Проверка сжатия GiftOfSpeed ​​GZIP

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

17. Предварительное подключение к требуемым источникам

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

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

Если Google сочтет, что для вашей страницы может быть полезен этот метод, вы увидите предложение Preconnect to required origins :

Предварительное подключение к требуемому источнику, рекомендация

Есть несколько способов реализовать эту стратегию оптимизации. Если вам удобно редактировать файлы темы WordPress, вы можете добавить тег ссылки в файл header.php . Вот пример:

В этом случае тег сообщает браузерам, что им необходимо как можно быстрее установить соединение с example.com . Google PageSpeed ​​Insights перечислит все соответствующие ресурсы, для которых вы должны добавить теги ссылок с атрибутами preconnect.

Другой вариант — использовать плагин для достижения того же эффекта. Perfmatters включает функцию предварительного подключения (отказ от ответственности: я один из основателей Perfmatters). WP Rocket и Pre * Party Resource Hints обладают аналогичной функциональностью.

18. Запросы ключа предварительной загрузки

Подобно рекомендации Preconnect to required origins , следование этому предложению позволяет минимизировать количество запросов, которые браузеры должны отправлять на сервер вашего сайта. Однако вместо подключения к сторонним ресурсам, запросов на предварительную загрузку ключей относится к загрузке критически важных ресурсов на ваш собственный сервер:

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

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

Вы также можете включить этот тег, используя Perfmatters, WP Rocket или Pre * Party Resource Hints.

19. Избегайте множественного перенаправления страниц

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

Если на вашем сайте слишком много перенаправлений, вы можете увидеть эту рекомендацию в Google PageSpeed ​​Insights:

Избегайте переадресации нескольких страниц, рекомендация

Единственное, что вы можете сделать в ответ на эту рекомендацию, — это убедиться, что вы используете переадресацию только тогда, когда это абсолютно необходимо. Вы можете узнать больше о процессе их создания в нашей публикации « WordPress Redirect — Best Practices for Better Performance ».

20. Обслуживайте статические активы с помощью эффективной политики кэширования

Если вы какое-то время использовали Google PageSpeed ​​Insights, возможно, вам лучше известна эта рекомендация как предупреждение Leverage кэширования в браузере .В версии 5 он теперь помечен как «Обслуживать статические активы с эффективной политикой кеширования» :

Статические ресурсы сервера с рекомендациями по эффективной политике кэширования

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

Чаще всего сайты WordPress реализуют кеширование с помощью плагинов. WP Rocket и W3 Total Cache — популярные варианты.Однако некоторые хостинг-провайдеры, в том числе мы здесь, в Kinsta, включают кеширование через свои серверы. Обязательно проверьте и посмотрите, так ли это на вашем хосте, прежде чем устанавливать плагин кеширования.

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

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

Добавление заголовков Cache-Control

Используйте следующий код для добавления заголовков Cache-Control в Nginx:

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | svg | ico) $ {
 истекает 30 дней;
 add_header Cache-Control «общедоступный, без преобразования»;
}  

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

Те, у кого есть серверы Apache, должны вместо этого использовать этот фрагмент в своих файлах .htaccess :

  
Заголовочный набор Cache-Control "max-age = 84600, public"
  

Добавьте этот код перед #BEGIN WordPress или после #END WordPress . В этом примере период истечения срока действия кэша установлен на 84 600 секунд.

Добавление заголовков Expires

Заголовки Cache-Control сейчас в значительной степени стали стандартом. Однако есть некоторые инструменты (включая GTMetrix), которые все еще проверяют заголовки Expires .

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

  расположение ~ * \. (Jpg | jpeg | gif | png | svg) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 2d;
    }  

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

  ## ИСКЛЮЧАЕТ КЭШЕР ЗАГОЛОВКИ ##

ExpiresActive On
ExpiresByType image / jpg «доступ на 1 год»
ExpiresByType image / jpeg "доступ на 1 год"
ExpiresByType image / gif "доступ на 1 год"
ExpiresByType image / png "доступ на 1 год"
ExpiresByType image / svg "доступ на 1 год"
ExpiresByType text / css "доступ на 1 месяц"
Приложение ExpiresByType / pdf "доступ на 1 месяц"
Приложение ExpiresByType / javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType изображение / значок x "доступ на 1 год"
ExpiresDefault "доступ 2 дня"

## СРОК КЭШИНГА ЗАГОЛОВКИ ##  

Еще раз, вы должны добавить этот код либо перед #BEGIN WordPress , либо после #END WordPress .

Эффективное кэширование Google Analytics

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

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

Если это единственный сценарий, указанный в этой рекомендации, вы все равно можете пройти аудит:

Пройден эффективный аудит политики кеширования

Однако, как мы отмечали в этом посте, ваш показатель PageSpeed ​​имеет меньшее значение, чем ваша фактическая и предполагаемая производительность. Чтобы эффективно обслуживать этот ресурс, вы можете рассмотреть возможность локального размещения Google Analytics.

Плагины

, такие как Complete Analytics Optimization Suite (CAOS) и Perfmatters, позволят вам сделать это. Вы можете узнать больше о процессе в нашем полном руководстве по этому предложению PageSpeed.

21. Снижение воздействия стороннего кода

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

Тем не менее, в некоторых случаях лучшим решением для потребностей вашего сайта является включение стороннего скрипта. Google Analytics — отличный пример. Другие включают:

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

Уменьшить влияние рекомендаций стороннего кода

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

• Отложить загрузку JavaScript
• Используйте теги ссылок с атрибутами preconnect
• Сторонние скрипты с самостоятельным размещением (как мы описали выше для Google Analytics)

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

22. Избегайте огромной сетевой полезной нагрузки

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

Избегайте огромной полезной нагрузки сети Рекомендация

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

• Отложенные CSS, JavaScript и изображения в нижней части страницы
• Минифицирующий код
• Сжатие файлов изображений
• Использование формата WebP для изображений
• Реализация кэширования

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

23. Пользовательские метки времени и меры

Эта рекомендация актуальна только в том случае, если вы используете User Timing API. Этот инструмент создает временные метки, чтобы помочь вам оценить производительность вашего JavaScript. Если вы настроили API для своего сайта, вы увидите свои оценки и меры под этим заголовком в PageSpeed ​​Insights:

.

User Timing отмечает и рекомендации по измерениям

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

Если вы заинтересованы во внедрении User Timing API в свой сайт WordPress, вы можете узнать больше в руководстве Mozilla по этой теме.

24. Избегайте чрезмерного размера объектной модели документа (DOM)

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

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

Избегайте чрезмерных рекомендаций по размеру DOM

Распространенным виновником, если вы «не прошли» аудит в PageSpeed ​​Insights, является ваша тема WordPress. Тяжелые темы часто добавляют в DOM большие объемы элементов, а также могут включать запутанный стиль, замедляющий работу вашего сайта.В этом случае вам может потребоваться переключить тему.

Вам сложно набрать 100 из 100 баллов на #Google PageSpeed? Совет: не зацикливайтесь на своем счете и сосредоточьтесь на том, что действительно влияет на загрузку вашей страницы! 🚀📊Нажмите, чтобы написать твит

Сводка

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

В этом посте мы рассмотрели, каким образом ваш показатель Google PageSpeed ​​Score имеет и не имеет значения. Мы также поделились некоторыми краткими рекомендациями по использованию рекомендаций платформы на вашем сайте WordPress с целью повышения его производительности.

У вас есть вопросы о Google PageSpeed ​​Insights или оптимизации производительности вашего сайта? Спросите в разделе комментариев ниже!

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Как интерпретировать и улучшить свою оценку Google PageSpeed ​​Insights

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

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

Исследование Google по скорости страницы

После просмотра 900 000 объявлений исследователи из Google обнаружили, что средняя мобильная целевая страница после клика загружается за 22 секунды. Это более чем в 7 раз дольше, чем большинство нетерпеливых интернет-пользователей будут ждать, прежде чем покинуть страницу, — 53%, если быть точным.

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

С помощью технологии машинного обучения от SOASTA исследователи обнаружили корреляцию между временем загрузки, весом страницы (размером данных) и коэффициентом конверсии. По сути, «тяжелее» означает медленнее. В частности, когда количество элементов (текст, изображения и т. Д.) на странице увеличивается с 400 до 6000, ваши шансы на конверсию посетителя снижаются на 95%.

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

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

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

Google PageSpeed ​​Insights — это инструмент, который позволяет быстро и легко проверить скорость веб-страницы.

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

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

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

Работает, по данным Google, так:

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

Рейтинг PageSpeed ​​Insights составляет от 0 до 100 баллов. Чем выше оценка, тем лучше, а оценка 85 или выше указывает на то, что страница работает хорошо.

Но достаточно ли «хорошо», когда люди ожидают, что страница загрузится мгновенно? Не тогда, когда на счету каждая секунда.Чтобы набрать как можно больше очков, вам нужно сделать следующее…

Достижение высокого балла Google PageSpeed ​​Insights

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

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

1. Избегайте переадресации с целевой страницы после клика.

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

• example.com использует адаптивный веб-дизайн, никаких перенаправлений не требуется — быстро и оптимально!
• example.com → m.example.com/home — штраф за несколько поездок для мобильных пользователей.
• example.com → www.example.com → m.example.com — очень медленная работа на мобильных устройствах.

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

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

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

Современные браузеры способны предоставлять пользователям Интернета меньшую альтернативную версию страницы. Если включен компрессор gzip, эти страницы могут уменьшиться в размере на 90%.

На своем веб-сайте Better Explained Халид Азад отлично описывает, как gzip оптимизирует процесс HTTP-запроса и ответа:

Однако, когда сжатие включено, процесс выглядит примерно так:

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

3. Минимизация CSS, HTML, JavaScript

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

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

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

4. Отдавайте предпочтение содержанию в верхней части страницы

Как ни странно это может показаться, время загрузки страницы зависит не только от ее скорости. Это также касается «воспринимаемой производительности». Брайан Джексон из KeyCDN объясняет:

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

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

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

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

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

• Запросы к базе данных
• Медленная маршрутизация
• Каркасы
• Библиотеки
• Истощение ресурсов ЦП
• Голод памяти

Для веб-сайта Рэлен Мори плохой хостинг был главным убийцей скорости. Она предупреждает читателей:

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

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

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

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

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

Если вы видите сообщение об ошибке «Устраните JavaScript, блокирующий рендеринг», это означает, что есть фрагмент кода JavaScript, который приостанавливает процесс загрузки для верхней части вашей страницы.В частности, в этой проблеме, вероятно, виноваты сторонние скрипты. Решить это тремя способами:

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

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

• Рассмотрите возможность встраивания скрипта — вставки небольших внешних ресурсов JavaScript непосредственно в ваш HTML-документ — чтобы уменьшить количество запросов, которые ваш браузер должен делать.

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

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

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

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

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

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

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

К счастью, оптимизировать изображения очень просто. Замена PNG файлом изображения JPEG может легко сэкономить размер вашей страницы и время загрузки. То же самое и с компрессорами изображений, такими как Guetzli и Zopfli от Google.

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

Посмотрите, где вы стоите, с Google PageSpeed ​​Insights

Какая у вас оценка в Google PageSpeed ​​Insights? Вы достигли рекомендованного 85+?

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

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

Подпишитесь на демонстрацию Instapage Enterprise сегодня.

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

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

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

• Почему скорость страницы имеет значение
• Как использовать PageSpeed ​​Insights
• Как повысить скорость вашей страницы Google
• и др.

Если вам нужна помощь в ускорении вашего веб-сайта, WebFX предлагает услуги по оптимизации скорости страницы, которые могут улучшить ваш пользовательский опыт, а также оценку Google PageSpeed ​​Insights.Свяжитесь с нами онлайн или позвоните нам по телефону 888-601-5359 , чтобы узнать больше сегодня!

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

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

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

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

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

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

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

2. Пользователи проводят меньше времени на вашей странице, если она медленная

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

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

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

3. Это влияет на коэффициент конверсии

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

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

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

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

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

4. Это влияет на ваш SEO-рейтинг

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

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

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

5. Это влияет на ваш показатель качества

Вы проводите кампанию с оплатой за клик (PPC)? В таком случае скорость вашей страницы повлияет на показатель качества вашего объявления.

Когда вы создаете кампанию PPC, ваша максимальная ставка и показатель качества определяют размещение вашей рекламы. Если ваш показатель качества снизится, это снизит позицию вашего объявления и потенциально увеличит ваши затраты на клик (CPC).

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

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

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

6. Это первое впечатление о вашем бизнесе у пользователей

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

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

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

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

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

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

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

Как использовать Google PageSpeed ​​Insights

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

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

Внутри системы показателей Google PageSpeed ​​Insights

Когда вы попадете на экран результатов Google PageSpeed ​​Insights, вы увидите две оценки.

Один — это рейтинг скорости вашей страницы, а другой — рейтинг оптимизации.

Рейтинг скорости страницы

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

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

При скорости вашей страницы вы увидите два разных числа:

• First Contentful Paint (FCP) : FCP измеряет, сколько времени требуется пользователям, чтобы увидеть визуальный ответ от вашей страницы.На приведенном выше примере фотографии пользователи видят ответ содержания за одну секунду.
• DOM Content Loaded (DCL) : DCL измеряет, когда ваши HTML-документы загружены. Вы хотите, чтобы это число было низким (например, 1,2 секунды на фото в примере), так как это приводит к более низкому показателю отказов. Как мы обсуждали ранее, более низкий показатель отказов является признаком удержания потенциальных клиентов и увеличит ваш SEO-рейтинг на страницах результатов поисковых систем.

Оценка оптимизации

Затем вам нужно посмотреть свой показатель оптимизации.Данная оценка выставлена ​​на 100 баллов.

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

Ваша оценка оптимизации в основном сосредоточена на двух областях:

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

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

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

Независимое исследование Clutch назвало WebFX ведущей SEO-компанией в США.

Более 200 клиентов WebFX были опрошены Clutch, чтобы обсудить их опыт сотрудничества с нами.

Ознакомьтесь с другими отзывами о Clutch

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

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

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

7 советов по повышению вашей оценки PageSpeed ​​Insights

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

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

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

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

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

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

2. Уменьшите количество и размер больших файлов

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

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

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

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

SEO-проверка скорости страницы: огромная ценность теста скорости страницы

3.Минимизировать CSS, JavaScript и HTML

Когда вы создаете свой сайт, вы используете код для его создания. Этот код создает структуру вашего сайта.

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

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

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

4. Сократите количество перенаправлений

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

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

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

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

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

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

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

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

6. Используйте сеть распространения контента (CDN)

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

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

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

PageSpeed ​​Insights в сравнении со службами скорости страницы

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

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

Итак, в чем разница?

«PageSpeed ​​Insights требует, чтобы вы внесли рекомендуемые изменения. Сервисы скорости страницы вносят изменения за вас ».

При использовании PageSpeed ​​Insights необходимо самостоятельно вносить изменения.Предложения предоставляются Google, но вы должны внести изменения самостоятельно.

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

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

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

WebFX — компания, занимающаяся оптимизацией максимальной скорости загрузки страниц.

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

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

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

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

Начните увеличивать скорость своей страницы Google уже сегодня

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

Мы надеемся помочь вашему бизнесу расти!

Руководство PageSpeed ​​Insights по увеличению скорости загрузки веб-сайта

Если ваш сайт работает медленно, вы теряете бизнес. Это так просто.

По словам Google, «скорость равняется доходу».

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

Почему? Пользователи с гораздо большей вероятностью откажутся от медленного веб-сайта, и вероятность этого увеличивается более чем на 100%, если время загрузки страницы увеличивается с 1 до 6 с:

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

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

Проверьте работоспособность своего веб-сайта

С помощью инструмента аудита сайта SEMrush

Почему скорость имеет значение

От Интернета ожидается скорость. Еще в 2010 году Google подтвердил, что скорость страницы является фактором ранжирования. Затем он «был сосредоточен на поиске на настольных компьютерах», пока в июле 2018 г. не было выпущено специальное обновление PageSpeed ​​для мобильных устройств. Хотя скорость является одним из более чем 200 факторов ранжирования, никто из нас не хочет без надобности терять бизнес.Особенно для того, что обычно находится под нашим контролем. Фактически, SEO-блог Backlinko проанализировал 1 миллион результатов поиска Google и обнаружил «сильную корреляцию между скоростью сайта и рейтингом в Google».

Но помимо SEO, мы уже видели, как количество отказов страниц увеличивается по мере того, как скорость сайта замедляется. Действительно, исследование американского агентства цифрового маркетинга Portent в 2019 году показало, что «коэффициент конверсии падает в среднем на 4,42% с каждой дополнительной секундой загрузки (между 0-5 секундами)». Также было обнаружено, что первые 5 секунд загрузки страницы оказали наибольшее влияние на коэффициент конверсии.

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

Передайте привет инструменту Google PageSpeed ​​Insights

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

На самом деле, это, пожалуй, самый популярный инструмент анализа скорости загрузки страниц, так что оно того стоит.

Вы, наверное, задаетесь вопросом: «Как мне получить оценку 100/100 с помощью PageSpeed ​​Insights?» Притормози.Во-первых, вам нужно знать, как правильно использовать инструмент и как реализовывать предложения, которые он вносит. В противном случае вы можете не увидеть тех приростов производительности, которые могут иметь такое значение для вашего сайта. Также важно понимать, что такое PageSpeed, а что нет.

Скорость страницы и время загрузки

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

PageSpeed ​​

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

Время загрузки

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

Что это значит для вас?

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

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

Инструмент Google PagesSpeed ​​Insights работает на платформе Lighthouse и предоставляет как «лабораторные данные», так и «полевые данные» для страницы. «Лабораторные данные» собираются в контролируемой среде при сканировании страницы и являются отличным способом выявления проблем с производительностью и найдите решения для их устранения. «Полевые данные», с другой стороны, собираются из реальных данных о производительности, когда пользователи загружают вашу страницу.Здесь могут проявиться некоторые проблемы и очевидные узкие места, которые затрудняют конверсию для ваших реальных посетителей.

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

• 3x — первая содержательная краска.

• 1x — первая содержательная краска.

• 2x — первый процессор простаивает.

• 5x — время на интерактив.

• 4x — индекс скорости.

• 0x — расчетная задержка ввода.

Но вы этого не увидите. Вы увидите отчет о производительности и цвет, зависящий от того, в какую корзину он попадает. Сообщается как:

• Красный (низкая оценка): 0-49

• Оранжевый (средний): 50-89

• Зеленый (хорошо): 90-100

Итак, зная немного больше о PageSpeed ​​Insights, что это такое и как рассчитываются его оценки, с чего начать?

Как использовать PageSpeed ​​Insights

1.Перейдите к инструменту PageSpeed ​​Insights:

2. Введите URL-адрес веб-страницы. Это не обязательно должен быть корневой домен / домашняя страница. После того, как инструмент вычислит оценки и рекомендации, вы увидите следующее:

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

Чтобы по-настоящему понять, как использовать PageSpeed ​​Insights, вам нужно знать, что все, что вы видите, означает и как это интерпретировать.

Оценка скорости

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

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

Полевые данные

«Полевые данные» показывают, как страница работала за последние 30 дней по сравнению с другими в отчете о пользовательском опыте Chrome, который представляет собой пул показателей производительности, собранных у некоторых пользователей браузера Google Chrome.

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

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

Первая отрисовка содержимого (FCP)

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

Задержка первого ввода (FID)

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

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

Лабораторные данные

«Лабораторные данные» по сравнению с «полевыми данными» основаны на Lighthouse-анализе страницы и эмулируемого устройства и подключения. Хотя это не показывает реальных данных, оно все же полезно для понимания того, где возникают проблемы. Опять же, PageSpeed ​​Insights использует здесь знакомую систему окраски светофора для обозначения производительности: отображение круга для зеленых баллов, квадрата для оранжевого и треугольника для красного.

First Contentful Paint (FCP)

Хотя FCP показан в отчете «полевые данные», он основан на эмулированном анализе Lighthouse, а не на реальных данных.

Первая значимая отрисовка

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

Индекс скорости

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

Первый процессор простаивает

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

Время до интерактивности (TTI)

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

Макс. Потенциальная задержка первого входа

Помните FID в отчете «полевые данные»? Для «лабораторных данных» это указывается как максимальная потенциальная задержка первого ввода и показывает продолжительность самой долгой задачи после FCP, с которой могли столкнуться пользователи.

Возможности

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

Диагностика

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

Пройденные аудиты

Пройденные аудиты — это то, на что это похоже.

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

Даже если вы не достигнете 100/100, у вас все равно будет сайт с быстрой загрузкой. Помните, что PageSpeed ​​сам по себе не является прямым индикатором времени загрузки.

Существует вероятность того, что вы никогда не достигнете высшей оценки, несмотря на внесение радикальных улучшений, которые положительно повлияют на время загрузки вашего сайта. Сосредоточьте свои усилия и ресурсы там, где они имеют наибольший смысл. Как заявляет хостинговая платформа WordPress Kinsta, «получение 100/100 в Google PageSpeed ​​Insights на самом деле не так важно.«Это часто упоминается как распространенный миф о том, что для хорошей работы вашего сайта необходимо набрать 100/100.

Помните, что реальным показателем производительности вашего сайта является время загрузки, а не оценка PageSpeed ​​Insights. Тем не менее , мы видим, что сам Google разбивает, что плохая оценка составляет от 0 до 49, средняя — от 50 до 89, а хорошая — 90+. Стремитесь высоко, конечно, но не зацикливайтесь на том, чтобы получить оценку 100. Также важно понимать, как сайты, с которыми вы напрямую конкурируете в поисковой выдаче, в какой-то степени складываются.Если у вас более быстрое время загрузки и лучшая оценка PageSpeed, но все же оценка, скажем, 92/100, есть большая вероятность, что ваши усилия могут быть лучше распределены в другом месте.

Как повысить свой показатель PageSpeed ​​Insights

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

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

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

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

• Размер диска образа.

• Отображаемый размер и фактический размер изображения в пикселях.

• Отложенная загрузка закадрового изображения.

• Используйте сеть доставки контента (CDN).

• Использование изображений следующего поколения.

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

Загрузка изображения размером 1 МБ занимает больше времени, чем изображения размером 100 КБ. Чтобы решить эту проблему, работайте над сжатием изображений без потери качества. Для этого вы можете использовать такие инструменты, как TinyPNG, или взглянуть на рекомендацию Google, ImageMagick.

Размер изображений соответствует размеру экрана

Другая распространенная проблема — изображения излишне крупнее, чем они должны быть.Представьте, что на вашей странице отображается изображение размером 250 на 250 пикселей. Если исходное изображение на самом деле имеет размер 1000 на 1000 пикселей, но при этом оно имеет меньший размер с помощью CSS, вы можете ускорить загрузку. В его нынешнем виде браузеру потребуется загрузить исходное (большее) изображение для отображения в меньшем размере.

Используйте сеть доставки контента (CDN)

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

Использование CDN по существу распределяет нагрузку на сервер по ряду различных мест и использует то, что ближе всего к пользователю, для обслуживания ресурсов. Чем ближе данные, тем быстрее время загрузки. Звучит неплохо? Перед тем, как попробовать, ознакомьтесь с обязательными методами SEO для CDN.

Отложить закадровые изображения

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

Используйте форматы изображений следующего поколения

Наконец, рассмотрите возможность использования форматов изображений следующего поколения, таких как WebP. Было продемонстрировано, что изображения WebP могут привести к уменьшению среднего размера изображения на 85,87% по сравнению с JPG и к уменьшению на 42,8% по сравнению с PNG.

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

Улучшение времени отклика сервера

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

Если вы видите рекомендации, касающиеся либо времени ответа сервера, либо TTFB (времени до первого байта), поговорите со своим хостинг-провайдером или рассмотрите варианты хостинга, более подходящие для вашего сайта.

Минификация

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

Кэширование в браузере

Если вы используете WordPress в качестве CMS (что, по оценкам, 35% Интернета), использовать кеширование браузера с помощью популярных бесплатных плагинов, включая W3 Total Cache и WP Super Cache, не может быть проще.

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

Если вы не используете WordPress, вы все равно можете настроить кеширование браузера вручную.

Очистить перенаправления

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

Использование SEMrush Site Audit в качестве альтернативы PageSpeed ​​Insights

SEMrush Site Audit — отличный способ проверить вашу скорость.

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

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

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

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

• Проблемы с большим размером страницы HTML.

• Цепочки и петли перенаправления.

• Низкая скорость загрузки страницы.

• Несжатые страницы.

• Несжатые файлы Javascript и CSS.

• Некэшированных файлов Javascript и CSS.

• Слишком большой общий размер JavaScript и CSS.

• Слишком много файлов JavaScript и CSS.

• Унифицированные файлы JavaScript и CSS.

• Среднее медленное интерактивное время документа.

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

Когда вы начнете повышать скорость своего сайта?

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

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

8-шаговое руководство по достижению 100% скорости загрузки страниц в Google

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

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

Для тех, кто хочет получить представление о времени загрузки, Google предлагает бесплатный инструмент PageSpeeds Insights, который может оценить вашу страницу по шкале от нуля до 100.Вот краткий пример отчета, который PageSpeed ​​Insights представляет после поиска по запросу «google.com»:

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

Вот пример отчета с длинным списком жаргонных комментариев:

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

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

Как достичь 100% скорости страницы Google

1. Определите, отстаете ли вы и где именно.
2. Сжимайте изображения.
3. Сжимайте или минимизируйте код HTML, CSS и JavaScript.
4. Удалите элементы, блокирующие рендеринг.
5. Увеличьте скорость своего мобильного телефона.
6. Избегайте или минимизируйте перенаправления страниц.
7. Увеличьте время ответа сервера.
8. Используйте сеть доставки контента.

1. Определите, отстаете ли вы и где именно.

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

Вот пять бесплатных инструментов, которые вы можете попробовать:

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

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

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

2. Сожмите изображения.

Большие изображения — одна из наиболее частых причин низкой скорости страницы. Существует много разных мнений об оптимальном размере файла.В то время как некоторые хосты говорят, что вам следует стремиться к файлам размером менее 200 КБ, в блоге Shopify предлагается использовать файлы размером менее 70 КБ. Разработчики Google предлагают уменьшить размер изображения до потери четкости.

Чтобы уменьшить ваши изображения без полного ухудшения качества, мы предлагаем сжимать файлы с помощью бесплатного онлайн-программного обеспечения, такого как Squoosh.app или Compress.io. Вы также можете использовать Photoshop.

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

Размер вашего дисплея не совпадает с размером файла. Размер дисплея — это просто размер изображения на вашем веб-сайте.

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

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

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

3. Сжать или минимизировать код HTML, CSS и JavaScript.

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

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

4. Удалите элементы, блокирующие рендеринг.

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

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

5. Увеличьте скорость своего мобильного телефона.

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

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

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

Службы

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

6. Избегайте или минимизируйте перенаправления страниц.

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

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

7. Увеличьте время отклика вашего сервера.

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

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

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

8. Используйте сеть доставки контента.

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

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

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

Если вы создали свой сайт с помощью CMS, например HubSpot, он может уже работать в CDN. GoDaddy и Squarespace — другие примеры программного обеспечения для управления контентом, которое предлагает услугу CDN. Пользователи WordPress также могут установить ряд бесплатных плагинов, например CDN Enabler.

Если вы не думаете, что у вас есть CDN, несколько поставщиков CDN включают Amazon CloudFront, Cloudflare и сеть доставки контента AT&T.

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

Google Updates Оценки PageSpeed ​​Insights

Показатели PageSpeed ​​Insights (PSI) в последнее время улучшились по всем направлениям. Но улучшения не имеют ничего общего с какими-либо изменениями, внесенными на веб-сайты, получившие более высокие оценки. Улучшения произошли на стороне Google.

PageSpeed ​​Insights

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

PSI предоставляет два вида отчетов: лабораторные данные и полевые данные .

Лабораторные данные

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

Объявление

Продолжить чтение ниже

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

Лабораторные данные — это способ проверить веб-страницу и определить области, которые нуждаются в улучшении.

Полевые данные

Полевые данные — это информация, собранная фактическими пользователями, просматривающими сайт с помощью Chrome, и заархивированная в отчете об опыте пользователей Chrome (CrUX).

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

Оценки Core Web Vitals получены из полевых данных, заархивированных в CrUX.

Эти показатели состоят из Largest Contentful Paint , First Input Delay и Cumulative Layout Shift .

Объявление

Продолжить чтение ниже

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

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

Google обновил способ сбора данных в PageSpeed ​​Insights

Google объявил о важном изменении способа сбора информации инструментами PageSpeed ​​Insights. Изменение заключается в переходе на использование протокола http / 2 для подключения к веб-странице.

PageSpeed ​​Insights Использование HTTP / 2

HTTP / 2 — это усовершенствованный протокол сетевого подключения, который обеспечивает более быструю передачу данных. В предыдущем протоколе HTTP / 1.x существовали ограничения на объем передаваемых данных, что приводило к различным обходным путям.

Протокол HTTP / 2 не имеет этих ограничений.

Согласно объяснению HTTP / 2, опубликованному Google:

«HTTP / 2 изменяет форматирование данных (обрамление) и их передачу между клиентом и сервером, оба из которых управляют всем процессом, и скрывают все сложность наших приложений в новом слое кадрирования.

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

Объявление

Продолжить чтение ниже

HTTP / 2 обеспечивает более быструю передачу данных.Это, в свою очередь, улучшило показатели PageSpeed ​​Insights по всем показателям. Единственное зависание — если ваш сервер не поддерживает HTTP / 2.

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

Существует множество инструментов, которые проверяют веб-сайты на совместимость с HTTP / 2. Инструмент Google Lighthouse идет дальше, сообщая, если сторонние ресурсы загружены сайтом, не поддерживающим HTTP / 2.

HTTP / 2 обеспечивает повышение производительности для клиентов (браузеров и поисковых роботов), поддерживающих HTTP / 2.

Объявление

Продолжить чтение ниже

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

Объявление об обновлении PageSpeed ​​Insights от Google

Согласно сообщению Google:

«По состоянию на 3 марта 2021 года PageSpeed ​​Insights использует http / 2 для выполнения сетевых запросов, если сервер поддерживает его.

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

В целом показатели производительности по всем запускам PageSpeed ​​Insights выросли на несколько пунктов ».

Показатели PageSpeed ​​Insights теперь выше

Если вы были приятно удивлены, увидев более высокие результаты PageSpeed ​​Insights, начиная с 3 марта, это причина. Так что не забивай об этом.

Объявление

Продолжить чтение ниже

KeyCDN HTTP / 2 Testing Tool

Официальное объявление PSI, теперь использующего HTTP / 2

Отчет об опыте пользователя Chrome (CrUX)

.