Проверка скорости загрузки сайта как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights

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

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

Оптимизируем WordPress по сервису PageSpeed Insights

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

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

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

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

Код для сервера Nginx:

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

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

Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

Подключение скриптов

Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script , как обычно, а через файл functions.php в футер сайта, таким образом:

Подключение скрипта только на определенной странице.

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

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

Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri() .

Подключение стилей

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

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

Подключение библиотеки jQuery

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

Отключаем стили плагинов

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

Пример из WP-Pagenavi

Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

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

Переносим все скрипты в footer

Есть такой небольшой плагин Footer JavaScript , который написал автор Vladimir Prelovac. Он переносит все подключения, даже те, которые не нужно, в низ сайта. Используйте на свое усмотрение.

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

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

Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин Complete Analytics Optimization Suite , который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js, сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

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

Код для сервера Nginx:

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

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

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

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

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

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

Сокращение JavaScript, CSS, HTML

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

Они будут на лету сокращать файлы.

А лучше всего взять просто копию любого файла, переименовать его, к примеру, script.min.js , поместить туда сокращенный код и подключить вместо того, что был. Во всяком случае это можно проделать с теми файлами, которые вы практически никогда не редактируете или очень редко. По окончании проверки сервиса PageSpeed Insights дается ссылка на скачивания всех сокращенных файлов.

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

Проверка скорости загрузки сайта в Google Page Speed

Чем он может быть полезен? Давайте разберёмся.

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

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

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

В свое время Google представил сервис Page Speed – официальный инструмент для измерения скорости сайтов. Подобных сервисов немало, но по понятной причине веб-мастера предпочитают ориентироваться на рекомендации поисковика, в котором им предстоит продвигать свои проекты.

Как пользоваться Page Speed?

Для получения сводки и рекомендаций по оптимизации любого сайта достаточно перейти на страницу Page Speed Insights (PSI) и ввести в единственное поле интересующий домен. Запуск процесса, минута ожидания, и вы получаете целую гору полезной информации.

Результат тестирования делится на 2 группы показателей – для обычной и мобильной версии. Для каждой из них система покажет набранное количество баллов, исходя из всех задержек и обнаруженных проблем. Максимум можно набрать 100 попугаев. Отличным результатом считается показатель от 80. Свыше 90 – шикарным.

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

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

Полученные результаты система под капотом сравнивает с другими сайтами, которые находятся в базе. Если ваши пузомерки окажутся выше 98% других сайтов, но вы получите 100 баллов. Если лучше 75% — то всего лишь 50. То есть характеристика относительная, конкурирующая. Чем больше быстрых сайтов в системе, тем ниже по отношению к ним будут показатели какого-то условного ресурса, если его не оптимизировать постоянно.

Другими словами, на показатели PSI можно и нужно ориентироваться. Они дают представление о скоростных параметрах, влияющих на отношение и самого поисковика, и пользователей к ресурсу. Игнорировать их нельзя. Но и расстраиваться не стоит, увидев результат ниже 100 баллов, — всё представлено в сравнении, а не натуральной величиной в вакууме.

Самое ценное, что даёт Page Speed – это рекомендации по увеличению производительности. Статистика даёт советы с короткой расшифровкой в действиях и показывает приблизительную экономию времени загрузки в миллисекундах. Список рекомендаций может быть очень длинным. Говоря по-честному, понимать это всё может только опытный веб-мастер. Но и для новичков есть понятные советы – сжать картинки (напр. TinyPNG), изменить формат чего-то, снизить количество переадресаций, убрать избыточные виджеты и т. д.

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

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

Выводы и рекомендации

Google Page Speed – крайне полезный инструмент веб-мастера. Своего рода бенчмарк скорости работы сайтов от главной поисковой системы мира. На него ориентируются все в большей или меньшей степени.

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

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

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

Как получить 100/100 в Google Page Speed Test Tool

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

Как увеличить скорость загрузки страниц

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

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

Шаг #1: Оптимизируем изображения

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

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

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

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

Шаг #2: Максимально сократите CSS и JavaScript код

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

может быть сокращен до:

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

А для сайтов на WordPress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

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

CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

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

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

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

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

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

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

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

Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

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

Заключение

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

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

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

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

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

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

Результатом анализа будет оценка по шкале XY/100. А ошибки, влияющие на скорость загрузки сайта, будут подсвечены одним из цветов:

  • Красным – требуют скорейшего устранения.
  • Оранжево-желтым – нужно исправить по возможности.
  • Зеленым – с элементами сайта все хорошо.

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

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

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

  1. Зайти на официальный сайт Google page developers.google.com/speed/pagespeed/insights/ .
  2. Главная страница представляет собой форму, в которую нужно записать ссылку на сайт, который нужно проанализировать.

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

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

  1. Спустившись ниже можно узнать скорость загрузки страницы в условиях популярной для смартфонов 3G сети.

  1. Следующим пунктом идет список рекомендаций по улучшению сайта и основная информация о его производительности.

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

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

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

Чтобы ускорить сайт потребуются минимальные технические знания о сайтостроении, JAVASCRIPT, CSS, HTML и CMS.

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

Способ №1: Оптимизация картинок

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

Для этого подойдут такие способы:

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

Способ №2: Удаление лишних строчек кода

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

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

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

  • Чтобы устранить подобную проблему можно установить плагин Gulpjs, который автоматически устранит все ненужные пробелы в коде файлов CSS.
  • Оптимизировать JavaScript поможет плагин Closure Compiler и JSMin которые проделывают аналогичную вышеописанную операцию.
  • Очистить HTM код сайта можно с помощью инструмента PageSpeed Insights для CMS wordpress.

Способ №3: Включения сжатия

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

Способ №4: Оптимизация мобильной версии сайта

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

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

  1. Нажать на «Настройки» в правом верхнем углу всплывающего окна.
  2. Далее выбрать «Дополнительные инструменты».
  3. Затем «Инструменты разработчика» и на панели инструментов нажать на иконку со смартфоном.
  4. Теперь сайт выглядит как на телефоне.

Способ №5: Включения кеширование браузера

Кэширование браузера может оказывать влияние на скорость загрузи сайта с мобильного. Это работает так:

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

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

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

Насколько важна скорость загрузки с мобильного

Согласно последним исследованием и статистике компании Google, более половины времени в интернете пользователь проводит со смартфона. В этом же исследовании был проведен опрос, в результате которого больше 40% пользователей считают, что скорость загрузки страницы не должна превышать 3 секунды. А 30% назвали уже 2 секунды слишком долгим временем.

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

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

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

Почему в Google page нужно проверять несколько страниц

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

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

Заключение

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

Google разработали функциональный сервис для проверки скорости загрузки сайта с мобильного телефона и выявления проблем, которые тормозят его работу. Понравилась статья, не забудь подписаться на обновление . На сегодня у меня все! А вы как проверяете скорость загрузки своего сайта? До встречи на блоге.

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 на веб-сервере.

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

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.2019 4066 (в день: 9.727)

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

Время чтения: 6 минут Нет времени читать? Нет времени?

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

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

5 сервисов для проверки скорости загрузки сайта

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

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

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

PageSpeed Insights от Google оценивает эффективность страниц для мобайла и десктопа, дает рекомендации по оптимизации сайта.

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

В общем, тут как с «Главредом» – нельзя слепо подгонять под максимальное количество баллов, надо думать головой.

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

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

К сожалению, не получится посмотреть, как быстро страница подгружается в России. Можно выбрать для теста только Швецию, США или Австралию.

Сервис не очень с точки зрения дизайна, зато дает больше выбора в плане локаций – их свыше 40 (правда, РФ опять нет в списке). Плюс есть возможность выбрать разные браузеры и даже устройства, если запускать тест из Далласа.

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

Еще один сервис по проверке скорости загрузки сайта. Достоинства в сравнении с WebPageTest:

  • Приятный интерфейс.
  • Возможность выбрать скорость соединения.
  • Дополнительная оценка от Yahoo – пригодится для продвижения за рубежом.
  • Есть выгрузка отчета в PDF.
  • Можно настроить регулярный мониторинг страницы. Бесплатно – не чаще 1 раза в день с сервера в Ванкувере.

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

У GTmetrix есть и платная версия – для тех, кому нужно проверять больше, чаще и детальнее.

Sitespeed позволяет проверить, как сайт загружается сразу с нескольких точек. Наконец-то, русскоязычный сервис и есть сервера РФ и Украины.

Если есть желание помочь проекту, вариант – стать спонсором: добавить свой сервер.

Чтобы проверить свой сайт, можно также использовать Google Analytics и «Яндекс.Метрику». В обеих системах есть отчеты по скорости (времени) загрузки сайта (страниц).

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

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

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

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

Мораль: надо одинаково уважать пользователей с разными устройствами, экранами, ОС и браузерами. Тогда и трафик пойдет, и конверсии будут.

Перечень инструментов для проверки на адаптивность /кроссбраузерность / кроссплатформенность:

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

Никакой интерактивности и выбора разрешения – только скриншот первого экрана.

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

Browserling – инструмент кроссбраузерного тестирования. Как запустить:

  • Выбрать нужную версию Android / Windows.
  • Указать браузер вместе с версией.
  • Нажать “Test now”.

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

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

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

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

Screenfly – такой же бесплатный, как Adaptivator, но более функциональный инструмент. Можно выбрать один из 30 вариантов экранных размеров или – прописать высоту и ширину самостоятельно.

Чтобы видеть все элементы страницы, надо еще включить прокрутку – нажать в меню на кнопку “Allow scrolling”.

I love adaptive – удобный инструмент проверки на адаптивность и кроссплатформенность.

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

Минус: для ПК и ноутбуков нельзя выбрать операционную систему. Еще для работы с некоторыми сайтами надо обязательно устанавливать расширение на Chrome.

Чтобы изучить, как с вашим сайтом взаимодействуют пользователи разных устройств, ОС и браузеров – используйте также соответствующие отчеты Analytics и «Метрики».

P. S. Если мы забыли какой-то важный и полезный инструмент, напомните в комментариях. И – будем благодарны за репосты.

Как улучшить скорость сайта: простой, но рабочий гайд

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

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

Но что делать, если у вас низкая скорость загрузки сайта? Как улучшить скорость загрузки сайта (и, в частности, как увеличить скорость загрузки сайта WordPress)?

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

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

  1. Проверить скорость загрузки через PageSpeed Insights.
  2. Изучить полученный отчёт о скорости.
  3. Устранить проблемы согласно рекомендациям.

1. Проверяем скорость загрузки сайта

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

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

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

2. Изучаем отчет PageSpeed Insights

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

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

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

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

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

Проверьте позиции своего сайта прямо сейчас!

3. Устраняем проблемы согласно рекомендациям

Итак, вы знаете проблему и вам нужно её устранить. Что для этого сделать? Нет, не обязательно бежать на Stack Overflow или Хабр за объяснениями и помощью:) Достаточно лишь посмотреть, что советует сам Google для оптимизации скорости:

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

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

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

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

Выбираем плагины для ускорения WordPress

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

  1. a3 Lazy Load — позволяет производить отложенную загрузку изображений.
  2. Autoptimize — глобальный плагин, позволяет работать с js/CSS
  3. W3 Total Cache — глобальный плагин, позволяющий работать со всеми типами данных, необходимых для ускорения (кэш, файлы, куки, HTML/CSS/js).
  4. Smush Image Compression and Optimization — позволяет оптимизировать размер изображений путем компрессии.

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

Общие рекомендации

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

Обратите внимание на следующие нюансы:

  1. Выбирайте быстрые и адаптивные темы на WordPress.
  2. При больших нагрузках используйте CDN для улучшения скорости ответа сервера. Рекомендуем использовать Cloudflare.
  3. Не устанавливайте плагины, которые существенно снижают скорость загрузки.
  4. Используйте плагины, которые мы перечислили выше.

Напоследок мы рекомендуем измерять значения не только с помощью PageSpeed Insights, но и с помощью SpySERP, отслеживая позиции сайта и проверяя, как меняется ранжирование страниц и видимость сайта для ПС в целом после улучшения скорости.

Это всё! Надеемся, что наши рекомендации позволят вам разогнать сайт на WordPress.

10 сервисов, чтобы проверить скорость загрузки сайта

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

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

В интернете карают за низкую скорость

Проверка скорости сайта: как это делается

Хорошая скорость загрузки страницы — 0.35–0.38 секунд. Такие результаты показывают сайты в топе выдачи. Чтобы посчитать это время, нужно измерить так называемую «скорость ответа сервера» — как быстро он реагирует на запрос клиента (браузера).

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

Google PageSpeed Insights

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

Чтобы проверить сайт, введите URL в строку на странице developers.google.com. Сервис оценит скорость и предложит варианты, как улучшить показатели:

Это простой и понятный сервис без тяжелого функционала.

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

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

Посмотреть скорость ответа сервера на запрос робота «Яндекса» можно с помощью инструмента webmaster.yandex.ru. Он покажет время ответа в миллисекундах:

Если код ответа — «200 ОК», с сайтом все в порядке. Если какой-то другой («404 Not Found», «301 Moved Permanently»), у вас проблемы.

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

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

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

Сервис собирает статистику скорости за период времени и предоставляет подробный отчет об ошибках. Тип проверки можете выбрать сами: HTTP(S), TCP port, Ping, DNS, UDP, SMTP, POP3 and IMAP.

Самый большой минус Pingdom — то, что сервис платный. Цены начинаются с $9,95 в месяц.

Sitespeed.ru

Еще один популярный инструмент в рунете — sitespeed.ru. Интерфейс простой и понятный: пишешь URL, запускаешь тест, получаешь результат. Сервис дает подробное описание, как справиться с каждой проблемой сайта:

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

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

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

Тестировать скорость можно из нескольких регионов. Кроме того, сервис анализирует эффективность ресурса на мобильных устройствах.

До трех URL можно мониторить бесплатно. Больше сайтов можно подключить на премиум-тарифах (от $14,95 в месяц). Они включают и другие интересные возможности, например, брендированные отчеты о скорости сайта и запись видео с загрузкой, чтобы увидеть узкие места в режиме реального времени.

Как проверить и увеличить скорость загрузки сайта: 3 лучших онлайн-сервиса

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

» data-medium-file=»https://wilhard.ru/wp-content/uploads/2017/05/web_speed-300×300.png» data-large-file=»https://wilhard.ru/wp-content/uploads/2017/05/web_speed.png» />Скорость загрузки сайта – это очень важный фактор ранжирования в поисковых системах, который сильно влияет на позиции вашего сайта. Под скоростью загрузки сайта понимают среднюю скорость загрузки всех его страниц за некоторый период времени. Исследования Гугл показывают, что сайт теряет 40% трафика, если скорость загрузки сайта более 3 секунд. Интересно, что лишь 20% сайтов в Интернете имеют скорость загрузки менее 1 секунды. Если вы увеличите скорость загрузки сайта и сделаете ее менее одной секунды, то вы увеличите свой трафик в два-три раза и попадете в 20% самых быстрых сайтов. Разумеется, при этом вырастут ваши позиции в результатах поиска Яндекс и Гугл, а в Гугл Адвордс увеличится показатель качества ваших объявлений и снизится цена клика. И хотя приемлемой скоростью загрузки считается до 4 секунд, большинство экспертов рекомендуют 1.5 секунды.

Таким образом, идеальная скорость загрузки сайта – 0.5 секунды, максимально допустимая скорость загрузки сайта – 2 секунды. Стремитесь к этому!

Популярные онлайн-сервисы проверки скорости сайта

В русскоязычном и англоязычном Интернете все рекомендуют одни и те же онлайн-сервисы для проверки скорости загрузки сайта: webpagetest.org, Google Pagespeed Insights, pingdom.com, gtmetrix.com – это самые крутые и международно признанные сервисы. Наберите запрос “проверка скорости сайта” в Яндексе или Гугле, откройте десять сайтов и вы увидите, что все статьи написаны про эти 4 сервиса и в них будет еще штук шесть мелких и малоизвестных онлайн-сервисов проверки скорости загрузки. Обычно читаешь такую статью и потом неясно, чем же пользоваться в итоге.

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

Тем не менее я использую webpagetest.org, Google Pagespeed Insights, для чего – объясню далее, а вот сервисы pingdom.com, gtmetrix.com – совершенно бесполезны.

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

Для проверки скорости загрузки сайта я использую Гугл Аналитикс и Яндекс Метрику – они проверяют скорость загрузки вашего сайта непрерывно – 24/7 – и хранят эту информацию. Зачем пользоваться какими-то онлайн-сайтами, если у вас уже есть вся информация, при этом вы можете смотреть скорость загрузки отдельных страниц в разные периоды времени в разных странах и браузерах?

Как проверить скорость загрузки сайта в Яндекс Метрике

Откройте Отчеты > Стандартные отчеты > Мониторинг > Время загрузки страниц .

скорость загрузки сайта в Яндекс Метрике

» data-medium-file=»https://wilhard.ru/wp-content/uploads/2017/05/Page_speed_report_yandex-300×126.png» data-large-file=»https://wilhard.ru/wp-content/uploads/2017/05/Page_speed_report_yandex-1024×431.png» /> Время загрузки страниц – Яндекс Метрика

Вы увидите такой вот отчет “Время загрузки страниц”:

Время до загрузки DOM – Яндекс Метрика

Скорость загрузки сайта показывает параметр “Время до загрузки DOM” – это время от начала перехода на страницу до полной загрузки страницы со всеми ее компонентами (изображения, CSS, скрипты и т. п.). Это значение субъективно воспринимается посетителем как «качество» страницы. Нас в первую очередь интересует именно этот параметр – надо смотреть его. Описание значения других параметров отчета скорости загрузки страниц можно прочесть в хелпе Яндекса “Время загрузки страниц“.

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

Как проверить скорость загрузки сайта в Гугл Аналитикс

В разделе ПОВЕДЕНИЕ > Скорость загрузки сайта вы найдете два очень полезных отчета: Обзор и Время загрузки страниц.

Как проверить скорость загрузки сайта в Гугл Аналитикс

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

В отчете “Обзор” главный показатель, который интересует нас – это “среднее время загрузки страницы (сек.)”, потому что это и есть скорость загрузки сайта. Также внимательно изучите график, чтобы знать, как менялась скорость загрузки сайта последние 30 дней.

В отчете “Время загрузки страниц” вы найдете подробную информацию по времени загрузки каждой страницы вашего сайта.

Подробное описание всех этих отчетов есть в хелпе Гугл: Отчеты “Скорость загрузки сайта”.

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

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

  • большие картинки на сайте. Если у вас на страницах сайта есть большие картинки, которые долго загружаются, то это может очень сильно снижать скорость загрузки. Старайтесь, чтобы размер одной картинки не превышал 70 Кб;
  • медленная скорость работы сервера, то есть плохой хостинг. В этом случае надо найти более быстрого хостинг-провайдера. Какого хостинг-провайдера выбрать, я писал в статье: Мой рейтинг лучших хостингов и их официальная статистика;
  • медленная работа базы данных. Необходимо периодически оптимизировать и чистить базу данных вашего блога.

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

Google Pagespeed Insights

Google Pagespeed Insights дает подробные рекомендации по увеличению скорости вашего сайта и он интегрирован в Гугл Аналитикс. Его вы можете найти в отчете ПОВЕДЕНИЕ > Скорость загрузки сайт > Ускорение загрузки . Этот отчет дает информацию по улучшению каждой страницы сайта, переадресовывая вас на Google Pagespeed Insights.

Webpagetest.org

Google Pagespeed Insights очень хороший отчет и им надо обязательно пользоваться, но мне больше нравится webpagetest.org. Запускать этот отчет можно для любого европейского города, потому что измерение скорости загрузки сайта для России сейчас почему-то недоступно, а раньше можно было измерять скорость загрузки в Москве. Этот отчет раскладывает скорость загрузки сайта на мельчайшие элементы и очень наглядно представляет их в таком виде:

Отчет о скорости загрузки сайта webpagetest.org

» data-medium-file=»https://wilhard.ru/wp-content/uploads/2017/05/webpagetest_report-300×189.png» data-large-file=»https://wilhard.ru/wp-content/uploads/2017/05/webpagetest_report.png» /> Отчет о скорости загрузки сайта webpagetest.org

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

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

Я руковожу платформой Loading.Express. Наш сервис проверяет скорость загрузки сайта и помогает ускорять медленные сайты. Мы любим быстрый интернет и хотим сделать мир лучше. Поэтому я протестировал 20 похожих сервисов.

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

79% клиентов, кто был недоволен работой сайта, говорят, что они реже покупают с того же сайта снова, по данным компании Skilled.co.

64% ожидают, что страницы будут загружаться меньше четырёх секунд.

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

Одна секунда задержки загрузки страницы = 11% потерянных просмотров страниц.

Даты создания взяты из Web Archive. В прошлой статье я анонсировал исследование банковской сферы РФ.

Сервисы из России

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

  • Запущен в июле 2016 года.
  • Один сайт за проверку.

2. Seolik.ru

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

  • Запущен в феврале 2015 года.
  • Один сайт за проверку.

3. Sitespeed.ru

Быстрая проверка скорости сайта от компании «Русоникс».

  • Запущен в октябре 2012 года.
  • Один сайт = одна проверка + продажа хостинга.
  • Проверки из России.

Проверка через сервис PageSpeed Insight. Все данные через него. Данные могут быть неточными.

Сервисы из США

Сервера у них тоже, как правило, с проверками и замерами из США.

5. Google PageSpeed Insights

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

  • Запущен 5 мая 2012 года.
  • Проверки с серверов в Европе.
  • Версия от 2019 года Think With Google.

6. Pingdom Tools

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

  • Запущен 20 июля 2006 года.
  • Проверки из США и Европы.

7. WebPagetest

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

  • Запущен 2 апреля 2009 года.
  • Проверки из США.
  • Запустились ребята в 2015 году.
  • Юзабилити и дизайн устаревшие. Пользоваться сложновато. Проверки из США.

9. Web Site Optimization

Кажется, это единственный сервис, через который можно узнать, сколько будет загружаться сайт через соединение со скоростью интернета в 14,4K. Например, сайт vc.ru на такой скорости будет загружаться 22 минуты.

  • Запущен в апреле 2003 года, не обновлялся с 2008 года.

10. Dotcom-Monitor

Тест из 25 стран за раз. Тест скорости проходит сразу два раза: без кэша и с ним. Сразу замеряет PageSpeed. Дизайн скромный. Часто зависает при замере скорости из Шанхая.

  • Запущен 7 ноября 2014 года.

Сервисы из других стран

Сервисы проверки скорости загрузки сайта из разных уголков мира. Где только не создают эти инструменты!

11. GTmetrix

Эти ребята сделали невозможное. Сервис удобен. Задизайнен. Быстр. Замер параметра PageSpeed не обновлен и снимает по старому алгоритму до ноября 2018 года.

Бесплатно сохраняет историю. Снимает видео загрузки. Даёт детальный отчет по времени загрузки каждого запроса.

  • Сделан в Канаде, запустился 4 февраля 2010 года.
  • Серверов в России нет.

12. Load Impact

DDoS-проверка вашего сайта. Как будет меняться время скорости загрузки при резко растущей посещаемости? Проверяйте, это важно понимать.

  • Сделан в Швеции, запущен 10 декабря 2008 года.
  • 50 тестов бесплатно.

13. Sitespeed.me

Проверка скорости загрузки из семи стран. Сервис запустил пакистанец — с фирмой в Лондоне. Из функций только проверки.

  • Сделан в Лондоне, запущен 28 июля 2014 года.

14. Dareboost

Добротный сервис. Создает видео загрузки. Ватерфол. Сканирует скрипты. HTTP/2-готовность. Ошибки браузера. Выдает индекс скорости сайта. Графично, функционально. Молодцы!

  • Сделан во Франции, запущен 8 февраля 2014 года.

15. GiftofSpeed

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

  • Сделан в Нидерландах, запущено 7 апреля 2015 года.

16. Uptrends

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

  • Сделан в Нидерландах, запущен 4 декабря 2014 года.

Проверка на SEO, адаптив, скорость загрузки. Некий Patrick Sexton пишет, что сделал этот сервис бесплатным для того, чтобы сделать мир лучше. Класс!

  • Сделано на Филиппинах, запущен 14 августа 2015 года.

Проверка скорости загрузки и еще несколько проверяльщиков, в том числе HTTP/2. Проверка из 14 стран. Продают услуги.

  • Сделан в Швейцарии, запущен 3 апреля 2015 года.

19. Site24x7

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

  • Сделан в Индии, запущен 18 июня 2007 года.

20. SmallSeoTools

Довольно странный сервис. Замеряет скорость сайта на модемах.

  • Сделан в Лондоне, запущен 6 ноября 2018 года.

Зачем ускорять скорость загрузки сайтов

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

Для наглядности мы вывели инсайты в несколько рейтингов по нишам:

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

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

На подходе статья с обзором удивительных инсайтов о веб-студиях из «Рейтинга рунета».

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

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

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

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

Хорошая подборка. Спасибо!

Почему нету Google Lighthouse?
И очень скудно описан WebPageSpeedTest

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

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

Скажите, как при помощи кукис, оставляемых в браузере пользователя, вы следите за аптаймом?

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

Pingdom Tools

По неведомым причинам этот сервис пользуется популярностью в России

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

Ссылка на основную публикацию