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

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

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

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

Даже сейчас, когда скорость интернета у большинства провайдеров превышает 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

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

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

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

Чем быстрее, тем лучше. Но в среднем, 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

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

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

Содержание:

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

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

Сервер

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

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

Размер и код страницы

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

Файлы мультимедиа

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

Вложенные таблицы желательно убрать или же прописать ее высоту и ширину, ширину столбцов.

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

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

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

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

Сервис Mainspy

Ссылка на страницу проверки: http://mainspy.ru/skorost_zagruzki_sajta

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

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

Проверка на Seogadget

Ссылка на страницу проверки: http://www.seogadget.ru/sitespeed

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

Сервис pr-cy.ru

Ссылка на страницу проверки: http://pr-cy.ru/speed_test/

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

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

Зарубежный сервис gtmetrix.com

Ссылка на страницу проверки: https://gtmetrix.com/

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

Сервис от Google

Ссылка на страницу проверки: https://developers.google.com/speed/pagespeed/insights/?hl=ru

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

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

С уважением, Евгений Кузьменко.

ekuzmenko.ru

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

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

Насколько быстрой должна быть скорость загрузки сайта?

• 1 секунда – великолепно.
• 2-3 секунды – очень хорошо.
• 4-7 секунд – нормально, но есть куда расти.
• 8-10 секунд – плохо.
• 11 секунд и более – ужасно, начинайте бить тревогу, т.к. огромные деньги утекают прямо из-под вашего носа.

Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

• 57% посетителей покидают страницу, которая грузится более 3-х секунд.
• В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
• 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
• Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
• 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

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

Чем быстрей загружается сайт, тем лучше конверсия

Чтобы убедиться в этом, изучите следующие результаты исследований:

• Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
• Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
• Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
• 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

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

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

Итак, что же можно сделать, чтобы ускорить загрузку сайта:

1. Уменьшите размер страниц сайта

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

Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

2. Снизьте «вес» графики

Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

• Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
• Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
• Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
• Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

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

3. Упростите код JavaScript и CSS

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

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

4. Уменьшите число запросов браузера

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

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

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

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

• Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
• Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

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

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

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

Используя CDN, вы автоматически изменяете URL ваших фото, CSS- и JavaScript-файлов с http://moisait.com/moefoto.png на http://aaa.cloudnfront.net/moefoto.png. Когда пользователь заходит на ваш сайт, CDN загружает его «тяжелые» элементы со своего сервера, физически расположенного ближе всего к посетителю.

Использованные материалы: 11 Low-Hanging Fruits for Increasing Website Speed (and Conversions), How to speed up your website load times и How to Improve Your Conversion Rates with a Faster Website..

kak-uvelichit-skorost-zagruzki-sayta

texterra.ru

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

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

Насколько быстрой должна быть скорость загрузки сайта?

• 1 секунда – великолепно.
• 2-3 секунды – очень хорошо.
• 4-7 секунд – нормально, но есть куда расти.
• 8-10 секунд – плохо.
• 11 секунд и более – ужасно, начинайте бить тревогу, т.к. огромные деньги утекают прямо из-под вашего носа.

Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

• 57% посетителей покидают страницу, которая грузится более 3-х секунд.
• В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
• 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
• Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
• 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

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

Чем быстрей загружается сайт, тем лучше конверсия

Чтобы убедиться в этом, изучите следующие результаты исследований:

• Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
• Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
• Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
• 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

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

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

Итак, что же можно сделать, чтобы ускорить загрузку сайта:

1. Уменьшите размер страниц сайта

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

Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

2. Снизьте «вес» графики

Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

• Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
• Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
• Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
• Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

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

3. Упростите код JavaScript и CSS

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

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

4. Уменьшите число запросов браузера

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

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

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

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

• Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
• Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

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

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

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

Используя CDN, вы автоматически изменяете URL ваших фото, CSS- и JavaScript-файлов с http://moisait.com/moefoto.png на http://aaa.cloudnfront.net/moefoto.png. Когда пользователь заходит на ваш сайт, CDN загружает его «тяжелые» элементы со своего сервера, физически расположенного ближе всего к посетителю.

Использованные материалы: 11 Low-Hanging Fruits for Increasing Website Speed (and Conversions), How to speed up your website load times и How to Improve Your Conversion Rates with a Faster Website..

kak-uvelichit-skorost-zagruzki-sayta

srv01.texterra.ru

проверяем скорость и оптимизируем процесс

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

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

Каково новое значение среднего времени загрузки страницы?

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

Сколько ресурсов загружается на стандартной странице?

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

В этом году особое внимание уделяется мобильным пользователям

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

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

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

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

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

Каково среднее время загрузки?

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

Выберите свою отрасль и местоположение и установите стандартное время загрузки для них, чтобы узнать, следует ли вам оптимизировать скорость своего веб-сайта. Хотя среднее значение в таблице составляет 8,66 с, рекомендация на 2018 год — менее 3 секунд.

Какой средний размер веб-страницы?

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

Выберите свою отрасль и местоположение и найдите стандартный размер страницы для них, чтобы установить, следует ли вам оптимизировать размеры файлов на вашем сайте. Хотя среднее значение в таблице составляет 1,88 МБ, рекомендация на 2018 год — менее 500 КБ.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Каково среднее количество загружаемых ресурсов?

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

Выберите свою отрасль и местоположение и найдите для них стандартное количество запросов, чтобы выяснить, нужно ли вам устранить или объединить ресурсы на своих страницах. В то время как среднее значение в таблице составляет 115,6, рекомендация на 2018 год — менее 50.

Какова средняя задержка сервера?

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

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

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

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

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

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

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

Pingdom: простой инструмент, который производит те же измерения, но метод тестирования недокументирован.

GTmetrix: дает вам полезную информацию о наилучшем способе оптимизации скорости веб-страниц.

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

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

MachMetrics: профессиональный мониторинг скорости сайта – дает возможность запланировать тесты URL-адресов из разных географических точек и с разных устройств и предоставляет обобщенные данные.

SpeedCurve: контроль производительности front-end.

Добейтесь показателей лучше отраслевого стандарта

Если вы знаете, что ваши показатели лучше, чем рекомендованные для вашей отрасли на 2018 год, значит вы лучше, чем большинство ваших конкурентов. И все мы знаем, что это очень важно — одна секунда задержки во время загрузки веб-страницы влечет за собой 7% -ное сокращение конверсий, 11%-ное сокращение количества просмотренных страниц и 16%-ное снижение удовлетворенности клиентов.

Я знаю, к чему мне стремиться в 2018 году — к более быстрому сайту веб-сайт!

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

webformyself.com

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

Ещё в апреле 2010 г. Компания Google объявила, что фактором ранжирования теперь считается и время загрузки страниц веб-сайта.
Спустя два года и «Яндекс» официально признал, что учитывает этот показатель, в систему веб-аналитики «Яндекс.Метрика» были добавлены и инструменты по анализу.

Почему это важно?

• Во-первых, скорость влияет на показатели конверсии и на уровень отказов. Медленный сайт  снижает конверсию, и если ниша более-менее конкурентна, пользователь уходит к другому поставщику услуг/товаров. Отношение количества полезных целевых действий к трафику снижается.
• Во-вторых, поисковые системы (ПС) напрямую заинтересованы в позитивном user experience аудитории. Поисковые результаты (SERP) хотят решать задачу пользователя полно, достоверно и быстро. Сама SERP-страница формируется «на лету» из индекса ПС, задержка пользовательского запроса, которые вносит площадка, фиксируется и обрабатывается.

ПС стараются не пускать в топ «нерасторопные» сайты в интересах пользователя, который не хочет (и не должен) ждать.

За последние 5 лет средний размер веб-страниц вырос втрое, а за последний год – в полтора раза. Характерное время ожидания составляет 4 секунды. Если за это время сайт загружается у 90 % пользователей, вы счастливый владелец быстрого интернет-ресурса.
Основное время при загрузке страниц сайта уходит на клиентскую часть. Серверные затраты малы, 50 — 500 мс. Среднему пользователю всё равно, сколько страница будет создаваться на сервере, если работать с ней можно уже через полсекунды. В этом случае фокус смещается  на клиентскую, а не серверную оптимизацию.

Под скоростью загрузки страницы понимают совокупность параметров:

• Время до отрисовки – от начала перехода на страницу до начала прорисовки на экране.
• Время до загрузки DOM – от начала перехода на страницу до загрузки DOM и окончания обработки события onLoad.

DOM – это объектная модель документа (Document Object Model), структура, используемая браузером для представления данных. Проще говоря, это время от начала перехода на страницу до полной загрузки страницы со всеми её компонентами (тексты, таблицы, изображения, CSS, скрипты и т. п.). Значение субъективно воспринимается посетителем как «качество» или «скорость» страницы.
Оценить эти показатели можно в стандартном отчёте «Яндекс.Метрики» – «Время загрузки страниц»

Время до отрисовки и время до загрузки DOM в отчёте «Яндекс.Метрики»

«Время до отрисовки» характеризует хостинговую составляющую и скорость обработки DNS-запроса.
«Время до загрузки DOM» — качество веб-проекта: совместимость сайта с браузерами, скорость работы сайта на стороне браузера, размер загружаемых объектов, объём и качество кода. Если сайт собран на «студийной» CMS сайт не тестировался на полную совместимость с наиболее распространёнными браузерами, не удивляйтесь, если он начнет «прорисовываться» некорректно и с задержками.
Чтобы определить недостаточно оптимизированные с точки зрения скорости загрузки страницы сайта, нужно в фильтре колонки «Время до загрузки DOM» установить условие «Показать страницы с временем загрузки более 4 секунд».

Скорость загрузки страниц сайта. Определение «самых задумчивых» страниц сайта в отчёте «Яндекс.Метрики».

Аналогичный функционал заложен и в сервисе Google PageSpeed Insights для разработчиков.

Google PageSpeed Insights

Существует ряд независимых от ПС сервисов, измеряющих скорость загрузки:

• https://tools.pingdom.com/ – оценивает скорость, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно показывает данные по каждому запросу к серверу (стили, скрипты, изображения и др). Это позволяет выявить причину долгой загрузки.
• http://www.webpagetest.org/ – комплексно тестирует скорость проекта, варьируя локацию клиента (континент, страна), тип устройства (десктоп, мобайл, операционная система), браузер и способ подключения к серверу. Позволяет осуществлять сравнение скорости проектов – конкурентов в нише.
• http://whichloadsfaster.co/ – даёт возможность загружать два сайта для сравнения (свой и конкурента), а затем визуально наблюдать, какой проект загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
• http://pr-cy.ru/speed_test/ – пакетная проверка скорости до 10 адресов URL. Сравнивается время загрузки и размер index-документа для каждого из ресурсов. Входит в состав пакета инструментов для веб-мастеров.
• http://sitespeed.me/ru/ – посылает запросы к анализируемому документу на сайте от 30 серверов, расположенных на значительном расстоянии, и определяет скорость доступа для каждого из них. Подсвечивает лучшие, худшие и средние показатели по скорости доступа

Мы рекомендуем для анализа скорости загрузки сайта и дальнейшей оптимизации использовать встроенные в системы веб-аналитики «Яндекс» и Google-отчёты.

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

Итак, аудит проведён, запаздывающие документы выявлены. Что дальше: как увеличить скорость загрузки сайта?
Приступаем к выполнению чётко регламентированного алгоритма действий, который включает следующие этапы:

• Уменьшение размера загружаемых объектов

Минимизация кода происходит за счёт удаления избыточных пробелов, табуляций, переносов строк, комментариев, дублирующегося кода. Минимизация применима к коду HTML, CSS и JS и, в зависимости от размера и содержимого кода, достигает результатов, близких к gzip-сжатию – уменьшать файлы до 20–30 % от исходного размера. При использовании ещё и gzip-сжатия предварительная минимизация увеличивает степень сжатия в среднем на 3–5 %. Используя gzip-сжатие, важно убедиться в том, что процедура отключена для изображений и других двоичных файлов. Поскольку эти файлы уже сжаты, а их размер существенно превышает размеры типичных текстовых файлов, применение gzip-сжатия не принесёт никакого выигрыша в клиентском быстродействии веб-страниц, зато увеличит нагрузку на сервер.

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

За счёт использования подходящих графических форматов и сжатия без потерь суммарный объём страницы уменьшается до 50 % и более. Изображения, полученные с фотоаппаратов или сохраненные в некоторых графических редакторах, содержат массу дополнительной информации (метаданные, избыточная цветовая палитра и пр.). Существует несколько графических форматов, поддерживаемых  современными браузерами: PNG-8, PNG-24, JPEG, GIF. Каждый из них позволяет получить значительный выигрыш в размере. Вот наглядный пример, где видна проведённая оптимизация графики средствами Adobe Photoshop без потери качества, позволившая в 4,5 раза сократить исходный объём файла с 904 до 203 кБайт:

Результаты оптимизации графики для web

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

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

Единственным кросс-браузерным форматом, который отображает анимацию в изображениях, является GIF. Хотя уже в ближайшем будущем ему составит конкуренцию развивающийся APNG.

Устранение избыточного кода

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

Устранение встроенного в разметку кода

Суммарный объём кода можно также сократить за счёт устранения встроенного на веб-странице CSS и JS- кода. Множество атрибутов style=”” в HTML-тегах можно заменить за счёт использования классов единственным, общим для всех элементом – селектором, а множество javascript-обработчиков (например, обработчиков onclick=””, onmouseover=”” и др.) – одним единственным обработчиком. Изменить вёрстку и JavaScript (логику) в подобных ситуациях, как правило, не сложно.

• Неиспользуемый код

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

• Устранение фреймов

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

1. Объединение файлов CSS

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

1. Объединение файлов JavaScript

На странице часто подключается несколько файлов JavaScript. Уменьшив их количество, можно увеличить итоговую скорость загрузки страниц. Код JS объединяется в одном файле, загруженном и кэшированном единожды. Это решение сработает, если кода JavaScript на сайте немного (до 100 килобайт в сжатом виде). В ситуации, когда сайт представляет собой сложное веб-приложение и объем кода превышает 100–150 килобайт в сжатом виде, у объединения всего кода в одном файле будет отрицательная сторона: при запросе первой страницы пользователь будет загружать часть кода, которую мог бы не загружать вовсе.

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

• Для оптимизации страниц применяется плагин Optimize DB из пакета Yoast. Он позволит уменьшить размер таблиц mySQL и оптимизировать их структуру.
• Для кэширования запросов к базе данных — WP Super Cache от Automattic.

Направление кэширования востребовано среди разработчиков плагинов для WordPress. Достаточно ввести запрос «Cache» в разделе «Плагины» —> «Добавить новый», и вашему вниманию предстанет выдача из 3323 виджетов. Есть из чего выбрать!

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

Если сайт не адаптирован к мобильным устройствам, то успех SEO-продвижения сомнителен!

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

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

ivnz.ru