Сайт

Проверка скорости сайта google: Sorry, this page can’t be found.

04.06.2021

Содержание

Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

{«id»:130330,»url»:»https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights»,»title»:»Google \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 PageSpeed Insights»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights&title=Google \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 PageSpeed Insights»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights&text=Google \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 PageSpeed Insights»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.

ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights&text=Google \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 PageSpeed Insights»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=Google \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 PageSpeed Insights&body=https:\/\/vc.ru\/services\/130330-google-obnovil-instrument-dlya-izmereniya-skorosti-zagruzki-sayta-pagespeed-insights»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

3178 просмотров

Чек лист по проверке скорости загрузки сайта

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

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


Немного теории, Page speed (скорость загрузки) это один из многих факторов ранжирования ПС Яндекс и Google.С каждым годом значение Page speed становится все более значимым для поисковых систем. При долгой загрузке сайта, посетитель скорее всего сразу его покинет, что отрицательно скажется на поведенческих факторах. Низкий показатель поведенческих факторов сразу приведет к просадке в поисковой выдаче. Таким образом скорость важна как пользователям, так и с точки зрения SEO.

Как измеряется скорость и сколько должен загружаться веб-сайт?

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

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

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

Основные сервисы для проверки скорости

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


loading.express. В основе этого сервиса находится API Google PageSpeed Insights с разницей геолокации, откуда происходит проверка. Google проверяет сайты с европейских серверов, loading.express использует для анализа данных IP крупных городов России. При использовании общего алгоритма, данные могут отличаться (иногда даже значительно).


Pingdom Tools – онлайн утилита проводящая подробный анализ по 70+ факторам, влияющим на скорость загрузки. Сводный отчет представляется в таблице, где можно увидеть каждый тип обращения к серверу и посмотреть рекомендации по оптимизации скорости конкретного пункта.


Uptrends. Это ещё один зарубежный мульти-ресурс, проводящий мониторинг сайта как по показателям PageSpeed Insights, так и по ряду других метрик. Данные выводятся в таблицах и графиках «без воды».


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


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


Следите за скорость загрузка своего ресурса и не забывайте об ускоренной версии сайтов Яндекс Турбо и Google APM, о которой мы подробно рассказывали в отдельной статье.  

обзор средств оценки скорости сайтов

к.э.н. Лавлинский Николай, технический директор ООО «Метод Лаб»

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

Быстро и просто: Google PageSpeed Insights

Этот сервис (https://developers.google.com/speed/pagespeed/insights/) позволяет достаточно качественно оценить степень оптимизации сайта по базовому набору правил. При этом получаем 2 оценки скорости: для десктопа и для мобильных устройств. Оценки выдаются в баллах, максимум – 100.

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

Однако, есть несколько слабых мест:

  • Не учитывается расположение сервера (оценивается только время ответа HTML).
  • Правила применимы только к HTTP/1.1, для HTTP/2 многие рекомендации не актуальны.
  • Возможно ошибочное определение сжатия данных (ругается, когда проблем нет).
  • Нет оценки времени загрузки сайта (только соответствие правилами).
  • Встречаются проблемы с рекомендациями и оптимизированными ресурсами (нельзя слепо выполнять все требования).

Всегда под рукой: Chrome Developer Tools (инструменты разработчика)

Если у вас есть браузер на Blink (Chromium, Google Chrome, Яндекс.Браузер, Opera), то вам повезло. Дело в том, что команда Google активно разрабатывает средства для разработчиков с точки зрения скорости сайтов.

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

Наиболее интересная закладка: Network (Сеть). Здесь можно отключить кеш браузера (для эмуляции первого посещения), установить ограничение скорости сети (Throttling).

Методика тестирования может быть такой: отключаем кеш, включаем ограничение скорости сети до желаемого уровня, включаем запись скриншотов и перезагружаем страницу. Сразу получаем объективные времена отрисовки страницы. Если отфильтровать типы запросов в панели, то получим ресурсы, которые блокируют рендеринг (следует выбрать CSS, JS, Doc, Font).

Закладка Timeline предназначена для подробного разбора процесса работы страницы и предназначена для профессионалов.

Также в средствах разработчика есть режим Device View, в котором можно смотреть сайт с эмуляцией мобильного устройства.

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

Практические те же возможности получают пользователи плагина FireBug в Mozilla Firefox.

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

WebPageTest.org – все в одном

Сервис WebPagetest.org создан энтузиастами скорости сайтов как универсальный инструмент оценки скорости сайтов. Принципиальное отличие: распределенная архитектура. Доступно множество тестовых агентов, распределенных по миру. За счет этого, можно получить картину скорости загрузки сайта из любого региона (включая Москву).

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

На выходе мы получаем интегральные оценки по шести направлениям: время ответа (первого байта), keep-alive соединения, сжатие картинок, кеширование статического контента и использование CDN. Даже этих оценок по пятибалльной шкале достаточно для экспресс-анализа.

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

При проведении нескольких тестов, можно сделать сравнительное видео (справа и слева будут два сайта).

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

Google Analytics – оценка реальной скорости

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

Удобная оценка скорости: Ускорениесайта.рф

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

Итоги

Мы рассмотрели основные инструменты оценки скорости сайтов, все они бесплатны и доступны всем.

Как видно, каждый инструмент имеет свою специализацию. При этом для владельца сайта можно рекомендовать простой сервис Google PageSpeed Insights. А для профессионалов и веб-разработчиков всё сложнее.

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

За профессиональным ускорением сайтов обращайтесь к нам.

программа для массовой проверки по Google PageSpeed Insights

Программа BulkPageSpeed предназначена для массовой проверки скорости загрузки страниц сайта по Google PageSpeed Insights.

Настройки и ключ API

Расширенные сведения об ошибках

Условия распространения программы: БЕСПЛАТНО




Основные возможности

  • Проверка групп URL без ограничений по количеству
  • Отображение основных показателей скорости страниц: FCP, SI, LCP, TTI, TBT, CLS
  • Отображение общей оценки скорости загрузки страниц для мобильной и десктопной версии
  • Возможность проверки скорости загрузки URL произвольным списком либо через Sitemap. xml
  • Отображение расширенных сведений об ошибках оптимизации сайта
  • Экспорт отчетов в Excel (CSV-формат)

Отличия от аналогов

  • Многопоточность и высокая скорость проверки URL
  • Портативный формат (работает без установки на ПК или прямо со сменного носителя)
  • Бесплатное распространение

Поддержи развитие программы!

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

Для нас это важно.
Благодарим за поддержку!

История версий

Версия 1.2 (build 16), 25.02.2021:

  • исправлена некорректная работа программы с потоками
  • число ошибок при проверке URL должно стать ощутимо меньше

Версия 1.2 (build 15), 20.10.2020:

  • максимальное значение задержки между запросами увеличено до 10 000 миллисекунд

Версия 1.2 (build 14), 07.10.2020:

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

Версия 1.1 (build 13), 05.10.2020:

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

Версия 1.0 (build 7), 28.09.2020:

  • возможность многопоточной проверки URL (до 20 потоков одновременно)
  • отображение основных показателей скорости загрузки страниц: FCP, SI, LCP, TTI, TBT, CLS
  • цветовое оформление баллов, отображающих скорость загрузки страниц
  • экспорт результатов тестирования в Excel (CSV)
  • удаление выбранных URL из списка


Минимальные системные требования:
– 500 МГц (рекомендуется: 1 ГГц или выше)
– 1 ГБ RAM (рекомендуется: 2 ГБ или выше)
– Microsoft Windows XP/2003/Vista/7-10
– выход в интернет


Facebook

Вконтакте

Одноклассники

Twitter

Please enable JavaScript to view the comments powered by Disqus.

<< Назад

стоит ли гнаться за идеальной оценкой производительности

От автора: все популярные инструменты тестирования скорости обычно предоставляют вместе с объективными результатами проверки оценку скорости страницы. У Google PageSpeed Insights есть «Speed Score». У Pingdom «Performance Grade». WebPageTest имеет пять оценок от A до F. Большинство людей используют их неправильно, что может быть опасно для реальной скорости вашего сайта.

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

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

Погоня за 100 баллами от любого инструмента

Подавляющее большинство клиентов, которые обращаются к нам за помощью в оптимизации скорости страницы, начинают с того же вопроса: «Можете ли вы помочь мне получить более высокие оценки PageSpeed Insights?»

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Ниже приведен пример оценки оптимизации страницы в Pingdom. Вы можете видеть, что владелец этого сайта проделал большую работу по оптимизации своего сайта — сократил размер в два раза, уменьшил количество запросов с 90 до 44 — и в результате их время загрузки уменьшилось с 1,52 до 0,27 секунды! Но их «performance grade» почему-то снизился. Вот почему опасно гоняться за конкретной оценкой. Информация под оценкой говорит нам, что этот сайт теперь загружается быстрее, чем 99% веб-сайтов, но те, кто гонится за неуловимыми 100 баллами, будут разочарованы без причины.

Напрасные усилия

Еще одним следствием «оптимизации для оценки» является серьезная затрата усилий. Возьмите этот пример улучшения оценки скорости страниц с 78 до 99 и его влияния на реальное время загрузки страницы:

Увеличение PSI более чем на 20 пунктов, и что это дало? TTFB, Индекс скорости, Время до первой интерактивности, Время до загрузки документа и Время до полной загрузки страницы остаются неизменными.

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

Реальность достижения максимальной оценки

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

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

Кроме того, Google Insights часто снижеат оценку за изображения или Javascript, которые можно оптимизировать только на незначительные 1 или 2%. Это действительно лучшее применение вашего времени и усилий? Возможно, если вы одно из самых известных лиц в Интернете, но, скорее всего, это не так.

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

Оценка PageSpeed меняются со временем

Джон Мюллер из самого Google официально заявил, что оценка PageSpeed может измениться без каких-либо изменений на вашем сайте.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Так что же PageSpeed вам дает?

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

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

Будучи лицемерами

Что самое смешное, даже мы здесь, в MachMetrics, предоставляем оценку для вашего URL:

Почему мы делаем это, если показатели скорости — это зло? Я не хочу, чтобы вы упускали смысл — они не зло. Они полезны. Погоня за ними и оптимизация только ради них — это зло. Наша оценка скорости все еще полезна, потому что она:

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

дает общую информацию, понятную для нетехнических людей

основывается на реальном времени загрузки и объективно рассчитывается на основе процентилей

Как правильно использовать показатели скорости сайта?

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

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

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

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

Что дальше?

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

Я думаю, что большая часть сообщества веб-пользователей согласилась бы с тем, что: Снижение времени загрузки с 2,0 с до 1,5 с это гораздо более впечатляюще, чем увеличение любого показателя с 91 до > 94.

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

Источник: //www.machmetrics.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Смотреть

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

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

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

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

Что влияет на скорость загрузки страницы?

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

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

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

Что происходит на сервере?

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

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

Однако, как владелец сайта, вы влияете на качество кода. Большинство web-сайтов основаны на системах CMS, которые позволяют редактировать контент. Самым многочисленным представителем этих систем, конечно же, является WordPress, написанный на PHP. Каким-то образом ваш код WordPress (на самом деле плагины и темы, которые вы используете) оказывает наибольшее влияние на скорость ответа сервера.

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

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

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

Что происходит на стороне браузера?

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

Помимо HTML-кода, браузеру нужны два других типа данных / файлов. Они будут

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

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

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

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

Действительно ли скорость страницы влияет на позиции в Google?

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

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

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

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

У быстрого сайта есть еще много преимуществ. Ниже приведены некоторые из самых важных:

Ваши клиенты не нервничают

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

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

Вы уменьшаете показатель отказов

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

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

  • 1с — 3с — вероятность отскока увеличивается на 32%,
  • 1 с — 5 с — вероятность отскока увеличивается на 90%,
  • 1с — 6с — вероятность отскока увеличивается на 106%,
  • 1с — 10с — вероятность отскока увеличивается на 123%,

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

Вы увеличиваете конверсию / скорость продаж

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

За границей этот факт очевиден. Посмотрите, как быстро работает сайт Amazon, который считается самым быстрым сайтом в электронной коммерции.

Как проверить скорость: сервисы и их возможности

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

Google PageSpeed Insights

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

Основные возможности инструмента:

  • демонстрирует оценку скорости по стобалльной шкале. Минимальный показатель хорошей загрузки — 90%;
  • формирует отчет, который показывает скорость загрузки контента, отображает время между запросом и ответом страницы;
  • имеет раздел «Имитация загрузки». Он проверяет скорость отображения в условиях 3G-соединения;
  • предоставляет рекомендации по оптимизации страниц с указанием времени, которое можно сократить.

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

Pingdom Tools

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

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

Web Page Performance Test

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

Load Impact

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

WhichLoadFaster

Данный сервис сравнивает скорость загрузки двух площадок. Он наглядно показывает, какой веб-ресурс быстрее отображает данные и на сколько. После проверки предоставляется информация по каждому сайту. Тестирование проходит быстро. Инструмент в короткие сроки показывает данные по загрузке. Из недостатков — не дает рекомендаций по оптимизации площадки.

GTmetrix

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

Основные плюсы инструмента GTmetrix:

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

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

Monitis Tools

Проводит проверку скорости, имитируя запросы из разных стран (США, Европа, Азия). После теста инструмент предоставляет информацию по каждой загрузке. В отчете пользователи могут ознакомиться с такой информацией: объем сайта, источник запросов, количество времени, необходимого для соединения и загрузки.

SiteSpeed.me

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

PR-CY

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

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

WebPage Analyzer

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

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

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

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

Как ускорить загрузку сайта: эффективные приемы

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

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

Что можно ускорить на стороне сервера?

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

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

Помимо серверной версии PHP, вы можете сделать еще несколько вещей:

Использовать сжатие без потерь

Сжатие без потерь — это способ «упаковки» данных на время передачи между сервером и браузером. Самыми популярными инструментами, которые справляются с этим, являются модули Apache (серверное программное обеспечение): GZIP и deflate.

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

Оптимизируйте свой PHP-код

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

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

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

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

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

Кеш на стороне сервера — быстрый способ решить все проблемы с количеством и качеством кода. Работа механизма кеширования проста. Вы помните, что происходит, когда пользователь заходит на сайт?

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

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

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

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

Что можно ускорить в браузере?

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

Включить кеширование на стороне браузера

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

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

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

Как включить кеширование на стороне браузера?

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

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

Оптимизируйте свою графику

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

Во-первых, размер графики

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

В среднем экран ноутбука имеет ширину примерно 1300-1400 пикселей. Обычно страницы должны иметь ширину 1200 или 1440 пикселей. Почему файлы большего размера? Даже если вы используете разрешение 1080 (широкий), такая фотография будет очень хорошо смотреться на сайте, добавлять графику большего размера нет смысла.

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

Во-вторых, правильное использование графики

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

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

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

В-третьих, соответствующий графический формат

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

  • JPG оптимизирован для фотографий. Файлы JPG представляют собой растровые файлы с потерями, что означает, что они теряют небольшой объем информации при каждом сохранении файла JPG. Файлы JPG работают со сжатием цвета, поэтому они отлично подходят для фотографий. Уменьшение размера файла снижает качество изображения.
  • PNG был разработан для использования в Интернете и является наиболее широко используемым форматом сжатия изображений в Интернете. Формат PNG представляет собой растровую графику и был введен как усовершенствование формата GIF. Файлы PNG хорошо работают с графическими изображениями, созданными для Интернета. К сожалению, они могут привести к очень большим размерам файлов. Большим преимуществом PNG является то, что он поддерживает альфа-канал, что означает, что их фон может быть прозрачным.
  • SVG — это векторная графика, которая также поддерживает анимацию. Векторная графика отлично подходит, например, для логотипов и других геометрических фигур. Файлы SVG не состоят из пикселей и могут бесконечно масштабироваться без потери качества или увеличения размера файла. Файлы SVG — лучший вариант для создания значков и штриховых рисунков для дисплеев с высоким разрешением.

Стоит придерживаться вышеуказанного использования, это поможет вам сэкономить больше килобайт данных. Например, большая фотография, сохраненная в формате PNG, может занять несколько мегабайт, в то время как сохранение ее в формате JPG уменьшит размер до 0,5 мегабайта — помните об этом!

В-четвертых, Lazy Load

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

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

Оптимизация файлов CSS и JS

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

Уменьшите код

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

Объедините файлы CSS и JS

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

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

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

Загружайте файлы CSS / JS как можно позже

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

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

Оптимизируйте качество вашего кода CSS / JS

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

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

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

Выводы

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

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

КОМПЛЕКСНЫЙ АУДИТ САЙТА

Профессиональный комплексный аудит сайта — глобальный анализ вашего проекта ✔ Подробный отчет с перечнем ошибок и рекомендаций для улучшения ✔ Увеличение конверсий

Получить консультацию

Наш менеджер свяжется с Вами в ближайшее время

Отправить заявку

Как проверить время загрузки сайта + методы увеличения скорости работы

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

  • www.webpagetest.org — самый популярный сервис. Позволяет выбрать конкретный город и браузер для проверки скорости работы сайта. Отчет — шикарный:

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

Из преимуществ:

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

  • developers.google.com/speed/pagespeed/insights/ — а вот это уже инструмент другого характера. Точных миллисекунд в Google решили не называть, но зато есть оценка по 100-балльной шкале и подробные советы:

И еще пару советов:

  1. Не стоит пугаться, когда сервисы тестирования скорости загрузки сайта называют вам разные цифры — у всех не могут быть одинаковые алгоритмы, поэтому допустимы погрешности даже в несколько секунд.
  2. Нужно различать время отклика сайта и полную загрузку страницы — это совсем разные цифры.
  3. Для интернет-магазинов и медиа-порталов нормальным можно считать время до 4 сек., для прочих «легких» сайтов — до 3.

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

Способы, позволяющие увеличить скорость загрузки сайта

  1. Оптимизация изображений. Используйте любой толковый редактор (в идеале — Adobe Photoshop) + специальный софт для сжатия без потери качества (наш выбор — FileOptimizer).
  2. Перенесите все скрипты и таблицы стилей в отдельные файлы.
  3. «Почистите» код сайта: в нем не должно быть лишних пробелов, отступов и тысяч символов комментариев. Только так, чтобы разработчики потом не запутались 😉
  4. Избегайте громоздких флэш-объектов и подгрузки внешних файлов (не касается счетчиков посещаемости).
  5. Включите кэширование и GZip сжатие в файле .htaccess.

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

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

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

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

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

Приступим!

Знакомство с Google PageSpeed ​​Insights

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

Google PageSpeed ​​Insights

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

Оценка Google PageSpeed ​​Insights

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Сократите CSS
Файлы CSS

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

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

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

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

5. Минимизируйте JavaScript

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

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

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

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

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

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

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  ffmpeg -i input.gif output.mp4  

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

    

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

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

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

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

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

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

    

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление заголовков управления кешем

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

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

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

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

  
Заголовочный набор Cache-Control "max-age = 84600, общедоступный"
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

Сводка

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

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

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


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

Руководство по инструментам проверки скорости веб-сайта Google

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

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

Погрузимся …

Влияние скорости веб-сайта на конверсию клиентов



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

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


Из Google:

  • Люди с негативным опытом использования мобильных устройств на 62% реже будут покупать у вас в будущем.
  • Задержка загрузки мобильных устройств в 1 секунду может повлиять на конверсии мобильных устройств до 20%.


От Nielson Norman Group:

  • Если сайт электронной коммерции зарабатывает 100 000 долларов в день, задержка страницы в 1 секунду может стоить вам 2 доллара.5 миллионов потерянных продаж каждый год.

Вы уловили идею.

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

Влияние скорости веб-сайта на поисковый рейтинг

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

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

За прошедшие годы Google сделал скорость сайта все более важной благодаря нескольким обновлениям алгоритмов, а в мае 2020 года команда Chrome объявила Core Web Vitals, в котором рассматриваются различные аспекты скорости сайта (и показатели взаимодействия с пользователем), которые вскоре будут влиять на рейтинг в поиске Google.

Google разбивает Core Web Vitals на:

  • Largest Contentful Paint (LCP) — измеряет воспринимаемую скорость загрузки и отмечает точку на временной шкале загрузки страницы, когда основное содержимое страницы, вероятно, загрузилось.Это измерение скорости сайта.
  • Задержка первого ввода (FID) — измеряет скорость отклика и количественно оценивает опыт пользователей при попытке первого взаимодействия со страницей. Это измерение скорости сайта.
  • Накопительный сдвиг макета (CLS) — измеряет визуальную стабильность и количественно определяет величину неожиданного сдвига макета видимого содержимого страницы. Это не связано конкретно со скоростью сайта и не будет подробно рассматриваться в этом руководстве.


«Самая большая метрика Contentful Paint (LCP) сообщает время рендеринга самого большого изображение или текстовый блок, видимый в области просмотра.Чтобы обеспечить удобство работы пользователей, сайты должны стремиться к тому, чтобы самая большая отрисовка контента происходила в течение первых 2,5 секунд после начала загрузки страницы », — поясняет Google на web.dev.


First Input Delay (FID) «измеряет время с момента, когда пользователь впервые взаимодействует со страницей (т. Е. Когда он щелкает ссылку, нажимает кнопку или использует настраиваемый элемент управления на основе JavaScript) до момента, когда браузер действительно может начать обработку обработчиков событий в ответ на это взаимодействие », — говорит Google.


Подробнее о Core Web Vitals см. Основы Google Core Web Vitals: все, что вам нужно знать.

Объяснение инструментов проверки скорости веб-сайта Google

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

Начиная с выпуска Core Web Vitals, вот как Google рекомендует использовать эти инструменты для решения и улучшения других различных аспектов скорости сайта:

  1. Используйте новый отчет Core Web Vitals в Search Console для определения групп страниц, требующих внимания.
  2. Затем используйте PageSpeed ​​Insights для диагностики лабораторных и полевых проблем на странице.
  3. Используйте Lighthouse и Chrome DevTools, чтобы получить практические рекомендации о том, что конкретно нужно исправить.
  4. Получите настраиваемую панель управления Core Web Vitals с помощью обновленной панели инструментов CrUX или нового API отчетов Chrome UX для полевых данных или PageSpeed ​​Insights API для лабораторных данных.
  5. Вы смущены объемом данных и нуждаетесь в прямом руководстве? Используйте web.dev/measure для измерения вашей страницы и отображения списка приоритетов для оптимизации.
  6. Наконец, используйте Lighthouse CI перед развертыванием изменения в производственной среде.

Search Console


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


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

PageSpeed ​​Insights

PageSpeed ​​Insights — это один из простейших способов получения аналитики скорости сайта, который можно использовать для измерения Core Web Vitals, а также других ключевых данных. Он работает на Lighthouse и Chrome UX Report.


Этот тест генерирует отчет PageSpeed ​​Insights с количественной оценкой, которая суммирует производительность страницы (определяется автоматически запущенным программным обеспечением). Маяк).Цель должна состоять в том, чтобы набрать 90 очков или выше, что считается хорошим результатом; От 50 до 90 нуждаются в улучшении; ниже 50 считается плохим.

Когда вы вводите URL-адрес, PageSpeed ​​Insights также оценивает набор данных Chrome User Experience Report (CrUX), чтобы получить представление о том, как реальные пользователи воспринимают страницу.

Он также сообщает о First Contentful Paint (FCP) , Метрические данные CLS, FID и LCP. Google рекомендует LCP не более 2,5 секунд и FID менее 100 миллисекунд.В обоих случаях Google стремится к 75-му процентилю среди мобильных и настольных устройств.


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


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


Маяк


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


Маяк можно использовать четырьмя различными способами; первые три являются более сложными и созданы разработчиками и для разработчиков:


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

Chrome DevTools

Chrome DevTools запускает Lighthouse и требует загрузки расширения Chrome. Затем вы просто переходите на вкладку «Аудит» и устанавливаете флажки для того, что вы хотите проверить. Его наибольшее использование в качестве средства проверки скорости сайта — это аудит страниц, требующих аутентификации, или идентификация страниц с помощью Cumulative Layout Shift, одного из трех Core Web Vitals. Он предоставляет отчеты в удобном для пользователя формате.Он также измеряет общее время блокировки (TBT), которое Google считает отличным прокси для FID.


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

Web.dev

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

Отчет об удобстве использования Chrome

Отчет

Chrome User Experience (CrUX) может использоваться для измерения как LCP, так и FID и используется в отчете PageSpeed ​​Insights. Он предоставляет показатели взаимодействия с пользователем, которые показывают, как реальные пользователи Chrome воспринимают ваш сайт (называемые полевыми данными), и позволяет вам получать данные о скорости по URL-адресам вашего конкурента.


Новый CrUX API, запущенный 28 мая 2020 года, «позволяет владельцам сайтов быстро оценивать производительность своего сайта для каждого Web Vital, как это делают реальные пользователи Chrome.Набор данных BigQuery уже отображает общедоступные гистограммы для всех Core Web Vitals, и мы работаем над новым REST API, который упростит и упростит доступ к данным уровня URL и источника — следите за обновлениями », — написал Google на web.dev в Август 2020 г.


Вы можете получить эти данные, запустив отчет, используя панель инструментов CrUX или новый API отчетов Chrome UX. Он не только измеряет Core Web Vitals, но также измеряет, среди прочего:

  • First Paint: как определено Paint Timing API: сообщает время, когда браузер впервые начинает отображать страницу после навигации; первый ключевой момент, о котором заботятся разработчики при загрузке страницы.
  • Первая содержательная краска: измеряет, сколько времени требуется браузеру для отображения первой части содержимого DOM после того, как пользователь перейдет на вашу страницу.
  • DOMContentLoad: согласно спецификации HTML: «сообщает время, когда исходный документ HTML был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и подфреймов».
  • Время до первого байта: «измеряет продолжительность от пользователя или клиента, сделавшего HTTP-запрос, до первого байта страницы, полученного клиентским браузером.

Опытный разработчик или специалист по SEO захочет запустить отчет CrUX, чтобы получить эти дополнительные данные.

Think with Google — Протестируйте мой мобильный сайт

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

Подведение итогов всех инструментов проверки скорости веб-сайта Google

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

Google Test My Site Tools

Этого нельзя отрицать. Будущее за мобильными устройствами.

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

А для компаний мобильная связь постоянно меняет способ ведения бизнеса и взаимодействия с клиентами.

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

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

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

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

Ранней весной Google подтвердил обновление Mobile-First Indexing.

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

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

Mobile-First Indexing — это только часть уравнения; следующее обновление требует практического подхода к увеличению видимости вашего сайта в Google.

Обновление мобильной скорости Google

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

Новое обновление затрагивает страницы, которые обеспечивают самую медленную работу пользователей.Согласно исследованию Google и SOASTA, задержка загрузки в 1 секунду влияет на мобильные конверсии до 20%.

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

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

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

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

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

Google Analytics — отличный способ отслеживать поведение и вовлеченность веб-трафика.

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

Вот как проверить посещаемость вашего мобильного сайта в Google Analytics.

  • Войдите в свою учетную запись.
  • В левой части панели инструментов перейдите к Аудитории.
  • Прокрутите вниз до раздела «Мобильные устройства» и нажмите «Обзор».

Вы можете фильтровать по определенному диапазону дат или даже по устройствам. Вот пример мобильного трафика Strategy за последние 30 дней.

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

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

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

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

Проверьте, насколько легко посетитель заходит на вашу страницу на мобильном устройстве с помощью Google Mobile-Friendly Tool.

Мобильный инструмент прост в использовании; просто введите URL-адрес веб-страницы, которую вы хотите протестировать.

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

Тест скорости веб-сайта для Google

Еще один отличный инструмент — это тест скорости веб-сайта Google

.

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

Он анализирует и производит показатели для:

  • Оценка скорости настольных и мобильных устройств
  • Распределение загрузки страниц
  • Советы по оптимизации

Чтобы проверить это, введите URL своего веб-сайта и нажмите кнопку «Анализировать».

Вот пример эффективности веб-сайта Strategy.

Google Test My Site

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

Когда вы вводите свой URL-адрес в инструменте Google Test My Site, вы увидите, сколько секунд требуется для загрузки сайта.

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

Карта показателей скорости Google

Узнайте, какова скорость вашего мобильного сайта по сравнению с конкурентами, и узнайте, как повысить скорость работы мобильного сайта с помощью карты Google Speed ​​Score Card.

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

Вот пример скорости Google, Bing, Yahoo и Amazon.

Калькулятор воздействия Google

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

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

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

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

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

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

Помня об этих 4 основных принципах, чтобы сделать ваш веб-сайт удобным для мобильных устройств, рассмотрите следующие решения:

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

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

Клиенты находят ваш бизнес в Google?

Повысьте узнаваемость своего бренда в Google и оптимизируйте свою страницу в сервисе «Google Мой бизнес» с помощью этих простых в использовании приемов!

Расскажи мне больше

Готовы усовершенствовать свой сайт для обновлений Google для мобильных устройств?

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

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

Опубликовано в Search Engine Optimization (SEO), Web Development

Как я могу проверить скорость загрузки страницы моего сайта?

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

Google PageSpeed ​​Insights

Google предлагает собственный инструмент «PageSpeed ​​Insights», который помогает вам определять PageSpeed ​​веб-сайта с помощью PageSpeed ​​Score, шкалы оценок от 0 до 100.

Веб-сайт zappos.com набрал 79 баллов для настольных компьютеров, в которых еще есть место для улучшений.

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

Google Analytics

В Google Analytics вы можете проверить средний PageSpeed ​​веб-сайта, а также другие показатели скорости.

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

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

Core Web Vitals

Core Web Vitals, показатель производительности, который будет использоваться Google в качестве фактора ранжирования в 2021 году. в наборе инструментов SISTRIX.

Производительность SISTRIX Optimizer Lighthouse

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

Пиковые нагрузки или изменения доступности / времени загрузки веб-сайта можно быстро определить с помощью средства проверки производительности Optimizer

Chrome Browser Lighthouse

Инструмент производительности Lighthouse также доступен как часть инструментов разработчика в браузере Google Chrome.Чтобы получить к нему доступ, используйте опцию меню Inspect или Ctrl + Shift + i

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

Видеообъяснение Мэтта Каттса / Google по скорости страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как Google борется со скоростью загрузки сайта

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

20 марта 2020 г. Источник

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


Значительно более низкая скорость загрузки страниц влияет на рейтинг

17 марта 2020 г. Источник

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


Инструменты тестирования скорости

не отражают способность Google предварительно обрабатывать и кэшировать AMP-страницы

27 декабря 2019 г., Источник

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


Подтвердите IP-адреса инструмента PageSpeed ​​Insights и проверки структурированных данных с помощью тестовой страницы

4 октября 2019 г., Источник

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


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

27 сентября 2019 г., Источник

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


Лабораторные тесты PageSpeed ​​Insights и сводные данные отчета CrUX используются для оценки скорости работы сайта

23 июля 2019 г., Источник

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


Показатели скорости, важные для пользовательского интерфейса, отличаются от показателей, важных для сканирования и индексирования

3 мая, 2019 Источник

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


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

19 февраля 2019 г., Источник

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


Скорость — второстепенный фактор ранжирования по сравнению с качеством или релевантностью контента

5 февраля 2019 г., Источник

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


Google PageSpeed ​​Checker → Инструменты обзора SEO

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

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

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

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

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

Chrome User Experience

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

  • First Contentful Paint (Chrome)
  • First Input Delay (Chrome UX report)

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

Google Lighthouse.

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

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

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

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

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

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

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

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

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

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

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

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

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