Гугл пейдж спид: Sorry, this page can’t be found.

Содержание

PageSpeed — Как повысить показатель google PageSpeed?

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

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

Из статьи вы узнаете:

Как проверить PageSpeed сайта и как алгоритм PageSpeed поменялся в 2018 году

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

Сервис начисляет баллы за скорость сайта в десктопной и мобильной версиях. Максимальное количество — 100.

Чтобы проверить скорость, нужно зайти на страницу сервиса и ввести имя сайта:

Скорость сайта Facebook в десктопной версии

До изменений в работе алгоритма баллы начислялись за соблюдение правил и выполнение задач:

PageSpeed Insights говорит, что сайт — молодец: не использует редиректы, CSS в контенте без прокрутки, — подчиняется правилам. Поэтому сайт получает 100 баллов

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

Загрузка страницы оценивается по нескольким характеристикам:

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

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

До изменений в алгоритме наш PageSpeed в десктопной версии был в районе 90 баллов из 100 — это так называемая зеленая зона. После обновления алгоритма мы попали в красную зону — упали с 90 до опасных 33 баллов в десктопной версии и с 40 до 23 в мобильной.

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

Что мы сделали, чтобы повысить показатель PageSpeed

Мы провели много экспериментов для того, чтобы понять, что влияет на скорость, и как сильно.

Для тестов взяли несколько страниц — в частности, нашу страницу виртуального хостинга.

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

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

С чем мы экспериментировали для ускорения загрузки сайта:

вместо мгновенной загрузки чата делали отложенную на 6 секунд загрузку,
подключали параметр lazyload, чтобы изображения подгружались отложенно,
подключали не общий файл CSS, а только его кусочек для нужной страницы,
отключали Google Tag Manager с кучей JavaScript.

После каждого эксперимента мы замеряли скорость страницы и снова тестировали новые гипотезы.

В результате поняли, что самая действенная комбинация — это подключать кусочек CSS для нужной страницы, делать отложенную на 6 секунд загрузку чата и отключать Google Tag Manager. Таким образом, наша скорость в десктопной версии выросла с 33 до 59 баллов, в мобильной — с 23 до 38.

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

После уменьшения времени до одной секунды ситуация улучшилась. Кроме этого мы оставили общий JavaScript, который подключался после загрузки HTML-файла. В итоге PageSpeed в десктопной версии вырос до 92 баллов, а в мобильной — до 42:

Скорость сайта HOSTiQ после оптимизации под обновленный алгоритм

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

Мы также заметили, что баллы PageSpeed могут колебаться в пределах даже одного дня. При эксперименте с одним и тем же сайтом в течение 10 минут количество баллов за скорость колебалось — сначала сервис выдавал 34 балла, через 10 минут — 43. Это зависит от работы 3G/4G сетей, используемых компанией-аналитиком Lighthouse для предоставления данных, варьируемого времени ответа сервера и базы данных для загрузки ресурсов страниц — иконок, изображений, шрифтов, CSS.

Советы, как ускорить загрузку сайта и улучшить показатель PageSpeed

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

Пример советов по оптимизации загрузки сайта Facebook

- Обращайте внимание также на скорость сайта в мобильной версии — Google Page Insights дает аудит по десктопной и мобильной версиям. Оптимизированные сайты под мобильную версию становятся сегодня все важнее для поисковиков.
- Первыми проверяйте изображения — часто проблема в том, что они не оптимизированы. Топ-замечаний Google — загружайте картинки в новых форматах, правильно вставляйте код картинок. Google также выпустила экспериментальное приложение Squoosh, которое помогает сжимать изображения.
- Используйте формат JPEG для изображений — он сжимается без потери качества.
- Загружайте фоновые картинки через внешний, или сторонний CSS.
- Минимизируйте пробелы и теги комментариев — каждая буква или пробел занимает один байт HTML-кода.
- Критично важно оптимизировать или как можно меньше использовать Javascript — в экспериментах компании Milestone после удаления внутреннего Javascript с сайта баллы за Pagespeed выросли с 49 до 87. Также не стоит использовать сторонний Javascript.
- Удаляйте ненужный CSS. Когда вы используете преднастроенные темы и плагины WordPress, в них обычно содержится больше кода, чем нужно. Когда PageSpeed Insights проанализирует страницу, нажмите на «Сократить HTML» — «Посмотреть содержание» — он подскажет, как ускорить загрузку страниц.
- Оптимизируйте базы данных — по мере роста проекта базы данных растут и работают медленнее. Поэтому нужно регулярно избавляться от спама, ненужных таблиц. Удалить ненужные данные можно вручную через phpMyAdmin в разделе SQL или с помощью сторонних плагинов.
- Уменьшайте количество редиректов и удаляйте лишние плагины.
- Настройте кэширование на стороне браузера. Для этого в файле .htaccess пропишите директивы: Expires — отвечает за актуальность кэша: можно установить срок от недели до года. Last-Modified и ETag — устанавливают в кэше уникальный id для каждого url.
- Попробуйте использовать инструменты Google для оптимизации загрузки.
- После внедренных улучшений регулярно мониторьте PageSpeed сайта и проводите работы по его оптимизации. А сервис PageSpeed Insights всегда поможет вам с этим — подскажет, как ускорить работу сайта.

Попробуйте хостинг с кучей плюшек: автоустановщиком 330 движков, конструктором сайтов и теплой поддержкой 24/7!

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

Антон Юдин |
53692

Оптимизация,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». В итоге была оптимизирована не только главная страница, но и все внутренние страницы.

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

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

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

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

Хочется еще раз напомнить о том, что 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.

Ускорить сайт для Google Page Speed и оптимизировать сервер

В Google скорость загрузки — один из критических показателей при оценке качества сайта. Чтобы оценивать производительность веб-ресурсов, были разработаны метрики Core Web Vitals, которые будут постепенно внедряться в алгоритм поисковика и оказывать серьезное влияние на ранжирование. Одним словом, если медленно загружается сайт, он будет понижаться в выдаче.

А что Яндекс? У этого поисковика примерно такой же подход. Скорость входит в ТОП-10 факторов, оказывающих ключевое влияние на ранжирование и успешность продвижения.

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

снижает конверсию на 9%;

на 16% уменьшает степень удовлетворенности посетителей;

приводит к уменьшению количества просматриваемых пользователями страниц на 11%.

А в комплексе все это приводит к просадке конверсии на уровне 19%. Данные усреднённые. И цифры могут быть, как чуть меньше, так и значительно выше, в зависимости от типа веб-ресурса и ниши.

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

Единственно верная и эффективная технология ускорения сайтов

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

Вы постоянно платите за использование CDN.

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

Возможность бана IP-адресов CDN-серверов.

Что предлагает GetManySpeed

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

Увеличение скорости загрузки сайта достигается благодаря:

Оптимизации frontend-части. Мы чистим html и css, минифицируем (сжимаем) их. Работаем со скриптами (минификация, оптимизация кода и пр.). Сжимаем изображения, переводим их в формат webm и т.д.

Улучшение работы backend-части. Анализируем PHP-код, оптимизируем запросы к базам данных и сами БД, при необходимости.

Настраиваем серверы. Мы знаем, как как ускорить сайт, размещенный на VPS/VDS или dedicated-сервере. Используем Ngix в связке с Apache и другими технологиями, настраиваем gzip-сжатие, кэширование и пр.

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

Можем ускорить любой сайт

Применяемый нами подход подходит для любых веб-ресурсов. Обращайтесь, если медленно загружаются страницы сайта на WordPress, Joomla, Opencart или на любой другой CMS. Также работаем с самописными системами управления контентом. Есть опыт оптимизации скорости загрузки ресурсов на популярных онлайн-конструкторах.

Что вы получаете при обращении в GetManySpeed

Мы предоставляем подробный отчет со сравнением параметров быстродействия «до» и «после». При обращении к нам вы получаете:

Увеличение скорости по «Гугл Пейдж Спид» и другим сервисам. Это положительно влияет на продвижение.

Снижение количества отказов и как следствие — рост показателей конверсии.

Гарантию сохранения эффекта ускорения. Скорость вашего сайта не будет зависеть ни от каких CDN или иных сервисов.

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

12 способов измерить скорость загрузки сайта в 2019 году

Медленный сайт — убийца продаж!

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

Гугл пишет, что 53% людей уходят с сайта, если он загружается больше 3-х секунд.

79% людей, не вернутся на ваш сайт, если были недовольны скоростью его работы в первый раз. По статистике Skilled.co.

64% ожидают скорости загрузки сайта не более 4-х секунд.

Одна секунда задержки загрузки может снизить конверсию на 7%.

1 секунда задержки загрузки страниц, равно 11% потерянных переходов внутри сайта.

Самые упоминаемые сервисы для проверки скорости загрузки сайта

Данные по времени запуска отсмотрены вручную из Web Archive.

1. Google PageSpeed Insights

Самый популярный сервис проверки скорости сайта. В 2018 году он сильно обновился, после переезда на технологию LightHouse. И только с 2018 года Гугл Пейдж Спид начал замерять скорость сайта. Не рекомендую ориентироваться только на его показатели. Используйте вместе с Google PageSpeed Insights сервис GTmetrix.com и LOADING.express. Есть вторая версия, ориентированная больше на простых пользователей от Гугл — Think With Google. Замеры из Европы. Работает с 2012 года.

Ссылка на сервис здесь.

2. GTmetrix

Удобный сервис. Хороший дизайн. Быстрый интерфейс. Измеряет на максимальной скорости устройства и интернет канала. Именно этим и отличается от PageSpeed. Сделано в Канаде в 2010 году. Замеров из России не делает. Но есть хорошие функции, вроде видео с загрузкой сайта. Посекундное отображение загрузки контента сайта и WaterFall — это когда вы можете посмотреть все составляющие вашего сайта в детальной картине загрузки сайта. Очень мощный инструмент для работы над ускорением сайта.

Ссылка на сервис здесь.

3. WebPagetest

Отличный сервис для профессионалов. Много полезных функций. Юзабилити оставляет желать лучшего. Так обычно делают технари для технарей. Удобные видео отчеты загрузки с секундомером. Удобная функция сравнения нескольких сайтов между собой. Работает с 2009 года. Проверки из разных стран. Имеет открытый код и API.

Ссылка на сервис здесь.

4. Pingdom Tools

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

Обычно после прогружаются разные динамические JS-события и это может занимать до +15 секунд. В это время пользователь не сможет кликать ссылки, меню или свободно скролить страницу. Создан в 2006.

Ссылка на сервис здесь.

5. Loading.express

Made in Russia с любовью к быстрым сайтам. Команда разработчиков из IW.MEDIA создали сервис с проверками из России. Это один из наиболее точных замеров скорости загрузки, потому как остальные популярные сервисы замеряют из Европы или из США.

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

Ссылка на сервис здесь.

6. Dotcom-Monitor

25 стран за один тест! Причем, сразу делает замер без кэша и с прокешированной страницей. Показывает PageSpeed. Запущен в 2014 году.

Ссылка на сервис здесь.

7. Sitespeed.me

Проверка из 7 стран. Работает с 2014 года. Из функций — только проверка на скорость загрузки.

Ссылка на сервис здесь.

8. Dareboost

Хороший сервис из Франции. Сканирует много показателей, важных для скорости загрузки. Создает видео загрузки. WaterFall. Очень функционально. 14 стран, из которых можно делать проверку скорости загрузки сайта. Можно сравнивать несколько сайтов между собой после регистрации. Сервис ограничен в бесплатной версии, но даже просто зарегистрировавшись можно получить хорошие функции. Запущен в 2014 году.

Ссылка на сервис здесь.

9. GiftofSpeed

Проверка скорости из 8 стран, без России. Плюс 16 сервисов для проверки свойств, влияющих на скорость загрузки сайта. Ускорят ваш сайт по заявке. Запустились в 2015 году из Нидерландов.

Ссылка на сервис здесь.

10. Uptrends

Тоже из Нидерландов. С автоматической перепроверкой, с платной историей. можно бесплатно проверять с мобильного и с десктоп. Работает с 2014 года.

Ссылка на сервис здесь.

11. KeyCDN

Проверка из 14 стран. Продажа сопутствующих услуг. Работает с 2015 года. Швейцария.

Ссылка на сервис здесь.

12. Site24×7

Продукт от компании ZOHO. Индия. Замеряет скорость загрузки первого байта, скорость загрузки последнего байта и скорость ответа сервера. Есть точки замера в Петербурге и Москве. Работает с 2007 года.

Ссылка на сервис здесь.

Выводы

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

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

Ускоряйте ваши сайты. Увеличивайте конверсию!

Предлагаю посмотреть на интересные рейтинги скорости загрузки сайтов и других параметров:

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

Рейтинг сайтов веб-студий России по версии «Рейтинга рунета», тут есть веб-студии, страницы у которых весят более 70 МБ.

Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights

Выпускающий редактор SEOnews

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

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Все владельцы сайтов могут значительно увеличить скорость загрузки страниц, считает Ник и рассказывает, как это сделать.

Операция «Ускорить WordPress»

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

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

хостинг,

тема,

плагины,

изображения,

ресурсы.

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

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кеширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

предлагали услуги хостинга специально для WordPress-сайтов,

относительно доступны по цене ($25-30 в месяц),

предлагали решения для кеширования на сервере,

имели встроенную технологию CDN,

предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

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

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

Проблема: оптимизация тем, плагинов, изображений, ресурсов

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

Тема WordPress

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

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

Плагины

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

Изображения

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

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

Ресурсы

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

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

Решение: создание нового сайта

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

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

чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,

установка облегченной темы,

установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,

перестройка всего сайта,

оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,

установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

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

отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,

удалить из верхней части страницы код CSS и Inline,

оптимизировать файлы JS / CSS,

установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,

улучшить кеширование для ресурсов.

Заключение

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

Источник: NickLeRoy

скорость загрузки как фактор ранжирования

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

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

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

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

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

Page speed vs PageSpeed Insights

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

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

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

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

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

Какие вообще средства оптимизации для ускорения сайтов предлагает Google?

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

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

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

Ранее Page Speed Insights можно было использовать в виде расширений для браузеров и , ссылки на скачивание присутствовали на специальной странице Гугла. Причем для того, чтобы применять его в Мазиле, сначала необходимо было , где Пейдж Спид присутствовал в качестве его дополнения:

Сейчас уже нет возможности применять расширения для браузеров именно от Google, хотя такие же плагины, но в несколько другой интерпретации, доступны на официальных вебстраницах Хрома и Мазилы ( и ). Кроме того есть, вполне функциональный одноименный онлайн сервис Гугла с точно таким же функционалом и не меньшими возможностями. Если перейдете в раздел Developers , то увидите там ссылку на инструмент Page Speed:

К слову, на этой же странице «PageSpeed Tools»
расположены все предложения Google по ускорению сайтов. Похоже, разработчики «империи добра» всерьез взялись за оптимизацию и ускорение всего интернет пространства, поскольку в Девелоперс вы найдете линк на Библиотеку Оптимизации (Integrate the PageSpeed Optimization Library
) с открытым исходным кодом.

Наличие открытого кода программного обеспечения данного проекта, работающего на основе модуля «mod_pagespeed
», который устанавливается на сервера Апач (коих, кстати, подавляющее большинство), означает, что его может усовершенствовать или обновить любой желающий.

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

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

Причем, существуют две модификации модуля Пейдж Спид: непосредственно для серверов Apache и для связки Apache + Nginx, где второй играет роль прокси-сервера:

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

Google»s PageSpeed рекомендует (пути для увеличения скорости загрузки страниц сайта)

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

Но для основной части читателей, то есть простых вебмастеров, более актуален вариант, который понятен и доступен «здесь и сейчас». Как раз таким условиям в полной мере соответствует сервис PageSpeed Insights, о котором подробнее и поговорим. Для анализа конкретной страницы сайта вводите ее URL () на этой страничке :

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

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

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

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

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

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

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

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

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

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

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

Модуль Google PageSpeed для сайта: что умеет и как пользоваться

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

Сайты должны грузиться мгновенно. Ах, нет, сайты ничего никому не должны? Зайдите в троллейбус и сядьте рядом со студентом, который сидит с айфоном. Посмотрите, готов ли он ждать, пока загрузится какой-то интернет-магазин. Скажем так: три секунды — и вкладка закрывается. В ход идет следующий результат из поисковой выдачи.

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

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

— Мэтт Каттс, Google

Гугл потрудился и выпустил свой инструмент для проверки скорости — PageSpeed. Найти тормозящие загрузку элементы просто — заходим сюда
и в единственном поле указываем адрес, который хочется протестировать. За минуту будет готов подробный отчет о производительности. Результат будет показан в попугаях. В идеале их сто, но попробуй-ка добейся! Даже самому Гуглу это не под силу: проверьте его сервисы:)

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

Оптимизировать сайт можно двумя способами.

Ручная оптимизация

1. Сжимаем картинки Фотошопом или прогоняем через Optimizilla
, например

Чем меньше весят картинки, тем больше шакалов тем быстрее загружается сайт. Делаем сжатие, многомегапиксельные фотки прячем под кат. Хватит превьюшки 640×480. Меньше картинка — шустрее сайт.

Даже на стартовой странице Google Developers графику можно сжать на 71%.

2. Выполняем подключение шрифтов с самого сайта, а не тянем их с гуглофонтов

Минус — пока браузер не загрузил шрифт, юзер увидит надоевший Ариал или Тахому.

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

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

4. Сокращаем JavaScript и CSS

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

5. Сокращаем HTML

На практике — удаление лишних пробелов, табов, переносов строк.

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

Можно встроенным в «Хром» аудитом. Нажимаем F12 и переходим на вкладку Audits. Внизу есть единственная кнопка Run. Занимается в целом тем же самым, что и PageSpeed. Только в реальном времени.

Автоматическая оптимизация

Любой сайт состоит из динамических и статических элементов. Динамические элементы — сам HTML-код, полученный из работы php и запросов к базе данных. А остальное — статика. Это картинки, JavaScript и CSS.

Автоматически оптимизировать сайт можно крутой штукой от Гугла — PageSpeed Insights. Этот модуль устанавливается на сервер nginx и после настроек сжимает в реальном времени дофига инфы
, в том числе, графической.

PageSpeed Insights умеет анализировать HTML и оптимизировать ресурсы. Пережимать, короче. В исходном коде ресурсы будут находиться по другому пути, не по тому, что задан сжать фоточку разработчиком. Это стоит учитывать. Но отображение ресурсов не изменится. Уменьшится вес. А значит, возрастет скорость загрузки страницы и посетители станут довольнее:)

Однако у PageSpeed Insights имеются ограничения. Его можно поставить только на nginx, запущенный на или виртуальном сервере. Нет, арендованный где-то в Германии shared-сервер не подойдет.

Второе ограничение связано с вечной войной браузеров. Картинки, пережатые PageSpeed-ом, конвертируются в формат.webp, который понимает только «Хром» (на всенародно любимом Internet Explorer 6 такая штука не пройдет). В последних версиях отображению таких картинок научилась и «Опера». Потому что движок поменяла.

Примеры использования PageSpeed Insights

Мы установили модуль PageSpeed Insights на трех проектах — на своем новом сайте и на двух клиентских. Модуль видит, с какого браузера приходит запрос, смотрит, обучен ли он отображать webp-формат и отдает либо оптимизированную картинку, либо обычный jpeg.

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

Сейчас обе версии стоят в зеленой зоне. Значит, проблем со скоростью не возникнет. Если скорость подключения хорошая, не EDGE какой-нибудь:)

В рамках технической поддержки интернет-магазина фабрики «Витра» мы решили поэкспериментировать и установить модуль PageSpeed Insights на него:

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

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

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

Optimize images

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

Enable Compression

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

Leverage browser caching

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

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

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

Например, JS в асинхронном режиме можно подключить так:

Minify CSS

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

Minify HTML

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

Avoid landing page redirects

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

Prioritize visible content

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

Reduce server response time

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

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

В частности, часто будет отображаться предупреждение, что не используется кэширование, хотя фактически

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

Мотивация

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

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

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

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

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

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

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

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

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

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

Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:

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

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

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

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

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

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

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

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в

снимите отметку с «Force JavaScript» и установите ее на «Inline all CSS».

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

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

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

Вывод

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

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

«скорость сайта» — Блог Яндекса для вебмастеров

20 апреля 2020, 12:33

В блоке Достижения и статистика вы можете следить за тем, каких успехов добились в продвижении сайта. Одним из новых достижений является «скорость сайта» — скорость загрузки страниц в Яндекс.Браузере при переходе из мобильного поиска Яндекса. Индекс скорости сайта рассчитывается на основе переходов пользователей на сайт из поисковой выдачи Яндекс.Браузера. Для расчета используются обезличенные (анонимизированные) данные Яндекс Браузера.

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

Достижение отображается в Вебмастере на странице Качество сайта → Достижения и статистика.

Для вашего удобства мы также добавили блок с достижением «скорость сайта» в Сводку Вебмастера.

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

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

Высокая скорость загрузки сайта напрямую влияет и на показатель отказов, и на конверсию сайта. По данным исследований, 70% людей не готовы ждать загрузки мобильного сайта более 2-х секунд.* Чтобы самостоятельно увеличить скорость загрузки сайта, оптимизируйте его. Подробнее о том, как это сделать, читайте в Справке.

Один из простых и эффективных способов ускорить доступ пользователей к контенту вашего сайта — использовать технологию Турбо-страниц (для контентных сайтов и интернет-магазинов).

P.S. Достижение «скорость сайта» находится в режиме бета-тестирования. Если у вас возникнут вопросы или проблемы с отображением достижения «скорость сайта», напишите нам в поддержку. Мы будем рады помочь!

Команда Яндекс.Вебмастера

P. S. Подписывайтесь на наши каналы:
Блог Яндекса для вебмастеров
Канал Яндекса на YouTube о продвижении сайтов
Канал для владельцев сайтов в Яндекс.Дзене

Как использовать Google PageSpeed Insights (правильный путь)

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

Google PageSpeed Insights — это бесплатный инструмент, который поможет вам найти и исправить проблемы, замедляющие работу вашего веб-приложения. Инструмент с открытым исходным кодом под названием Lighthouse собирает и анализирует лабораторные данные, которые объединяются с реальными данными из набора данных Chrome User Experience Report. Результатом является оценка, которая суммирует производительность и ряд рекомендаций.

Схема работы Lighthouse — Источник: Google

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

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

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

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

Хорошо : 90–100 баллов
Требует улучшения : 50-89 баллов
Плохо : 1–49

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

Просто использовать

По сути, это то же самое, что и Маяк. При желании вы можете установить Lighthouse как плагин для Chrome, чтобы не посещать Google PageSpeed Insights и создавать отчеты, которые можно сохранять локально для справки.

Тем не менее, начать работу с Google PageSpeed Insights легко:

Посетите страницу Google PageSpeed Insights
Введите URL вашей веб-страницы
Нажмите «Анализировать»

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

Пример результатов производительности для Yahoo.com — Источник: Google

Сгенерированный отчет разделен на несколько разделов:

Оценка производительности : Общая оценка
Field Data : реальные данные Google, если таковые имеются
Origin Summary : Обзор Core Web Vitals
Лабораторные данные : метрики, рассчитанные с помощью Lighthouse

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

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

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

Пример возможности для улучшения — Источник: Google

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

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

Вы все еще нуждаетесь в нагрузочном тестировании

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

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

В дополнение к быстрому созданию нагрузочных тестов, LoadNinja запускает нагрузочные тесты на реальных экземплярах браузера, чтобы обеспечить наиболее точные измерения производительности и упростить отладку. Нагрузочные тесты на основе браузера учитывают время выполнения JavaScript, что критично для одностраничных приложений (SPA) и других приложений с большим количеством JS.

Подпишитесь на бесплатную пробную версию LoadNinja

Посмотрите, как легко начать нагрузочное тестирование сегодня!

Итог: тестируйте с умом

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

Google Updates Оценки PageSpeed Insights

Показатели PageSpeed Insights (PSI) в последнее время улучшились по всем направлениям. Но улучшения не имеют ничего общего с какими-либо изменениями, внесенными на веб-сайты, получившие более высокие оценки.Улучшения произошли на стороне Google.

PageSpeed Insights

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

PSI предоставляет два вида отчетов: лабораторных данных и полевых данных .

Лабораторные данные

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

Объявление

Продолжить чтение ниже

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

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

Полевые данные

Полевые данные — это информация, собранная фактическими пользователями, просматривающими сайт с помощью Chrome, и заархивированная в отчете о пользовательском опыте Chrome (CrUX).

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

Баллы Core Web Vitals получены из полевых данных, заархивированных в CrUX.

Эти показатели состоят из наибольшей 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)

Повышение скорости и производительности страницы веб-сайта: что действительно важно? | Блог

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

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

Около 40% посетителей покидают сайты, которые не загружались в течение трех секунд

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

Снижение удовлетворенности клиентов на 16%
На 11% меньше просмотров страниц
Потеря конверсий на 7%

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

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

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

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

Многие люди зацикливаются на своей шкале Google PageSpeed Insights, которая составляет от 0 до 100, которая отражает производительность страницы как на мобильных, так и на настольных устройствах. Обычно 0–49 считается медленным, 50–89 — средним, а 90–100 — исключительным.

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

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

Более важно понимать показатели , которые влияют на ваш рейтинг Google PageSpeed Insights. К ним относятся:

Индекс скорости: Количество времени, измеряемое в миллисекундах или секундах, которое требуется серверу, чтобы вернуть первый ответ на запрос.
Первая отрисовка содержимого (FCP): Первый раз, когда браузер «рисует» — или отображает — любой текст, изображение или холст на экране посетителя.
Первая значимая отрисовка: Момент появления основных элементов страницы, таких как изображения, текст и кнопки. Время до интерактивности: количество времени, которое требуется, прежде чем пользователь сможет начать взаимодействовать со страницей.
Первый простой ЦП: Подобно «времени до интерактивности», это время, которое требуется странице, чтобы реагировать на действия пользователя в течение разумного промежутка времени.

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

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

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

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

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

PageSpeed Insights, инструмент для повышения вашей производительности

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

Содержание

Что такое PageSpeed Insights?

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

Как интерпретировать данные, рассчитанные PageSpeed Insights?

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

— FCP: время, необходимое для отображения страницы для пользователя.

— FID: время, необходимое для полной загрузки страницы (модели DOM).Это соответствует времени, необходимому браузеру для полной загрузки страницы. Он указывает время, прошедшее между моментом взаимодействия пользователя с элементом вашей страницы и моментом, когда браузер готов ответить на его запрос.
Page Speed Insights извлекает URL дважды: первый раз с помощью своего настольного пользовательского агента (= своего робота для ранжирования настольных компьютеров) и второй раз с помощью своего мобильного пользовательского агента.

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

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

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

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

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

Браузеры, такие как Chrome и Firefox, могут предлагать сокращенную версию страницы. Включив сжатие gzip, эти страницы можно уменьшить на 90%. Таким образом, вместо того, чтобы обслуживать пользователя всю страницу, браузер напрямую извлекает сжатую версию на маленьких экранах.

Минимизировать CSS, HTML и JavaScript

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

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

Оптимизация и уменьшение веса изображений

Изображения могут составлять значительную часть общего веса страницы. Они везде: от вашего логотипа до слайдеров. Поэтому их необходимо максимально оптимизировать, чтобы уменьшить их влияние на время загрузки. Это наименее сложная техническая оптимизация. Просто конвертируйте их в JPEG и максимально сжимайте (стараясь не повлиять на их качество). Есть инструменты сжатия, такие как Compressor, ezGIF, TinyJPG …

Уменьшите использование JavaScript

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

Ускорить время отклика сервера

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

Обновление PageSpeed Insights

Недавно функции Page Speed Insights претерпели существенное обновление. До сих пор Google полагался на несколько инструментов для оценки производительности сайтов, которые давали различные рекомендации, которые не всегда легко понять.Вот почему Google объединил данные своих инструментов, чтобы веб-мастера везде получали одинаковые результаты. Отныне Page Speed Insights работает на Lighthouse, который представляет собой автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Он доступен из Chrome DevTools, командной строки или как модуль Node.
Таким образом, это изменение привело к большим изменениям в Page Speed Insights, который теперь различает лабораторные и «полевые» данные. Лабораторные данные предназначены для отладки, поскольку они получены из контролируемой среды.Полевые данные отражают реальный пользовательский опыт, особенно на мобильных устройствах. Lighthouse имитирует сеть 3G для моделирования времени загрузки стандартной мобильной сети. Именно этот элемент и является настоящей революцией!

Заключение

PageSpeed Insights — отличный инструмент для измерения производительности страниц, и после обновления он предлагает гораздо более надежные данные о времени загрузки на мобильных устройствах. Однако как чисто аналитический инструмент его недостаточно. Он не интегрирует данные о мобильной совместимости или возможные факторы блокировки (тег noindex, неверные канонические URL-адреса и т. Д.)). Поэтому важно сопоставить его с несколькими другими анализами, чтобы получить точное представление о реальной производительности страницы.

Статья написана Луи Шеваном

Ищете информацию о скорости загрузки страниц Google?

Поскольку Google собирается повысить рейтинг быстродействующих веб-сайтов, вы, вероятно, хотите больше узнать о Google PageSpeed Insights?

… И я не удивлен, потому что это сбивает с толку!

Эта статья поможет.

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

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

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

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

Обычно для этой таблицы ниже нельзя быть «красным»

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

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

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

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

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

Как вы интерпретируете результаты?

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

Это будет число от 0 до 100.

от 0 до 49 — это плохо, вы не хотите, чтобы ваш результат был 49 или ниже
от 50 до 89 — это нормально, но есть возможности для улучшения
от 90 до 100 — если вы находитесь в этой шкале, вы ‘ в хороших книгах.

Прокрутив вниз, вы увидите, что вызывает высокий или низкий балл:

Примечание: см. Цветные индикаторы перед каждой секцией:

Зеленый означает быстрый
Оранжевый означает умеренный
Красный означает медленный

Это то, что означает каждый из этих разделов:

Первое содержимое Полная краска

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

По сути, это индикатор того, что страница начинает загружаться.

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

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

Директива:

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

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

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

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

Директива:

Общее время блокировки

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

Это полное время блокировки!

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

Длинные задачи — это задачи, которые блокируют вас более чем на 50 мс.

Время блокировки превышает 50 мсек.

Если нет длинных задач, вы увидите 0 времени блокировки, что вы видите в статистике выше.

Совокупное смещение макета

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

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

Это неожиданное поведение с точки зрения пользователя.

Чем выше оценка, тем хуже.

Индекс скорости

Это сложный для понимания, но ценный вопрос.

Итак, представьте 2 веб-сайта, которые загружаются за 1,5 секунды.

Если вы просматривали 2 веб-сайта, показанные на изображении выше, какой из них загрузился бы быстрее?

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

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

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

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

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

Этот процесс повторяется несколько раз.

Время зависит только от того, что пользователь видит на экране (в окне просмотра). Неважно, что находится ниже сгиба.

Итак … хорошо бы попробовать с разными окнами просмотра.

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

Чем ниже, тем лучше.

Краска с наибольшим содержанием

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

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

Последний элемент страницы может быть самым большим элементом страницы (например, большим изображением), а может и не быть.

Примечание. Мы не говорим, сколько места оно занимает на экране.

Вот 2 примера.

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

Но…

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

Последний экран не учитывается. Все, что было добавлено на этот экран, — это кнопка «Google Play», изображение которой было меньше, чем изображение «Instagram».

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

Директива:

Возможностей

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

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

Диагностика

Diagnostics выделяет передовой опыт веб-разработки, который вам следует рассмотреть.

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

Сводка

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

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

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

похожих постов, которые могут вам также понравиться …

Как повысить скорость страницы от начала до конца (расширенное руководство)

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

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

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

WordPress:

Drupal

Сейчас , вернемся к делу.Вот все, что я собираюсь рассказать:

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

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

В последнее время Google вновь обратил внимание на скорость страницы: скорость мобильных устройств стала фактором ранжирования, отчет о скорости в Google Search Console и объявление Chrome о том, что они могут помечать медленные сайты , но знаете ли вы, что скорость страницы была фактором ранжирования Google с 2010 года?

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

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

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

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

Так почему же вы можете видеть больше посетителей?

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

Как быстро должна загружаться моя страница?

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

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

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

Примечание.

Я собираюсь использовать https://www.webpagetest.org/ для многих изображений, и я дам ссылку на тесты и перечислю настройки, где это применимо.

Установление подключений

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

DNS (зеленый)

Система доменных имен (DNS) считается телефонной книгой в Интернете. Вы даете своему браузеру имя веб-сайта, и он сверяется с DNS-сервером, чтобы получить IP-адрес (метку местоположения), сообщающий ему, где размещен веб-сайт.Это похоже на сохранение контакта на телефоне: вам нужно знать только имя, а не номер телефона.

В большинстве случаев ваш DNS будет у регистратора домена (у которого вы купили домен) или у вашей сети доставки контента (CDN).

Важно отметить, что не все DNS-провайдеры одинаковы. Если для вас важна каждая миллисекунда, вы можете рассмотреть возможность использования другого поставщика DNS. Согласно DNSPerf, Cloudflare имеет среднюю скорость запроса 12,6 мс, в то время как другие, такие как GoDaddy (46.04 мс) и Rackspace (90,38 мс) в среднем медленнее. Однако эти числа не являются полностью точным представлением, поскольку DNS может быть кэширован (временно сохранен) в браузере, когда вы уже посещали веб-сайт. Время, в течение которого он кэшируется, называется TTL (время жизни). Пока кеш активен, браузеру не нужно подключаться к DNS-серверу, чтобы знать, куда перейти, чтобы получить доступ к веб-сайту.

Connect (оранжевый)

Здесь браузер устанавливает соединение с хост-сервером.Протокол управления передачей / Интернет-протокол (TCP / IP) сложен, но просто подумайте о том, как вы приступите к работе. Скорее всего, это не прямая линия; вам нужно делать повороты, и там будут участки с более высокой проходимостью. Вы даже можете изменить маршрут или сделать несколько неправильных поворотов. Вот как это работает; он направляется из вашего браузера на сервер и обратно.

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

Многие из этих проблем решаются за счет уменьшения расстояния до сервера и использования более интеллектуальной маршрутизации, что могут сделать многие сети CDN. Имея сеть серверов по всему миру, посетители обычно могут подключиться к ближайшему. Некоторые провайдеры CDN также обрабатывают большие объемы интернет-запросов и могут в режиме реального времени видеть, где могут быть узкие места (трафик). Если они видят более быстрый вариант, они могут перенаправить трафик — точно так же, как GPS перенаправит вас вокруг пробки.

Secure Sockets Layer (SSL) (Purple)

Для сайтов, устанавливающих безопасное соединение (HTTPS), именно здесь браузер и сервер согласовывают версию протокола TLS (Transport Layer Security), ciphersuite (уровень безопасности) и проверка сертификата (чтобы убедиться, что сайт именно тот, на котором написано).

Вы могли подумать, что можете сделать свой веб-сайт быстрее, просто не используя HTTPS. Отчасти это правда — по крайней мере, в части подключения. Но есть и другие преимущества использования HTTPS, например, тот факт, что браузеры не позволяют использовать HTTP / 2 (h3) без HTTPS. h3 имеет некоторые преимущества, такие как постоянные соединения, поэтому ему не нужно постоянно открывать новое соединение для файлов на том же сервере. Заголовки в этих запросах также меньше, чем в HTTP / 1.1, и одновременно можно передавать несколько файлов.В большинстве случаев сайты, использующие HTTPS и h3, будут быстрее, чем сайты по HTTP.

Как правило, наиболее значительные выгоды, которые вы получите здесь, связаны с обновлением вашего протокола (например, TLS 1.3 быстрее, чем TLS 1.2) и внедрением HTTP Strict Transport Security (HSTS), который сообщает браузеру всегда использовать безопасное соединение. . Браузер изменяет запросы с HTTP на HTTPS без необходимости связываться с сервером и выполнять перенаправление. На изображении ниже перенаправление с HTTP на HTTPS и время, которое потребовалось, будут устранены с помощью HSTS.

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

Важно: устройство, местоположение и сеть.

Учтите, что подключение к веб-сайту на смартфоне среднего класса с медленным 3G-соединением занимает ~ 2 секунды. На том же телефоне с подключением LTE время сокращается до ~ 0,41 секунды. На настольном компьютере с нормальной скоростью меньше 0.1 секунда, чтобы установить это соединение.

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

Загрузка и обработка HTML

HTML-код страницы — это то, что изначально загружается браузером. Это информация, которую вы видите, когда щелкаете правой кнопкой мыши на веб-сайте и переходите в «Просмотр источника страницы». Как только соединение установлено и браузер получает первый бит информации от сервера, мы достигаем Time To First Byte (TTFB), который является типичной мерой для начального времени ответа. Как показано оранжевыми линиями ниже, это время от начала HTML-запроса (светло-синий) до момента начала загрузки HTML (темно-синий).

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

Здесь же браузер также начинает создавать страницу. Когда HTML загружается, браузер анализирует его в объектной модели документа (DOM), которая позволяет компьютеру понимать структуру содержимого.Этот процесс синтаксического анализа использует основной поток браузера для обработки действий пользователя и рисования страницы, запуска JavaScript и выполнения макета, перекомпоновки и сборки мусора. На данный момент просто знайте, что этот основной поток существует и выполняет множество различных задач. Мы поговорим об этом чуть позже.

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

Для HTML и других типов файлов, таких как CSS и JavaScript, вы можете сократить время, используя меньше кода, минификацию для удаления ненужных символов, таких как комментарии и пробелы, из кода и сжатие для уменьшения размера файлов. Дело в том, чтобы уменьшить размер загружаемого файла, чтобы эта часть загрузки была быстрее. Однако существует не только один способ минификации и сжатия. Во многих случаях это обрабатывается CDN или сервером (распространенными серверами являются Apache или Nginx) или плагином / модулем / пакетом.Вы можете найти больше информации о реализации сжатия здесь и минификации здесь.

Обработка дополнительных подключений

После загрузки HTML-кода будут обработаны ссылки на другие файлы и другие серверы, и начнутся новые подключения. Обычно сюда добавляются другие файлы, такие как JavaScript, CSS, изображения и шрифты. Здесь все может стать безумным, поскольку некоторые файлы ссылаются на другие файлы, и мы начинаем связывать соединения и загрузки файлов. Взгляните на карту запросов Forbes ниже.com. Каждая точка — это индивидуальный запрос файла, а каждая строка — это место, где один файл ссылается на другой файл, который должен быть загружен. В целом это 363 запроса через 128 подключений.

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

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

Начиная с HTTP / 2, это не лучшая практика. Если возможно, вы должны использовать один и тот же сервер для запросов.

Например, возьмите cdn.ahrefs.com на диаграмме водопада ниже.

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

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

Использовать предварительное подключение или предварительную выборку DNS (если вы используете другой сервер)

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

Пример кода:

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

Пример кода:

Как браузеры отображают страницу

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

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

Примечание.

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

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

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

Visual Load Metrics:

First Paint (FP) — браузер отображает что-либо впервые.
First Contentful Paint (FCP) — браузер отображает что-то из DOM (объектной модели документа), что может быть текстом, изображением и т. Д.
First Meaningful Paint (FMP) — наиболее важные элементы визуально загружены.
Самая большая краска для наполнения (LCP) — самый большой элемент над сгибом загружен.
Visually Complete — страница загружается визуально.
Индекс скорости — расчетная оценка визуальной нагрузки, учитывающая несколько моментов времени.
Совокупный сдвиг макета (CLS) — Измеряет, сколько элементов перемещается в области просмотра во время загрузки или насколько стабильна макет.Здесь есть хорошее руководство по причинам CLS.

«Если вы не можете измерить это, вы не сможете его улучшить». Https://t.co/dNrDYaIj4Z рассказывает о том, как измерить современные показатели производительности в Интернете и оптимизировать их. pic.twitter.com/yvBO2FQ6Ds— Адди Османи (@addyosmani) 31 января 2020 г.

Просмотр визуальной нагрузки вместе с диаграммой водопада

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

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

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

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

Тип файла CSS

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

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

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

Асинхронная загрузка CSS

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

Например, это:

становится таким:

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

Inline

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

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

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

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

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

Inline Critical CSS в масштабе:

Вам понадобится автоматизированная система, а не делать это для каждой страницы. Возможно, имеет смысл встроить только CSS для домашней страницы в темы WordPress, поскольку у них обычно другая таблица стилей, чем на других страницах. Обычно это какой-то плагин / модуль / пакет или версия Critical или Critical CSS.Эти пакеты существуют для любого диспетчера задач или пакетов, которые вы можете использовать, например Grunt, Gulp, Webpack или Framework, например React, Angular, Vue, и вы даже можете найти учебные пособия, специфичные для WordPress или Drupal, или даже страницы, написанные вручную. Они собираются отправить на страницу безголовый браузер, чтобы определить, какой CSS действительно критичен для загрузки страницы в разных размерах, и либо предоставят вам код, либо разделят код на критические и некритические элементы, чтобы вы могли загрузить их соответствующим образом. . Несколько примеров:

Grunt:
https: // github.com / filamentgroup / grunt-criticalcss
https://www.npmjs.com/package/grunt-critical-css
https://github.com/bezoerb/grunt-critical

Gulp:
https: // github.com/addyosmani/critical
https://www.npmjs.com/package/gulp-critical-css

Webpack:
https://github.com/anthonygore/html-critical-webpack-plugin
https://github.com/GoogleChromeLabs/critters
https://github.com/anthonygore/html-critical-webpack-plugin
https: // www.npmjs.com/package/critical-css-webpack-plugin

React:
https://www.npmjs.com/package/react-critical-css
https://github.com/addyosmani/critical- path-css-tools
https://github.com/sergei-zelinsky/react-critical-css

Angular:
https://github.com/addyosmani/critical-path-angular-demo

Vue:
https://github.com/anthonygore/vue-cli-plugin-critical
https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/

Drupal:
https : // www.fourkitchens.com/blog/article/use-gulp-automate-your-critical-path-css/

WordPress:
https://wordpress.org/plugins/wp-criticalcss/

Написано вручную:
https://www.sitelocity.com/critical-path-css-generator
https://jonassebastianohlsson.com/criticalpathcssgenerator/

Preload

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

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

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

Новое: загрузка рекомендаций по повышению производительности для, предварительной выборки и приоритетов в Chrome: https://t.co/PzgxSQEgcd 🔥 pic.twitter.com/DpDmlNIedO— Адди Османи (@addyosmani) 27 марта 2017 г.

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

Примеры кода:

Выбор файлов для предварительной загрузки

Обычно у вас будет основной файл темы, который содержит много CSS для веб-сайта. Разработчики часто называют это в честь темы, или называют это «стилем», а иногда называют его именем самого веб-сайта.Если у вас возникли проблемы с идентификацией этого файла или вы считаете, что другие файлы, возможно, также необходимо предварительно загрузить, то самый простой способ проверить — использовать функцию блокировки запросов в Chrome Dev Tools. Откройте вкладку «Сеть» и загрузите страницу, чтобы увидеть запрошенные файлы. Вы можете щелкнуть их правой кнопкой мыши, чтобы добавить их в список блокировки. Если при перезагрузке страницы она по-прежнему выглядит нормально, возможно, вы не заблокировали файл, необходимый для содержания в верхней части страницы. Когда вы получаете один из них, который нарушает внешний вид страницы, это признак того, что необходимо отобразить контент над сгибом, и это файл, который вы хотите предварительно загрузить.

Что нужно знать о предварительной загрузке

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

Server Push

Это было частью спецификации HTTP / 2 (h3).Это позволяет серверу доставить файл без запроса. Таким образом, вместо цепочки, которая может быть HTML> CSS> Font, это позволяет сайту сказать, что мне понадобится этот шрифт, просто отправьте его.

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

Тип файла JavaScript

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

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

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

Переместить в нижний колонтитул

Для встроенных скриптов вы можете рассмотреть возможность перемещения их в нижний колонтитул. Помните, что JavaScript блокирует парсер, то есть блокирует чтение HTML. Перемещение этих скриптов в нижний колонтитул гарантирует, что большая часть данных может быть обработана до того, как произойдет какая-либо блокировка. У вас есть другие варианты ссылок на скрипты, которые, вероятно, лучше, такие как defer и async.

Defer / Async

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

Примеры кода Defer / Async

Нормальный:

Async:

Defer:

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

Приоритеты загрузки JavaScript в Chrome: https://t.co/O3Qg2eHgXb ~ как работают

PageSpeed — Как повысить показатель google PageSpeed?

Как проверить PageSpeed сайта и как алгоритм PageSpeed поменялся в 2018 году

Что мы сделали, чтобы повысить показатель PageSpeed

Советы, как ускорить загрузку сайта и улучшить показатель PageSpeed

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

Мотивация

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

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

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

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

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

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

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

Вывод

Ускорить сайт для Google Page Speed и оптимизировать сервер

Единственно верная и эффективная технология ускорения сайтов

Что предлагает GetManySpeed

Можем ускорить любой сайт

Что вы получаете при обращении в GetManySpeed

12 способов измерить скорость загрузки сайта в 2019 году

Медленный сайт — убийца продаж!

Самые упоминаемые сервисы для проверки скорости загрузки сайта

1. Google PageSpeed Insights

2. GTmetrix

3. WebPagetest

4. Pingdom Tools

5. Loading.express

6. Dotcom-Monitor

7. Sitespeed.me

8. Dareboost

9. GiftofSpeed

10. Uptrends

11. KeyCDN

12. Site24×7

Выводы

Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights

Операция «Ускорить WordPress»

Проблема: хостинг и TTFB

Решение: смена хостинг-провайдера

Проблема: оптимизация тем, плагинов, изображений, ресурсов

Решение: создание нового сайта

Результаты

Заключение

скорость загрузки как фактор ранжирования

Page speed vs PageSpeed Insights

Какие вообще средства оптимизации для ускорения сайтов предлагает Google?

Google»s PageSpeed рекомендует (пути для увеличения скорости загрузки страниц сайта)

Minify CSS

Reduce server response time

Мотивация

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

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

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

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

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

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

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

Вывод

«скорость сайта» — Блог Яндекса для вебмастеров

Как использовать Google PageSpeed ​​Insights (правильный путь)

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

Просто использовать

Вы все еще нуждаетесь в нагрузочном тестировании

Итог: тестируйте с умом

Google Updates Оценки PageSpeed ​​Insights

PageSpeed ​​Insights

Лабораторные данные

Полевые данные

Google обновил способ сбора данных в PageSpeed ​​Insights

PageSpeed ​​Insights Использование HTTP / 2

Объявление об обновлении PageSpeed ​​Insights от Google

Показатели PageSpeed ​​Insights теперь выше

Повышение скорости и производительности страницы веб-сайта: что действительно важно? | Блог

PageSpeed ​​Insights, инструмент для повышения вашей производительности

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

Как интерпретировать данные, рассчитанные PageSpeed ​​Insights?

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

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

Минимизировать CSS, HTML и JavaScript

Как использовать Google PageSpeed Insights (правильный путь)

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

Google Updates Оценки PageSpeed Insights

PageSpeed Insights

Google обновил способ сбора данных в PageSpeed Insights

PageSpeed Insights Использование HTTP / 2

Объявление об обновлении PageSpeed Insights от Google

Показатели PageSpeed Insights теперь выше

PageSpeed Insights, инструмент для повышения вашей производительности

Что такое PageSpeed Insights?

Как интерпретировать данные, рассчитанные PageSpeed Insights?

Обновление PageSpeed Insights

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