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

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

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

Какую скорость загрузки считать нормой

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

От чего зависит скорость загрузки

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

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

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

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

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

Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed. Работать с ним просто – указываем адрес сайта и жмем кнопку «Анализировать».

В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

• Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint).
• Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded).
• Насколько сайт оптимизирован в плане скорости загрузки.
• Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

Желательно попасть в зеленую зону – и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

Еще один хороший сервис для проверки скорости загрузки, правда, на английском – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

А теперь к сути:

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

Шаг 1. Оптимизация картинок

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

На что смотрим:

• Размер картинок (ширина и высота)

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

• Вес картинок (килобайты)

  Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla.

• Превью к большим картинкам

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

Например, Спортмастер использует картинки товаров в трех вариантах:

1. Картинка для списка товаров (весит 7 Кб)

   https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/176_188_1/14440990299.jpg

2. Картинка для карточки товара (весит 18 Кб)

   https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/331_394_1/14440990299.jpg

3. Картинка для просмотра товара с «лупой» (весит 942 Кб)

   https://cdn.sptmr.ru/upload/iblock/9f9/14440990299.jpg

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

При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

Шаг 2. Gzip-сжатие

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

Как включить Gzip-сжатие:

• Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):

  <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  

    AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
  </IfModule>

• Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http {…} и перезапускаем сервер:

  gzip on;
  gzip_static on;
  gzip_comp_level 5;
  gzip_min_length 1024;
  gzip_proxied any;
  gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

• Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

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

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

• Через файл htaccess (кэшируем статические файлы на 10 дней):

  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault «access plus 10 days»
    ExpiresByType image/gif «access plus 10 days»
  

    ExpiresByType image/jpg «access plus 10 days»
    ExpiresByType image/jpeg «access plus 10 days»
    ExpiresByType image/png «access plus 10 days»
    ExpiresByType image/svg+xml «access plus 10 days»
    ExpiresByType text/css «access plus 10 days»
  </IfModule>

• Для Nginx добавляем в конфигурацию:

  server {
    …
    location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
      root /var/www/user/data/www/site.ru;
      expires 10d;
    }
    …
  }

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

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

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

Шаг 4. Минимизация css- и js-файлов

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

Пример обычного кода:

.speedometer-wrapper {

  position: relative;
}
.speedometer-wrapper .list {
  margin-top: 80px;
  margin-left: -20px;
  padding-bottom: 85px;
}

После минимизации:

.speedometer-wrapper{position:relative}.speedometer-wrapper .list{margin-top:80px;margin-left:-20px;padding-bottom:85px}

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?

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

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

Шаг 5. Порядок загрузки css- и js-файлов

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

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге <head>), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом </body>.

<html>
  <head>
    …
    <link rel=»stylesheet» href=»//fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic» type=»text/css»>
    <link rel=»stylesheet» href=»/inc/min/styles.min.css» type=»text/css»>
    <link rel=»stylesheet» href=»/css/main.css» type=»text/css»>
    …
  </head>
  <body>
    …
    <script src=»/inc/min/scripts.min.js»></script>
    <script src=»/js/main.js»></script>
  </body>
</html>

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

Шаг 6. Лишние плагины или счетчики

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

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

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

CDN (Content Delivery Network, сеть доставки контента) – это сеть из множества серверов, распределенных географически по стране или всему миру. Каждый из серверов дублирует контент с основного сервера (контент дублируется по первому запросу пользователем и хранится в течение какого-то времени).

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

Как правило, CDN используют в двух случаях:

• Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
• Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath. Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».

Шаг 8. Сокращение числа http-запросов

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

Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).

Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.

Шаг 9. Оптимизация шрифтов

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

Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами – woff и woff2.

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

Шаг 10. Сокращение HTML-кода

Помимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц – статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).

Шаг 11. Оптимизация работы сервера

Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере – удалить неиспользуемые и обновить текущие модули.

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

Шаг 12. Оптимизация скриптов и баз данных

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

Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Open Cart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.

Нет слоупокам

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

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

1ps.ru

как ускорить загрузку страниц сайта на любых устройствах

Реальная скорость загрузки и рейтинг PageSpeed

Важность скорости загрузки

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

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

В Google провели исследование, обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.

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

• Chrome User Experience Report. Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
• Lighthouse. Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
• PageSpeed Insights. Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.

Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.

О чём говорит Google Pagespeed Insights

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

Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.

• Данный инструмент не измеряет скорость загрузки страниц.
• Показатель Page Insights не влияет на ранжирование.
• Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.

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

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

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

А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.

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

• Pingdom Tools. Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
• WebPageTest. Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
• GTmetrix. Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.

Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье.

Сквозная аналитика

Подробные отчеты от вложений до прибыли по каждому рекламному каналу

• Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
• Получайте данные из CRM и рекламных площадок
• Стройте воронку от показов рекламы до сделок
• Более 30 показателей эффективности в отчетах

Как ускорить загрузку своего сайта на любых устройствах

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

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

Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:

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

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

Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.

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

• Подберите формат

В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

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

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

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

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

Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

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

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

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

Оптимизация JavaScript и CSS

Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

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

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

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

Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor. В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.

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

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

• Сокращение JavaScript

Для такой задачи подойдёт инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.

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

• Загрузка контента из Google CDN

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

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

GZIP сжатие

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

Существует 2 типа сжатия gzip: динамическое и статическое.

• Динамическое сжатие

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

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

• Статическое сжатие

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

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

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

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

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

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

С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control.

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

Стоит ли пользоваться Google Pagespeed Insights

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

Сквозная аналитика

Подробные отчеты от вложений до прибыли по каждому рекламному каналу

• Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
• Получайте данные из CRM и рекламных площадок
• Стройте воронку от показов рекламы до сделок
• Более 30 показателей эффективности в отчетах

Следуя рекомендациям Pagespeed Insights, уделяйте внимание главным методам оптимизации:

• Оптимизация JavaScript и CSS;
• Оптимизация изображений;
• Сжатие gzip;
• Кеширование в браузере.

blog.calltouch.ru

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

Материалы для скачивания

Шаблон отчета с техническими показателями эффективности сайта

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

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

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

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

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

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

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

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

1. PageSpeed Insights

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

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

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

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

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

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

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

2. Pingdom Tools

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

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

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

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

3. GTmetrix

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы собираете данные в Google BigQuery с помощью OWOX BI Pipeline и хотите отслеживать основные технические показатели сайта, заполните форму — и мы пришлем вам шаблон дашборда, который можно скопировать, а также гайд, как его настроить.

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

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

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

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

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

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

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

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

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

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

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

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

www.owox.ru

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

Добрый день, дорогие друзья! Сегодня мы обсудим с вами скорость загрузки сайта.

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

В конце  статьи вас ждет несколько новостей.

Скорость загрузки страниц сайта имеет огромное значение.

Если Вы с этим не согласны, то предлагаю ознакомиться со статистикой:

• Дополнительные 400 миллисекунд приводят к падению трафика на 5-9%.
• Для Google дополнительные 500 миллисекунд приводят к тому, что его поиском пользуются на 20% меньше посетителей.
• 100 миллисекунд  стоят Amazon   1% прибыли;
• 1 из 4 пользователей Интернета закрывает сайт, если он загружается дольше 4 секунд. Думаю, и Вам иногда надоедало ждать загрузки какого-нибудь сайта и вы искали информацию в другом месте.  Мне приходилось.
• 50% пользователей , которые выходят в сеть с мобильных телефонов, закрывают сайт, если ожидание превышает 10 секунд.
• Кроме того, трое из пяти  больше не вернутся на этот сайт.
• 8 секунд ожидания и вы можете потерять более 47% пользователей (стоит забеспокоиться и начать действовать)

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

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

Почему Google уделяет такое значение скорости

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

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

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

Время загрузки и время отображения страницы

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

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

Как люди воспринимают загрузку страницы

• Память и внимание человека ограничены. Он не может воспринимать множество вещей одновременно и он может легко отвлекаться на что-то новое.
• Человек любит контролировать то, что он делает и ненавидит ждать (это точно :)).
•  Время отклика 0,1 секунды  дает людям впечатление мгновенности.
• Время отклика в 1 секунду производит впечатление спонтанности и непрерывности. Пользователь может почувствовать задержку, но не обратит на нее особого внимания.
• От 1 до 10 секунд и у пользователя складывается впечатление, что он зависит от милости компьютера, что его очень раздражает. За 10 секунд вы определенно потеряете внимание пользователя.

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

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

Я подготовила список из 10 инструментов. О двух самых интересных вы узнаете в конце статьи, так что дочитайте до конца.

1. tools.pingdom.com

Указываете название блога и нажимаете «Test Now». Получаете результат. Лучше проверить несколько раз, так как результат каждый раз будет отличаться, и вывести среднее арифметическое.

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

2. www.seomastering.com/site-speed-checker.php

Указываете домен и жмете «Continue». Данный сервис позволяет проверять одновременно до 10 сайтов.

3. www.pr-cy.ru/speed_test

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

4. cloudmonitor.ca.com/en/checkit.php

Можно проверять скорость ресурса  5 раз в день.

5. host-tracker.com 

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

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

7. Page Speed Insights

Скорость загрузки вы также можете проверить с помощью Инструментов вебмастеров от Google. Выбираете раздел «Лаборатория» — «Эффективность  сайта» -«Page Speed Insights»:

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

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

8. gtmetrix.com

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

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

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

9. Плагин Page Speed

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

Расширение Page Speed существует и для Google Chrome, и для Firefox, но я рекомендую использовать его в последнем браузере. В Chrome  данное разрешение у меня выдает подсказки, но вот количество баллов не показывается.

О том, как установить данный плагин в Firefox и как проверить скорость загрузки сайта смотрите в видео уроке:

 

 

Как вы видите, различные сервисы дают совершенно разные результаты: от долей секунды до нескольких секунд, поэтому и проверять стоит несколькими инструментами. У меня наибольшее доверие вызывает Page Speed. А какой сервис предпочитаете вы?

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

denbriz.ru

новые знания о скорости загрузки сайта

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

Оптимизатор и автор блога Backlinko Брайан Дин с командой часто проводят исследования на больших объемах выборки. К примеру, в блоге PR-CY есть перевод исследования 912 миллионов статей с важными выводами о контент-маркетинге.

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

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

Как проводили исследование

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

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

Кратко о самых интересных выводах

1. Скорость загрузки
   Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на мобильном. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на смартфоне.
2. TTFB
   Использование CDN коррелировало с улучшением показателей скорости загрузки TTFB. Для десктопных результатов на показатель TTFB сильнее влияют CDN, а для мобильных — количество запросов HTML.
3. Фреймворки
   Самыми быстрыми JavaScript-фреймворками для средних по размеру страниц оказались Wink и Gatsby.
4. Сжатие файлов
   Более высокая производительность у страниц с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера.
5. Сжатие изображений
   Лучший результат по ускорению загрузки дали адаптивные изображения. Еще очень эффективным оказалось сжатие gzip — и для десктопа,и для мобильной выдачи. Использование формата WebP для ускорения загрузки картинок работает хуже.
6. CMS
   При сравнении мобильных страниц на разных CMS лучшие показатели у сайтов на движках Squarespace и Weebly, худшие у Wix и WordPress.

Разберем выводы подробнее с таблицами.

Общая скорость загрузки

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

Исследователи определили среднюю скорость для этих показателей:

• TTFB — время до загрузки первого байта HTML-документа.
• StartRender — начало рендеринга страницы.
• Visual Complete — время, за которое пользователь начинает видеть весь контент страницы.
• Индекс скорости — как быстро пользователь видит загрузку страницы.
• onLoad — время, за которое загружаются все ресурсы страницы (CSS, изображения и т. д.).
• Полная загрузка — время, за которое страница полностью загружается в браузере пользователя.

Показатель/Средняя скорость	Десктоп, секунды	Мобильный, секунды
TTFB	1,286	2,594
StartRender	2,834	6,709
Visual Complete	8,225	21,608
Индекс скорости	4,782	11,455
onLoad	8,875	23,608
Полная загрузка	10,3	27,3

В итоге средняя скорость загрузки страницы составляет около 10,3 секунд на десктопе и 27,3 секунды на смартфоне. В среднем мобильные страницы загружаются на 87,84% дольше, чем десктопные.

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

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

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

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

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

В десктопной выдаче:

И в мобильной:

Как это могло произойти?

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

Исследователи проанализировали производительность 18 лучших поставщиков CDN и нашли большую разницу в производительности — лучший из найденных CDN работал в 3,6 раза эффективнее, чем худший вариант.

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

Результаты по десктопу

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CacheFly, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: CDN77.

Плохо: Akamai, ArvanCloud, Cloudflare, Fireblade, Incapsula, Sucuri.

Результаты по мобильной выдаче

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CDN77, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: Fireblade, Incapsula, Sucuri.

Плохо: Akamai, ArvanCloud, Cloudflare.

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

---

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

Какие фреймворки самые быстрые

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

Сначала они изучили, как часто программисты использовали платформы из выборки:

Самым популярным по использованию JS-фреймворком оказался React — его используют 25,3% сайтов. Еще популярны TweenMax (10,3%) и RequireJS (9,5%).

Затем исследователи хотели выяснить, какие фреймворки JavaScript связаны с показателем FCP (First Contentful Paint) — временем, когда пользователь начинает видеть отрисованный полезный контент на странице. Результаты разделили по размеру страниц: маленькие (<1,264,374 байт), средние (1,264,374 и 4,019,332 байт) и большие (> 4,019,332 байт).

Для небольших страниц RightJS вышел на первое место:

Для средних по размеру страниц лучшие результаты показали Wink и Gatsby:

Самое быстрое время FCP на больших страницах было у страниц с Gatsby и Riot:

Выбор фреймворка JavaScript может значительно повлиять на время загрузки FCP. Для страниц среднего размера JS-фреймворк Wink, который оказался лучшим, загружается на 213% быстрее, чем самый медленный фреймворк Meteor.

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

---

Скорее всего не существует «лучшего» JavaScript-фреймворка для любой страницы. Для сайтов с небольшими страницами RightJS показал себя лучшим, для сайтов с большими страницами подойдет Gatsby.

Как сжатие файлов влияет на скорость

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

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

• быстро: 0-1000 мс;
• средне: 1000 мс — 2500 мс;
• медленно: <2500 мс.

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

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

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

Большие страницы тоже показали такой результат:

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

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

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

---

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

Какое сжатие изображений эффективнее ускоряет загрузку

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

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

• WebP
  Некоторые сайты уже используют новый формат WebP, который разработал Google. Изображения в таком формате при сохранении качества могут весить значительно меньше картинок в другом формате.
  Как использовать WebP для оптимизации картинок на сайте
• Оптимизированные изображения
  Под такими изображениями исследователи подразумевают разные версии картинок, которые появляются в зависимости от устройства пользователя. В эту категорию они включили использование CDN, сжатие и другие службы оптимизации изображений.
• Отложенная загрузка изображений
  Lazy loading или «ленивая загрузка» — изображения на следующем скролле страницы загружаются по мере надобности, когда пользователь прокручивает до этого скролла.
• Адаптивные изображения
  Картинки, которые динамически адаптируются под размер окна браузера.

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

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

---

Формат WebP перспективнее PNG и JPEG по сжатию при сохранении качества, но пока очень немногие сайты внедрили этот новый формат изображений.

Сайты на каких CMS грузятся быстрее

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

Weebly и Squarespace выходят на первое место для десктопов.

Что касается скорости загрузки страниц на мобильных устройствах, Squarespace занимает первое место, Adobe Experience Manager и Weebly завершают топ-3. Выходит, топ-3 из анализа десктопа и мобильной выдачи одинаков, разные только лидеры.

По статистике 30% всех сайтов созданы на WordPress. Интересно, что в этом исследовании скорости загрузки WordPress занимает только 14 место по мобильной выдаче. Wix — тоже одна из самых популярных CMS и тоже занимает далеко не первые места в таблице по скорости загрузки на мобильном и десктопе.

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

Почитать по теме:
Какую CMS выбрать? Чек-лист для начинающих
Как выбрать CMS для интернет-магазина

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

---

По данным исследования, самые быстрые страницы из десктопной и мобильной выдачи были на Weebly, Squarespace и Adobe Experience Manager.

Итак, с высокой скоростью загрузки TTFB коррелировало использование CDN на десктопе и количество запросов HTML на мобильных устройствах. Высокую скорость загрузки показывали страницы с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера. Сжатие gzip — самое эффективное для обоих видов выдачи. В оптимизации картинок лучший результат дали адаптивные изображения. Использование формата WebP для ускорения загрузки картинок работает хуже.

---

Эти и другие выводы в оригинале исследования Backlinko

pr-cy.ru

Оптимизация на Page-speed.ru: показатель google pagespeed insights

Правда о важности оценки Google PageSpeed

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

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

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

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

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

•   При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
•   От 1 до 5 секунд до 90%
•   От 1 до 10 секунд вероятность отказа уже 123%
• Не трудно догадаться, какое количество посетителей мы теряем.

Скорость страниц будет важным фактором для ранжирования

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

А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.

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

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

Несколько советов по увеличению скорости загрузки

•  1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
•  2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
•  3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
•  4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
•  5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.

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

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

page-speed.ru

Как узнать скорость загрузки сайта: анализ, оценка, оптимизация

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

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

Google Analytics

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

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

Какие же действия необходимо выполнить для использования функционала Google Analytics?

1. Необходимо завести аккаунт Google и авторизоваться в системе.
2. Перейти по адресу www.analytics.google.com.
3. Создать учетную запись для сайта, если ее нет.
4. Выбрать соответствующее представление.

Интерфейс Google Analytics

5. Во вкладке “Отчеты” кликнуть по пункту “Поведение”.

Вкладка “Отчеты”, пункт “Поведение” в Google Analytics

6. Жмем по ссылке “Скорость загрузки сайта”.

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

Подпункт “Время загрузки страниц в Google” Analytics

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

Дополнительные параметры подпункта “Время загрузки страниц”

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

Подпункт “Ускорение загрузки” в Google Analytics

Для новичков в Google Analytics присутствует подробное руководство по работе с ресурсом с удобным и функциональным поиском по ключевым словам.

Поиск по ключевым словам в Google Analytics

PageSpeed Insights

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

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

PageSpeed Insights отображает следующие результаты:

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

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

Результат отображается с помощью индикаторов, которые представлены в трех цветах:

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

Проверить реакцию любой интернет-страницы можно, перейдя по ссылке www.developers.google.com/speed/pagespeed/insights/. В строку поиска вставляем интересующий URL и жмем “Анализировать”.

Анализ быстродействия сайта посредством PageSpeed Insights

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

Результаты анализа сайта по PageSpeed Insights

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

Консоль разработчика Google Chrome

Проверить скорость загрузки сайта можно также при помощи браузера Google Chrome и консоли отладчика. Для того чтобы выполнить проверку, зайдите на интересующий вас сайт и нажмите клавишу F12. После этого откроется окно разработчика – перейдите на вкладку “Network” и обновите страницу с помощью нажатия клавиши F5. По мере загрузки страницы можно будет увидеть перечень прогружаемых файлов (изображений, скриптов и т.п.), а также количество времени, которое потребовалось на загрузку того или иного элемента.

Анализ скорости сайта с помощью консоли разработчика Google Chrome

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

GTmetrix

С помощью зарубежного сайта GTmetrix можно проанализировать скорость страниц через Google PageSpeed и YSlow. Для проверки используется единый сервер, расположенный в Ванкувере. Эксплуатация ресурса аналогична: вставляем адрес и жмем “Analyze”.

Интерфейс сервиса GTmetrix

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

Результаты проверки сайта посредством GTmetrix

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

Для продвинутых пользователей пригодится вкладка “Waterfall”, на которой отображаются все файлы, найденные на странице и скорость их загрузки. Интерфейс вкладки весьма похож на интерфейс консоли разработчика в Google Chrome или инструмент Firebug Net Panel для Mozilla Firefox.

Кнопка “Download PDF” скачает на ПК отчет по сайту в формате PDF. Результаты тестирования можно сохранить, что дает возможность сравнить их с итогами тестов после внедрения исправлений.

WebPage Analyzer

Процесс проверки с помощью WebPage Analyzer является практически аналогичным предыдущим онлайн-сервисам – вставляем URL-адрес веб-ресурса и жмем кнопку “Отправить”:

Интерфейс онлайн-сервиса WebPage Analyzer

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

Статистика сайта по WebPage Analyzer

Исходя из этого скрипт предоставляет объекты страницы и их параметры, а также содержит поле комментариев:

Объекты проверяемой страницы – WebPage Analyzer

После данной таблицы находятся подробные характеристики и рекомендации по исправлению ошибок:

Рекомендации по оптимизации файлов страницы WebPage Analyzer

Pingdom

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

Открываем адрес https://tools.pingdom.com/, вставляем ссылку на интересующий сайт, определяемся с сервером и кликаем “Start test”.

Интерфейс онлайн-сервиса Pingdom

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

Показатели скорости загрузки сайта – Pingdom

Ниже в сводной таблице проверки отображаются данные по каждому запросу к серверу (java-скрипты, различные стили, медиафайлы и т. п.).

Перечень объектов страницы и время их загрузки – Pingdom

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

WebPagetest

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

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

Что же необходимо, чтобы проверить скорость ответа сайта?

1. Для быстрой проверки кликаем по ссылке http://www.webpagetest.org и активируем вкладку “Simple Testing”.
2. Вставляем адрес ресурса в текстовую форму, указываем скорость соединения (мобильный интернет, 3G, высокоскоростное подключение) и жмем “Start test”.

Интерфейс онлайн-инструмента WebPagetest

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

Результаты проверки сайта с помощью WebPagetest

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

Load Impact

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

Вставляем адрес ресурса и кликаем “Run free test”:

Load Impact – интерфейс сервиса

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

Результирующий график проверки нагрузки на сайт

WhichLoadFaster

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

Проверка сайтов через сервис WhichLoadFaster

После вставки ссылок на интересующие ресурсы и щелчка по пиктограмме “GO” начнется загрузка сайтов, а результаты проверки будут в реальном времени визуализироваться на экране, разделенном надвое:

Сравнение сайтов с помощью WhichLoadFaster

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

Анализ каждого из двух сайтов отдельно – WhichLoadFaster

Анализирует посещение URL с серверов, расположенных по всему земному шару, показывая информацию о каждом соединении. Алгоритм проверки выглядит аналогично другим похожим сервисам – необходимо просто вставить URL и нажать кнопку “Start test”:

Интерфейс инструмента Monitis Tools

Это один из немногих сервисов, разгружающих себя от роботов благодаря использованию сервиса капчи для запуска теста. По окончанию проверки на экране отобразится отчет, где красным цветом на временной линии отображаются файлы, отрицательно влияющие на показатель скорости загрузки сайта. Испытать сервис можно по ссылке: http://www.monitis.com/pageload/.

Результаты проверки сайта через Monitis Tools

Проверка осуществляется с помощью трех различных местоположений серверов – США (United States), Европа (Europe), Азия (Asia/Pacific).

PR-CY

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

Вставляем ссылку в форму по URL http://pr-cy.ru/speed_test/ и кликаем “Анализировать”.

Анализ веб-сайта с помощью PR-CY

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

Перечень ошибок и рекомендации по исправлению – PR-CY

Seo28

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

Проверка сайта посредством онлайн-инструмента Seo28

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

Выводы

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

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

Автор статьи:

Олег Скрып

Руководитель компании ApollonGuru, ментор SEO-материалов vc.ru. В интернет-маркетинге с 2012 года. Люблю чтобы все было четко.

Будем признательны за каждый лайк:

« Older Article

apollon.guru

No related posts.