Оставить комментарий
В статье рассказывается:
- Почему так важна проверка скорости загрузки сайта
- Проверка скорости в Яндекс и Google
- 12 инструментов для проверки скорости загрузки сайта
- Что делать, если вас не удовлетворили результаты проверки
Скорость загрузки сайта в данный момент является очень важным параметром для поисковиков. Да и для непосредственно юзеров этот показатель также очень весом. Согласитесь, нельзя не обратить внимания на низкую скорость загрузки.
Когда вы повышаете скорость своего ресурса, то не только обеспечиваете ему более эффективное продвижение в поисковых системах, но и получаете больше доверия, то есть, увеличиваете конверсию. В данной статье мы расскажем, как ведется проверка скорости загрузки сайта, и из каких этапов состоит данный процесс.
Почему так важна проверка скорости загрузки сайта
Проверка скорости загрузки сайта важна по многим причинам. Данные статистики свидетельствуют о том, что 53% юзеров покидают ресурс, если длительность загрузки страниц превышает 3 секунды. Из-за всего лишь двухсекундной задержки конверсия страницы снижается на 37%.
Источник: shutterstock.com
Итак, потенциальные клиенты переходят к конкурирующим сайтам, прежде всего, из-за недостаточно быстрой загрузки ресурса. Положение при этом не способны исправить ни приятный и понятный пользовательский интерфейс, ни четкая и красивая графика на сайте. Все это пользователь просто не успевает оценить из-за медленной загрузки. А вы, в результате, упускаете потенциальную прибыль. Это – первая причина, по которой проверка скорости загрузки сайта в секундах должна проводиться тщательно и регулярно.
Для чего и каким образом необходимо вести проверку скорости загрузки сайта, и как улучшать показатели? Сначала приведем ряд аргументов в пользу важности данного параметра.
-
Высокая скорость загрузки сайта обеспечивает хороший приток посетителей на ресурс, что, соответственно, повышает вашу прибыль. Специалисты компании Financial Times провели эксперимент, темой которого стала проверка скорости загрузки страницы сайта. Одна часть участников фокус-группы знакомилась со статьями на сайте в стандартном режиме, а другая – с задержкой в 1-5 секунд. Чем больше времени занимало открытие страницы, тем короче оказывалась сессия. В итоге длительная загрузка страницы привела к отказу пользователей оформить платную подписку на новые материалы сайта. Кроме того, посетители ознакомились с меньшим количеством рекламных материалов. Отметим, что именно эти источники дохода были для газеты основными.
-
Высокая скорость загрузки сайта способствует увеличению конверсии. Согласно результатам исследования онлайн-продаж от Akamai Technologies, скорость загрузки страниц с более высокими показателями конверсии, в среднем, на 26% быстрее. Конечно, для улучшения конверсии не только работают над ускорением загрузки страницы. Но когда вы теряете в скоростных показателях, то тоже упускаете посетителей, способных стать вашими клиентами и принести доход.
Вы все еще сомневаетесь в том, что скорость загрузки сайта напрямую не влияет на вашу прибыль?
Проверка скорости загрузки сайта онлайн должна осуществляться на постоянной основе. Выявленные в ходе проверки показатели следует постоянно улучшать. Если вы будете вести эту работу, то существенно увеличите уровень продаж, и, соответственно, свой доход.
На что, помимо объема продаж, влияет скорость загрузки сайта? На место ресурса в поисковых системах. Согласно данным официального блога Google, менее 1% ранжируются по скорости показа сайта, так что данный показатель не является основным. Однако и Google, и Яндекс способны проводить проверки скорости загрузки ресурса.
Следует помнить, что поисковые системы снижают позиции менее полезных сайтов. К таковым поисковики относят ресурсы, у которых высокий процент отказов, низкая глубина просмотров и т. д. Проверка скорости загрузки сайта позволяет объективно оценивать ситуацию в данный момент, совершенствовать результаты и, следовательно, улучшать продвижение ресурса в поисковой системе.
Далее в статье мы приведем рекомендации по увеличению потока пользователей с Google и Яндекс.
Итоги исследования все тех же Akamai Technologies показали, что наиболее высокий уровень конверсии имеют страницы, загружающиеся за 1,8 секунды с компьютера и за 2,7 секунды с мобильной версии. При этом меньше всего отказов у страниц со скоростью загрузки в 1 секунду с компьютера и за 0,7 секунды с мобильных устройств.
Проверка скорости загрузки сайта всегда дает определенные результаты. О чем они свидетельствуют?
-
<1 секунды – идеально!
-
1-2 секунды – отлично!
-
3-5 секунд – есть к чему стремиться!
-
5-10 секунд – нужно улучшать!
-
≥10 секунд – очень плохо!
Всегда стремитесь к идеальным показателям, более быстрым, по сравнению с другими сайтами. The New York Times справедливо отмечает, что даже разница в 0,25 секунды при загрузке может сыграть решающую роль, и пользователь отдаст предпочтение именно вашему сайту.
Проверка скорости загрузки сайта в Яндекс и Google
Проверка скорости загрузки сайта часто проводится при помощи счетчика Яндекс.Метрика. В этом случае с готовым отчетом после проверки можно ознакомиться в разделе «Мониторинг» Яндекс.Метрика. Чтобы просмотреть результаты проверки, нужно просто зайти в свой аккаунт и проверить отчет «Время загрузки страниц» группы «Мониторинг».
Открытие страницы выполняется поэтапно. Каждый этап наглядно продемонстрирован. У вас есть возможность увидеть, сколько длится подключение, как долго страница загружается с сервера, сколько времени проходит между началом отрисовки страницы до полной загрузки, сколько занимает переадресация и т. д. Все эти сведения достаточно просто отфильтровать по разным браузерам:
Далее идет проверка скорости загрузки сайта Google. Для получения информации вам необходимо использовать мощный сервис проверки скорости загрузки сайта Google Analytics, раздел «Поведение» - «Скорость загрузки сайта»:
Google Analytics, в отличие от Яндекс.Метрика, выдает предложения, как повысить скорость загрузки сайта, если они есть. Для получения отчета, примерно такого, как на скриншоте ниже, вам необходимо нажать на пункт «Ускорение загрузки».
На картинке видно, что Google Analytics сразу предлагает воспользоваться своим инструментом PageSpeed. Его более подробно мы рассмотрим далее.
12 инструментов для проверки скорости загрузки сайта
Google PageSpeed Insights
Это сервис для разработчиков сайтов от Google. Проверка скорости загрузки сайта с его помощью проводится быстро и просто. Инструмент оценивает скорость загрузки вашего сайта (а точнее – оптимизации этой скорости) по шкале в 100 баллов. 100 – это недостижимый идеальный показатель. Но 80-90 баллов получить возможно, особенно с учетом того, что инструмент выдает подробные рекомендации по устранению обнаруженных ошибок.
Цвет совета определяет его важность.
Для изображений, как текст:
На скриншоте видно, что Google PageSpeed Insights дает комплексную оценку – для компьютерного браузера и для мобильного. То есть, ведется проверка скорости загрузки сайта на мобильном устройстве и на ПК.
В нижней части видна оценка удобства использования сайта с различных устройств.
Если ваш интернет-ресурс не оптимизирован под мобильные гаджеты, оценка будет очень низкой.
Pingdom
Сервис проверки скорости загрузки сайта на английском языке помогает узнать, за сколько секунд загружается ваш ресурс, сколько в целом весит тестируемая страница. Сервис проверки скорости загрузки сайта также дает свою оценку вашему ресурсу и приводит рекомендации по его улучшению.
Pingdom также проводит тщательный анализ скорости каждой отдельной составляющей сайта – сколько времени занимает получение информации о домене, соединение с сервером. Благодаря этой информации вы понимаете, почему сайт работает не так быстро, как хотелось бы, и что его тормозит.
WebPageTest
Использовать этот сервис проверки скорости загрузки сайта довольно просто. Необходимо ввести url проверяемой страницы (необязательно главной), и по истечении некоторого времени инструмент высчитает скорость загрузки всех элементов ресурса, выдав две диаграммы – одну за первый проход, другую – за второй, когда уже какие-то элементы сайта загрузятся из кэша браузера.
При изучении первой диаграммы нужно оценивать, как располагается фиолетовая вертикальная линия, означающая время завершения отрисовки сайта. Вторая вертикальная синяя линия демонстрирует время полной загрузки.
Если первая линия располагается в пределе 1-1,5 сек загрузки сайта, а вторая – менее 4 сек, это хороший показатель. В данном случае информацию следует просто принять к сведению. Если загрузка сайта занимает больше 4 сек, ситуацию нужно взять под контроль и начать исправлять недоработки.
То есть, проверка скорости загрузки сайта при помощи данного сервиса даст вам объективную картину о текущем положении дел.
Webo Pulsar
WEBO Pulsar – это инструмент, с помощью которого оценивается доступность и ведется проверка скорости загрузки сайта. Инструмент в 2010 году выпустила компания WEBO Software – лидер в области веб-производительности, мониторинга и аудита сайтов любой сложности.
Сервис проверки скорости загрузки сайта поддерживает множество протоколов и способов анализа, предоставляет функции экстренного уведомления, например, по электронной почте или SMS при появлении проблем с доступностью (если нельзя связаться с сайтом). Интерфейс сервиса прост и удобен. При помощи него вы получаете доступ к статистике проверок за нужный вам период. Следует отметить и тот факт, что проверка скорости загрузки сайта может осуществляться из любой точки мира.
SiteSpeed
Удобный инструмент, позволяющий определять доступность и скорость загрузки сайта из разных географических точек одновременно. Интерфейс прост и понятен, а количество настроек сведено к минимуму, за счет чего пользоваться сервисом легко и приятно.
Все, что вам нужно сделать, – ввести в специальную строку url проверяемого сайта и подождать, пока сервис обработает и выдаст важные сведения о скорости загрузки.
Which Loads Faster?
Сервис на английском языке, предназначенный для проверки скорости загрузки сайта. Имеет простой интерфейс. Одновременно может выполнять проверку скорости загрузки сразу двух сайтов, после чего предоставляет информацию: какой ресурс открылся быстрее, и насколько. При этом результаты анализа могут быть разными при различном подключении и даже в разных браузерах.
Which Loads Faster – очень хороший сервис проверки скорости загрузки сайта, позволяющий наглядно сравнивать свой ресурс с порталами конкурентов.
Test my Site
Сервис проверки скорости загрузки сайта от Гугла. Предназначен, в первую очередь, чтобы оценивать мобильную версию ресурса и определять, в том числе, скорость его загрузки. Имеет простой и удобный пользовательский интерфейс. В функционале – ничего лишнего. Есть возможность подписаться на рассылку изменений.
GTmetrix
Инструмент, с помощью которого проводится проверка скорости загрузки сайта. Сервис выдает много сводных данных и сохраняет историю, позволяющую сравнивать, лучше или хуже стал загружаться сайт, и насколько. Загружает советы Yahoo и Google по улучшению показателей и сортирует их по принципу приоритетности. Тестовый сервер располагается в Канаде (г. Ванкувер).
LoadImpact
Данный сервис проверки скорости загрузки сайта отличается от других тем, что он демонстрирует показатели устойчивости вашего хостинга. Он последовательно нагружает ваш сайт (имитирует ситуацию, когда на него заходят пользователи) и отслеживает скорость загрузки ресурса. В результате получается интересный график, который можно анализировать.
Monitis Tools
Мощный и эффективный инструмент, при помощи которого ведется проверка скорости загрузки сайта и его работоспособности в целом. Сервис проверки скорости загрузки сайта выдает таблицу, глядя на которую, вы понимаете, загрузка каких элементов сайта занимает больше всего времени.
Основная фишка monitis.com в том, что информация о скорости одновременно собирается из разных уголков планеты: США, Европы и Азии.
ByteCheck
Сервис проверки скорости загрузки сайта позволяет измерять значение TTFB (Time To First Byte) для вашего ресурса. На данном показателе нередко делают акцент при оптимизации. TTFB (Time To First Byte) – это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее сервер обрабатывает ресурсы, а это – негативный показатель.
PR-CY
Инструмент, благодаря которому осуществляется массовая проверка скорости загрузки сайта. Вы можете задавать до 10 адресов и, таким образом, сравнивать скорость загрузки и размер документа для каждого сайта.
Что делать, если вас не удовлетворили результаты проверки скорости загрузки сайта
Источник: shutterstock.com
Уменьшить объем страниц, которые вы загружаете на сайт
Пользуйтесь сжатием zip – файлы будут передаваться браузеру быстрее. Объем передаваемой информации сократится в 4-5 раз, а загрузка будет выполняться в кратчайшие сроки.
-
Nginx
Чтобы включить сжатие gzip в Nginx, необходимо изменить конфигурацию сервера и добавить эти строки:
server {
....
gzip on;
gzip_disable «msie6»;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}
-
Apache
Для начала следует удостовериться, что подключен модуль mod_deflate. Далее необходимо внести в файл .htaccess следующие строки:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE textcss
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать так:
gzip_comp_level 5;
Оптимальный уровень сжатия — 5.
Сократить объем графики
Избавьтесь от лишних изображений. Замените тяжелую графику текстом там, где это допустимо.
Формат jpg более всего подходит для фото, png – для других составляющих сайта (иллюстраций, иконок, при условии правильного сжатия изображений). Помните, что пользователи будут просматривать сайт через разные устройства и браузеры.
Вы можете использовать одну масштабируемую картинку, которая не займет много места на сайте и не замедлит скорость загрузки страницы. Лучше применять несколько изображений, адаптированных к разным устройствам, чтобы браузер загружал необходимое – это можно сделать с помощью плагина Imager. Он меняет плейсхолдеры на прозрачные изображения, подтягивая к каждому атрибут scr, и назначает необходимый размер. Все, что вам остается сделать – лишь загрузить изображения различных размеров в нескольких вариантах.
Как это работает:
<div style="width: 240px">
<div class="delayed-image-load" data-src="httр://placehold.it/{width}" data-alt="alternative text"> </div>
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script>
Для сжатия изображений вы можете использовать функцию сохранения веб-страниц в графических редакторах или специальные сервисы, например, PunyPNG, TinyPNG.
Уменьшить количество запросов браузера
Этот пункт связан с предыдущим. Сократить число запросов браузера вы можете разными способами, например, удалением со страницы части элементов.
Пользуйтесь CSS-спрайтами – графическими файлами, в состав которых входит сразу несколько картинок. Это наиболее удобный вариант, если мелкие изображения и иконки размещены на ресурсе в большом количестве. Вам следует объединить несколько CSS- и JS-файлов в один, чтобы сократить число HTTP-запросов.
Для просмотра количества запросов браузера в Chrome необходимо зайти в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейти во вкладку Network.
Включить кэширование данных
Выполните настройку сервера так, чтобы браузер юзера кэшировал данные. Тогда при первом посещении ресурса сохранение некоторых элементов сайта (изображений, CSS и JS-файлов) станет автоматическим. В следующий раз браузер не будет их загружать, соответственно, не потратит на это время.
Но такой метод позволяет сделать загрузку более быстрой только при повторных посещениях сайта.
Как включить кэширование?
Пользуйтесь модулем headers веб-сервера Apache, предназначенным для контроля и изменения заголовков HTTP-запросов и HTTP-ответов. Браузер осуществляет загрузку данных, редко изменяющихся, с сервера в локальный кэш, и при посещении ресурса загружает их уже из кэша. Можно также кэшировать файлы определенных видов на необходимый период, по завершении которого они будут вновь загружены с сервера.
Это можно сделать таким образом:
<FilesMatch «.(gif|jpeg|png|swf|js|css|pdf|ico)$»>
Header set Cache-Control «max-age=1234000»
</FilesMatch>
Обозначьте необходимые расширения файлов в конструкции FilesMatch, где для них будет установлен заголовок Cache-Control и переменная max-age. С помощью этой переменной будет указана продолжительность хранения файлов в секундах. Файлы, которые не нужно кэшировать, вы можете просто не включать в список.
Также есть возможность установить запрет на кэширование файлов. Для этого код, обозначенный ниже, можно добавить в .htachess, заранее указав, какие типы файлов не нужно кэшировать:
<FilesMatch «.(pl|php|cgi|fcgi|scgi)$»>
Header unset Cache-Control
</FilesMatch>
У вас также есть возможность управлять кэшированием, используя модуль expires. Он осуществляет контроль над установкой HTTP-заголовков для кэширования со стороны браузера. Обозначьте срок хранения информации с учетом времени, последнего внесения изменений в файл или времени доступа клиента.
Например, так:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault «access plus 2 month»
ExpiresByType image/png «access plus 4 months»
ExpiresByType image/swf «access plus 4 months»
</IfModule>
Или так:
ExpiresByType text/html «access plus 2 month 14 days 7 hours»
ExpiresByType image/gif «modification plus 8 hours 3 minutes»
Сократить размер кода CSS и JavaScript
При помощи специальных сервисов, упрощающих JavaScript и CSS, из кода устраняются ненужные символы (пробелы, комментарии). За счет этого код загружается быстрее. Для повышения скорости эти сервисы могут быть полезнее стандартного сжатия gzip. Google советует небольшие по размеру СSS-файлы вставлять прямо в документ HTML.
Для сокращения размера кода вы можете использовать, к примеру, сервисы CSS Drive, CSS Compressor. CSS-файлы необходимо размещать в начале страницы, а JS-файлы — в конце.
При расположении CSS-файлов в хедере рендеринг страницы становится постепенным, благодаря чему формируется благоприятное впечатление от интернет-ресурса.
Если JS-файлы размещены в нижней части страницы, браузер сначала может загружать контент, а потом разбираться со скриптами.
