Google обновил инструмент проверки скорости мобильного сайта Test My Site


Содержание материала:

15 инструментов тестирования скорости сайта для анализа веб-производительности

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

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

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

  • Определение скриптов, шрифтов и плагинов, вызывающих увеличение времени загрузки ( HTML, JavaScript, CSS );
  • Проверка минимизации скриптов;
  • Обнаружение больших изображений;
  • Тестирование времени до получения первого байта ( TTFB );
  • Анализ общего времени загрузки, размера страниц и запросов;
  • Проверка производительности для различных географических точек;
  • Проверка скорости вывода в различных браузерах;
  • Анализ HTTP-заголовков ;
  • Измерение производительности сети (« доставка » контента );
  • Проверка, какие элементы корректно загружаются из CDN .

Концепции скорости сайта

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

Время до получения первого байта (TTFB)

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

Блокирующий код Javascript и CSS

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

Javascript

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

Google Pagespeed Insights — в погоне за скоростью загрузки сайта.

Статья о том, как проверить скорость загрузки сайта в Гугл, с помощью инструмента PageSpeed Insights.

Скорость загрузки сайта Google Page speed insights: проверка и оптимизация

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

Важным инструментом при проведении технической оптимизации сайтов под Google — считать 2 инструмента: «Проверка оптимизации для мобильных» и «PageSpeed Insights».

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

PageSpeed Insights

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

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

После завершения проверки Google дает основные рекомендации в отчетах:

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

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

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

Про этот инструмент расскажем немного вскользь.

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

Если возникают «Проблемы при загрузке страницы» — можно посмотреть подробнее что не так.

Чаще всего в этом блоке присутствуют ошибки с жалобами на то, что роботу Googlebot заблокирован доступ в файле robots.txt. Если это скрипты или файлы счетчиков, систем статистики — внешние хосты, то ничего предпринимать не надо.
А если это внутренние ресурсы, влияющие на отображение, заблокированы в robots.txt — то рекомендую их открыть для индексации. Их можно увидеть в отчете «Заблокированные ресурсы», чаще всего это скрипты, стили и картинки.

Еще особенность такого второго инструмента, то, что отображаются ошибки JS в блоке «Консоль JavaScript» — их мы тоже исправляем при наличии такой возможности.

PageSpeed Insights — 100% из 100% — миф, за которым не стоит гнаться.

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

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

Скрипт: сохраняем внешние скрипты на свой сервер.

Поделюсь кодом этого PHP-скрипта костыля:

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

Такой небольшой хак — результат 99%.

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

Переместите все CSS-стили и JavaScript-файлы в самый низ сайта, после контента.

Оптимизируйте загрузку видимого контента

Используйте следующие методы оптимизации:

Атрибуты для подключаемых скриптов:

  • onload=»async» — для первоочередных ресурсов, без которых сайт будет некорректно работать, это позволит загружать страницы асинхронно. Рекомендуется для: jquery, lazyload;
  • async — для скриптов, которые могут загружаться асинхронно и не особо влияют на функционал сайта. Рекомендуется для: скриптов социальных сетей, кнопок поделиться, скриптов, не влияющих на отдельные части сайта.
  • defer — применяйте для скриптов, которые должны включиться после рендеринга страниц и сильно зависимы от выше стоящих скриптов jquery, lazyload.

Функции для встроенных скриптов:

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

Настроить кеширование браузером можно через корневой файл .htaccess на веб-сервере.

Expires

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

Cache-Control

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

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

Включаем gzip-сжатие — необходимо убедиться, что сервер поддерживает такую технологию.

Пример. Вначале прописываем DEFLATE:

И активируем сжатие:

Не используйте переадресацию с целевой страницы

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

Используйте адаптивную верстку страниц и избегайте цепочек перенаправлений — это позволит повысить эффективность сайта в эпоху Mobile-First Indexing.

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

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

Пути и варианты решений:

  • Производить автоматический ресайз картинок под отображаемые размеры изображения (обрезка до нужных пропорций);
  • Автоматически сжимать изображения без их потери качества, либо оптимизировать вручную каждую картинку с помощью сервиса tinypng;
  • Указывать ширину и высоту изображений с помощью атрибутов width и height;
  • Обрабатывать тяжёлые фото в Photoshop — снижаем разрешение до 72 пикселей на дюйм;
  • Объединить все небольшие иконки в один файл — для их вывода использовать CSS-спрайты;
  • Использовать отложенную загрузку изображений, к примеру, с помощью плагина LazyLoad. Минус в том, что картинки не индексируются по этим специальным атрибутам, поэтому лучше применять для всех второстепенных графических элементов.

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

Сократите CSS

Лучшим вариантов будет просто скачать оптимизированные файлы, которые предлагает сам Google, либо получить сжатые файлы через GTMetrix. Еще как вариант: использовать приведенный мною выше скрипт — редактировать несжатый файл, а получать на выходе оптимизированный css-файл.

Сократите HTML

К примеру, для ModX Revo и написал плагин «miniHTML»:

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

Сократите JavaScript

Как писалось выше можно получить готовые сжатые скрипты с помощью сервисов, а можно сжимать их php-скриптами.

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

Тут рекомендациями могу служить следующее:

  • переход на более мощный хостинг;
  • переход на последнюю версию PHP (7.*);
  • обновление CMS и её компонентов, плагинов. ;
  • оптимизация PHP-кода.

Выводы

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

Совет. Проводите оптимизацию в первую очередь с самых посещаемых страниц — отчет «Страницы входа» или «Адрес страницы» в Яндекс.Метрике вам в помощь.

Топ-пост этого месяца:  Удаление вредоносного ПО не гарантирует восстановления позиций в Яндексе

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

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

Есть также документация по Google PageSpeed insights (на англ. яз.).

В следующей статье я расскажу особенности оптимизации скорости загрузки сайта с помощью инструмента GTMetrix.

Пишите свои комментарии и замечания! ;))

Обновлено: 19.04.2020 4125 (в день: 9.775)

Google обновил инструмент проверки скорости мобильного сайта Test My Site

Проверить скорость мобильного сайта с новым инструментом Test My Site (проверьте мой сайт)

С 2020 года существует Test My Site, инструмент для предприятий, который проверяет скорость отдельных мобильных страниц и выдает несколько рекомендаций для исправлений.

Таким образом, с новым Test My Site предприятия теперь могут видеть:

Скорость как всего сайта, так и отдельных страниц

Скорость их сайта / страницы выше или ниже по сравнению с предыдущим месяцем

Независимо от того, оценивается ли скорость их сайта / скорость страницы, Быстро, Средняя или Низкая

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

Потенциальное влияние скорости сайта на доход

Подробный список рекомендуемых исправлений для увеличения скорости на 5 страницах

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

Google обновил инструмент Test My Site

Google обновил инструмент оценки скорости загрузки сайта на разных устройствах Test My Site. Об этом сообщается в блоге Google Ads.

В обновленной версии рекламодатели могут анализировать:

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

По данным американской компании SOASTA, тестирующей сайты, задержка при загрузке в одну секунду снижает коэффициент конверсии на 20%.

MWC 2020: Google запускает Test My Site для анализа скорости загрузки сайта

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

Именно поэтому Google обнародовал MWC 2020, который в настоящее время проводится в Барселоне. Проверить мой сайтинструмент для проверки скорости загрузки своих мобильных веб-сайтов с 3G и 4G. Это отличная инициатива, поскольку она предлагает новый инструмент SEO, тем более что вопрос скорости мобильной зарядки стал приоритетным.

Google обновил свой инструмент анализа сайта Test My Site

Чтобы оправдать использование его онлайн инструмент Test My SiteGoogle объясняет Вероятно, 53% посещений мобильных сайтов будет прерван, если для их загрузки потребуется более 3 секунд «Также подчеркивая, что» В секторе розничной торговли еще одна секунда загрузки мобильного сайта может повлиять на конверсии до 20% ». Это правда, что скорость загрузки стала ключевым элементом для SEO в Google, всегда стремящемся обеспечить лучший опыт работы в Интернете и даже больше, когда терминал является мобильным.

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

Google также заявляет: Одним из самых ярких уроков из мобильной эпохи было то, что любой успешный мобильный опыт зависит от большей скорости. В соответствии с состоянием онлайн-продаж SOASTA, американской дочерней компании Akamai, которая предоставляет услуги по тестированию веб-приложений и веб-приложений, задержка в одну секунду времени зарядки мобильного телефона может влияние на коэффициент конверсии до 20%. Вот почему в 2020 мы создали Test My Site, бизнес-инструмент для проверки скорости работы отдельных мобильных страниц и получения рекомендуемых исправлений. .

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

Тест скорости сайта — почему это важно и некоторые важные инструменты (также Google)

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

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

Присоединяйтесь к нашей странице в Фейсбуке и получите обновлений:

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

Согласно различным исследованиям и среди Google, вот что вам нужно знать:

  • 47% потребителей ожидают, что сайт будет загружен в течение 2 секунд.
  • Снижение скорости на полсекунды приводит к снижению количества входов на площадку на 20%.
  • 53% потребителей покидают сайт, который загружен более 3 секунд.
  • 79% потребителей заявили, что больше не будут покупать с сайта, который страдает от проблем с производительностью и низкой скоростью.
  • Конечно, есть и другие исследования и данные, которые доказывают, что скорость сайта оказывает значительное влияние на процент заброшенности.
  • Хотя эти цифры говорят об исследованиях и собранных данных, важно отметить еще несколько вещей. Прежде всего, веб-сайт — это ваше лицо, а скорость сайта — первое впечатление, которое производит ваш клиент.

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

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

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

Тест скорости сайта — что влияет на скорость

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

  • Сервер — сервер, на котором расположен ваш сайт, оказывает значительное влияние на скорость вашего сайта. Например, географическое расположение сервера, качество оборудования сервера и качество программного обеспечения, установленного на сервере, являются значительными.
  • Хостинг — Помимо сервера, метод хранения также влияет на общий хостинг, VPS и т.д. Чем лучше хостинг, тем быстрее работают сайты.
  • Структура и качество кода — Язык программирования, на котором написан сайт, влияет на скорость работы сайта. Чем более чистый код сайта и меньше весит, тем быстрее он будет.
  • Количество запросов / элементов — чем больше расширений, функций, подключений к внешним интерфейсам и чем больше запросов, тем медленнее будет сайт, поскольку для подъема сайта необходимо дождаться ответа на запросы от этих Сервисов.
  • Количество мультимедиа — количество изображений и видео на сайте и их вес влияют на загрузку сайта, поэтому чем больше весит изображение, тем дольше браузер должен его загрузить. У этого есть несколько решений: уменьшение количества
    мультимедии, уменьшающая резолюция изображения и уменьшение веса изображений с помощью инструментов, которые уменьшают вес.
  • Кэш — Когда вы заходите на определенный сайт, а затем снова заходите на ту же страницу, он загружается быстрее — это механизм кэш-памяти. Фактически, речь идет о сохранении файлов через браузер на вашем компьютере, браузер не запрашивает файлы снова с сервера, а использует то, что хранится в памяти. Важно, чтобы такая память была размещена на сайте, чтобы она обеспечивала более быстрый просмотр.
  • И множество других факторов.
  • Конечно, скорость интернета самого пользователя влияет, так что клиент с низкой скоростью интернета или чей объем интернета превысил квоту, может столкнуться с трудностями при подключении к сайту.

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

Инструменты, позволяющие сделать тест скорости сайта

1. PageSpeed ​​Insights

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

  • Время загрузки первого контента (FCP) — время, когда отображается первый текст или изображения.
  • Индекс скорости загрузки — показывает, насколько быстро заполняется содержимое, отображаемое на странице.
  • Время загрузки для взаимодействия (TTI) — время, когда страница становится полностью интерактивной, с которой вы можете работать.

2. Test My Mobile Site

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

3. Pingdom

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

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

4. WebPageTest

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

5. GTmetrix

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

Как мне решать проблемы и проблемы на сайте?

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

Топ-пост этого месяца:  Среда разработки IntelliJ IDEA основные особенности и преимущества, пробная версия

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

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

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

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

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

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

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

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

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


А вы знаете скорость загрузки вашего сайта с мобильных устройств? Самое время разобраться

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

Мобильные телефоны всегда с собой, а более 50% запросов на поиск в Google осуществляются через мобильные устройства. По последним данным Hitwise, более 65% запросов в категориях «Еда и Напитки», «Здоровье» и «Спорт» поступают именно с мобильных устройств.

Обозначения на графике:
Доля запросов с мобильных устройств в общем числе поисков по отраслям:

  • Еда и напитки — 72%
  • Здоровье — 68%
  • Спорт — 68%
  • Новости и СМИ — 64%
  • Образ жизни — 62%
  • Автомобили — 62%
  • Розница — 56%
  • Туризм (не карты) — 52%
  • Недвижимость/ земля — 48%
  • Досуг — 42%
  • Банковские услуги — 39%

Основано на самых популярных вариантах результатов поиска с последующим переходом на соответствующий сектор, 10 апреля 2020 — 7 мая 2020. Источник: Hitwise, подразделение Connectivity.

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

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

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

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

По данным Google известно следующее:

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

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

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

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

А теперь перейдем к обзору инструментов.

Список инструментов:

Mobitest

Mobitest от AKAMAI позволяет проверить скорость загрузки сайта с мобильных устройств в следующих городах:

  • Лондон;
  • Бангалор;
  • Кембридж.

Есть возможность выбора из множества устройств: iPhone, Nexus, Galaxy S5, iPad, Kindle Fire HDX и т.д.

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

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

Think with Google

Test My Site от Think with Google не выдает точное время загрузки, но польза в нем есть.

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

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

Старайтесь набрать не меньше 100 баллов.

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

Оценка определяется на основании следующих факторов:

  • минимизация CSS, JS & HTML;
  • время отклика сервера;
  • компрессия;
  • кэширование в браузере;
  • оптимизация изображений;
  • наличие JS и CSS, блокирующих отображение верхней половины видимой части сайта;
  • приоритизация контента.

GTmetrix

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

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

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

  • оценка PageSpeed и YSlow;
  • время загрузки;
  • размер страницы;
  • число HTTP-запросов;
  • каскадный график.

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

SynTraffic

SynTraffic осуществляет проверку страницы на мобильных устройствах в следующих регионах:

  • Восточное побережье США;
  • Западное побережье США;
  • Австралия;
  • Западная Европа.

Результаты проверки SynTraffic очень похожи на GTmetrix, отличаются формат и дизайн. Это достойная альтернатива GTmetrix. В результатах проверки содержится следующее:

  • общее число отправленных запросов;
  • балл YSlow;
  • балл PageSpeed;
  • общее время загрузки страницы сайта;
  • % выполненных/неудавшихся запросов;
  • число запросов по домену, типу контента, размеру и времени;
  • каскадные графики.

Dotcom Monitor

На Dotcom Monitor самый широкий выбор регионов проверки: всего их 24.

Dotcom Monitor осуществляет проверку по целому ряду типов устройств, таких как:

  • iPhone
  • iPad
  • Android
  • Nokia Lumia
  • Blackberry

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

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

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

Если вы еще не пользуетесь услугами CDN, например, MaxCDN, CloudFlare, Incapsula, то пора задуматься. На их сетевой периферии доступен целый ряд вариантов оптимизации работы сайта.

Ну а на HOSTING.cafe вы найдете хостинг и виртуальные серверы для размещения своих проектов.

Похожие публикации

  • 7 декабря 2020 в 14:08

6 бесплатных CDN для ускорения и улучшения безопасности вашего сайта

Еще 7 сервисов для мониторинга сайтов

7 сервисов для мониторинга сайтов

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 7

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

Тот же google pagespeed рекомендует убрать все скрипты, стили и прочее в конец страницы, оставив только часть critical css в коде страницы вверху, но это не панацея, например, тот же JS-код на jquery, написанный, например, в теле страницы, не выполнится до того момента, пока все библиотеки, сжатые в один файл не загрузятся, а это произойдет только в конце документа и, ожидаемо в консоли будет «$ is not a function». Включать код, который используется 1-2 раза в общий файл скриптов тоже не всегда целесообразно, поэтому добавляются лишние вещи типа раздувание футера шаблона кучей условий и прочими странными действиями…

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

А самое интересное — что он сбавляет баллы за ресурсы, у которых «не указан срок действия». На своем-то сервере можно как угодно настроить кеширование и прописать, но он ругается и на свои же шрифты, на свой скрипт аналитики, и на iframe с youtube 🙂 На одном из известных форумов, посвященных оптимизации наткнулся на тему со скачиванием скриптов аналитики, метрики и других, для включения в страницу со своего хоста, естественно, все это не работает как надо.

Мне вообще кажется, что оптимизация «под требования гугла» в абсолюте — это верстка всех сайтов целиком на AMP

это не так. Добиться результата 90%+ очень просто без АМП

Тот же google pagespeed рекомендует убрать все скрипты, стили и прочее в конец страницы, оставив только часть critical css в коде страницы вверху,

Это так же неправда. Pagespeed советует засунуть в первые 14 килобайт достаточно ресурсов для отображение верхней (ту что увидят первой) части страницы. Дальше вы вольны поступать как вам удобно. И это на мой взгляд правильно. Это может быть что угодно, как javascript так и css

тот же JS-код на jquery, написанный, например, в теле страницы, не выполнится до того момента, пока все библиотеки, сжатые в один файл не загрузятся, а это произойдет только в конце документа и, ожидаемо в консоли будет «$ is not a function».

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

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

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

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

Первое предложение вы не поняли совсем вообще никак.

Топ-пост этого месяца:  Новый расчёт ставок в Яндекс.Директ на поиске на основе трафика

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

По поводу зaглушки для $ — с какого перепуга вдруг скрипт по-новой пойдет себя выполнять, если он повешен на $(ready) которая заглушка?

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

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

О заглушке.
Заглушка соберет в себе все инлайн скрипты которые должны были бы выполнится при ready и будет ждать загрузки Jquery. Как только Jquery загрузится заглушка по очереди выполнит все ready скрипты которые она собрала. Это 15 строк кода.

Заглушка соберет в себе все инлайн скрипты которые должны были бы выполнится при ready и будет ждать загрузки Jquery. Как только Jquery загрузится заглушка по очереди выполнит все ready скрипты которые она собрала. Это 15 строк кода

Google Pagespeed Insights — в погоне за скоростью загрузки сайта.

Статья о том, как проверить скорость загрузки сайта в Гугл, с помощью инструмента PageSpeed Insights.

Скорость загрузки сайта Google Page speed insights: проверка и оптимизация

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

Важным инструментом при проведении технической оптимизации сайтов под Google — считать 2 инструмента: «Проверка оптимизации для мобильных» и «PageSpeed Insights».

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

PageSpeed Insights

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

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

После завершения проверки Google дает основные рекомендации в отчетах:

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

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

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

Про этот инструмент расскажем немного вскользь.

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

Если возникают «Проблемы при загрузке страницы» — можно посмотреть подробнее что не так.

Чаще всего в этом блоке присутствуют ошибки с жалобами на то, что роботу Googlebot заблокирован доступ в файле robots.txt. Если это скрипты или файлы счетчиков, систем статистики — внешние хосты, то ничего предпринимать не надо.
А если это внутренние ресурсы, влияющие на отображение, заблокированы в robots.txt — то рекомендую их открыть для индексации. Их можно увидеть в отчете «Заблокированные ресурсы», чаще всего это скрипты, стили и картинки.

Еще особенность такого второго инструмента, то, что отображаются ошибки JS в блоке «Консоль JavaScript» — их мы тоже исправляем при наличии такой возможности.

PageSpeed Insights — 100% из 100% — миф, за которым не стоит гнаться.

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

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

Скрипт: сохраняем внешние скрипты на свой сервер.

Поделюсь кодом этого PHP-скрипта костыля:

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

Такой небольшой хак — результат 99%.

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

Переместите все CSS-стили и JavaScript-файлы в самый низ сайта, после контента.

Оптимизируйте загрузку видимого контента

Используйте следующие методы оптимизации:

Атрибуты для подключаемых скриптов:

  • onload=»async» — для первоочередных ресурсов, без которых сайт будет некорректно работать, это позволит загружать страницы асинхронно. Рекомендуется для: jquery, lazyload;
  • async — для скриптов, которые могут загружаться асинхронно и не особо влияют на функционал сайта. Рекомендуется для: скриптов социальных сетей, кнопок поделиться, скриптов, не влияющих на отдельные части сайта.
  • defer — применяйте для скриптов, которые должны включиться после рендеринга страниц и сильно зависимы от выше стоящих скриптов jquery, lazyload.

Функции для встроенных скриптов:

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

Настроить кеширование браузером можно через корневой файл .htaccess на веб-сервере.

Expires

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

Cache-Control

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

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

Включаем gzip-сжатие — необходимо убедиться, что сервер поддерживает такую технологию.

Пример. Вначале прописываем DEFLATE:

И активируем сжатие:

Не используйте переадресацию с целевой страницы

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

Используйте адаптивную верстку страниц и избегайте цепочек перенаправлений — это позволит повысить эффективность сайта в эпоху Mobile-First Indexing.

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

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

Пути и варианты решений:

  • Производить автоматический ресайз картинок под отображаемые размеры изображения (обрезка до нужных пропорций);
  • Автоматически сжимать изображения без их потери качества, либо оптимизировать вручную каждую картинку с помощью сервиса tinypng;
  • Указывать ширину и высоту изображений с помощью атрибутов width и height;
  • Обрабатывать тяжёлые фото в Photoshop — снижаем разрешение до 72 пикселей на дюйм;
  • Объединить все небольшие иконки в один файл — для их вывода использовать CSS-спрайты;
  • Использовать отложенную загрузку изображений, к примеру, с помощью плагина LazyLoad. Минус в том, что картинки не индексируются по этим специальным атрибутам, поэтому лучше применять для всех второстепенных графических элементов.

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

Сократите CSS

Лучшим вариантов будет просто скачать оптимизированные файлы, которые предлагает сам Google, либо получить сжатые файлы через GTMetrix. Еще как вариант: использовать приведенный мною выше скрипт — редактировать несжатый файл, а получать на выходе оптимизированный css-файл.

Сократите HTML

К примеру, для ModX Revo и написал плагин «miniHTML»:

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

Сократите JavaScript

Как писалось выше можно получить готовые сжатые скрипты с помощью сервисов, а можно сжимать их php-скриптами.

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

Тут рекомендациями могу служить следующее:

  • переход на более мощный хостинг;
  • переход на последнюю версию PHP (7.*);
  • обновление CMS и её компонентов, плагинов. ;
  • оптимизация PHP-кода.

Выводы

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

Совет. Проводите оптимизацию в первую очередь с самых посещаемых страниц — отчет «Страницы входа» или «Адрес страницы» в Яндекс.Метрике вам в помощь.

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

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

Есть также документация по Google PageSpeed insights (на англ. яз.).

В следующей статье я расскажу особенности оптимизации скорости загрузки сайта с помощью инструмента GTMetrix.

Пишите свои комментарии и замечания! ;))

Обновлено: 19.04.2020 4126 (в день: 9.777)

Google запустили ряд новых функций в своём инструменте Test My Site.

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

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

“Когда дело доходит до загрузки страниц, важен каждый момент. С каждой дополнительной секундой ваши конверсии могут падать до 20%”

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

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

Фирма Yard Dog Fence Company уменьшила размер картинок на своём сайте и таким образом сократила скорость загрузки страниц с 26 секунд до 5.

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

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