А как быстро работает ваш блог?

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

 

Как определить скорость загрузки страницы?
  Есть несколько способов определить скорость загрузки страниц на вашем блоге (или другом сайте).

  1. Использовать встроенные отладчики браузеров.

  В общем-то, у всех современных браузеров есть инструменты для анализа и отладки страниц, и все они имеют схожий функционал.
Я предпочитаю использовать Chrome. Для вызова отладчика в Chrome, заходим на тестируемую страницу и нажимаем F12. Для теста скорости загрузки страницы нам нужна будет вкладка "Network".
Далее для чистоты эксперимента загрузим страницу в обход кэша браузера. Для этого обновим страницу комбинацией клавиш ctrl+F5. Ждём, пока загрузиться страница, и в таблице внизу будет показан объём загруженных данных и время, затраченное на полную загрузку страницы.  После можно проанализировать каждый в отдельности элемент станицы и выявить, что тормозит загрузку, если результаты теста вас не удовлетворили.
 

2. Второй способ: использовать сервис webpagetest

 

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

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

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

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

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

Изображения. Первое, на что следует обратить внимание, это изображения. Зачастую мы их загружаем как есть, только изменяя размер. Да ещё и на страницу размещаем полноразмерную фотографию, уменьшая её только с помощью html. В итоге загрузка изображений занимает чуть ли не 50% от общего времени.
 

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

Если вы работаете в photoshop, то там есть очень хорошая функция "Сохранить для WEB". Выбираем в меню «Файл» -> «Сохранить для Web…» (Save for Web…) или комбинация клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно.

  1. Формат: лучше всего сохранять изображения в JPEG. 
  2. Качество: от 75% до 95%
  3. Устанавливаем, если надо, необходимые размеры картинки. 

В Linux есть отличная команда по массовому изменению размеров изображений в папке. Консольная команда imagemagick:
  1. все изображения по горизонтали сделать 800px: mogrify -resize 800 *.jpg
  2. 800px, причем только для тех картинок, которые больше 800px: mogrify -resize 800\> *.jpg
  3. изменить по высоте и выставить всем высоту 800px: mogrify -resize x800 *.jpg
Как оптимизировать скрипты на сайте?
Современные web-дизайны сайтов уже нельзя представить без использования javascript. Почти везде присутствуют те или иные библиотеки. Наиболее часто используется jquery. В данном случае надо постараться по возможности использовать для подгрузки скриптов популярные сети доставки контента или СDN. Что такое CDN:

 

Сеть доставки (и дистрибуции) контента (англ. Content Delivery Network или Content Distribution Network, CDN) — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию контента конечным пользователям в сети Интернет. Использование контент-провайдерами CDN способствует увеличению скорости загрузки интернет-пользователями аудио-, видео-, программного, игрового и других видов цифрового контента в точках присутствия сети CDN. На скорость загрузки веб-страницы и её содержимого сильно влияет то, насколько далеко пользователь находится от сервера. Это происходит из-за того, что при использовании технологии TCP/IP, применяемой для распространения информации в сети Интернет, задержки при передаче информации зависят от количества маршрутизаторов, находящихся на пути между источником и потребителем контента. Размещение контента между несколькими серверами средствами CDN сокращает сетевой маршрут передачи данных и делает загрузку сайта быстрее с точки зрения пользователя.

 

Основные CDN для загрузки различных скриптов:

Хорошая статья про CND есть на хабре: http://habrahabr.ru/post/109309/
Так можно почти все библиотеки скриптов загружать с CDN.
 

Что делать со скриптами, которых нет в сетях доставки?

Ответ прост - оптимизировать сами скрипты. Если у вас нет необходимых навыков для этого, предлагаю использовать умы других людей, которые придумали штуку, под названием Minify. Библиотека minify существует как отдельно, так и в виде плагина для WordPress. Minify минимизирует, объединяет и кэширует JavaScript-файлы, а также CSS файлы.

Для тех, кто вообще не хочет разбираться в этом, есть хороший сервис CloudFlare, причём данным сервисом можно пользоваться бесплатно! В общем-то, для многих это будет отличным решением. Ознакомиться на русском с CloudFlare, можно тут: https://ru.cloudflare.com/overview

А как вы оптимизируете скорость загрузки ваших страниц?

02 августа 2013, 17:21 | Semen Lobachevskiy

  • 522

Комментарии (1)

  1. Александр 24 ноября 2014, 00:16 # 0
    Спасибо за ссылку на проверку сайта, пошел свой блог проверять