Лучше ускориться: как увеличить скорость загрузки сайта
Никто не любит ждать.
Современный мир – такой быстрый. Посетители вашего сайта не будут ждать, пока он ме-едленно откроется и торжественно явит им свой феерический контент.
Они просто уйдут.
Разве это не печально?
Поисковые системы резонно относят скорость загрузки сайта к важнейшим факторам ранжирования. И это логично – тормозные сайты не должны демонстрироваться заинтересованным в хорошем продукте пользователям.
Итак, скорость загрузки сайта, которая оценивается во времени, необходимом для полного отображения контента страницы, важна для:
- Поисковых систем (потому что это фактор ранжирования)
- Живых людей (потому что медленные сайты бесят)
Дополнительные факторы, которые заставляют задуматься о скорости
Отметим также, что длительное время ответа сервера может негативно влиять на индексацию вашего сайта. У поискового бота есть определенный лимит времени на обработку каждого сайта. Если ваши страницы открываются невероятно долго, во временные рамки вы не уложитесь, а значит, рискуете остаться без внимания поисковиков.
Кроме того, скорость загрузки страниц определенно влияет на поведенческие факторы. Чем дольше грузится страница, тем выше у нее показатель отказов (тем больше людей покидают ее со всех ног). А чем выше показатель отказов, тех хуже поведенческие у всего сайта.
Потому стоит точно определить скорость загрузки вашего сайта и оценить, не нужно ли ее оптимизировать.
Как оценить скорость загрузки сайта?
Проще всего воспользоваться специальными инструментами.
На мой взгляд, оптимальной будет оценка на основе двух сервисов:
Использование максимально просто: введите адрес страницы вашего сайта и получите результат.
Сервисы покажут, насколько хороши ваши показатели, а также дадут ценные автоматические советы по ускорению веб-ресурса.
Для сравнения можно протестировать на скорость загрузки несколько ваших крупных конкурентов.
Если вы не сильно хуже, возрадуйтесь.
Отстаете? Тогда придется поработать над скоростью.
Как увеличить скорость загрузки сайта?
Разделим скорость загрузки сайта на две части.
Когда ваш сайт отвечает на запрос компьютера пользователя, он может тормозить в двух моментах.
Итак, причинами задержки может быть:
- Длительное время ответа сервера
- Очень долгое отображение контента страницы.
Первая проблема решается грамотным выбором хостинга. При выборе хостера учитывайте не только его репутацию и наличие классное техподдержки, но и адекватность выбранного тарифа размерам и посещаемости вашего сайта. Высоконагруженный сайт на самом дешевом тарифе будет падать с завидной регулярностью. И вот так же будут падать ваши позиции в поисковых системах.
Вариант два. С вашим хостингом все отлично, на страницы сайта все равно загружаются катастрофически медленно.
Что можно сделать?
Стандартными вариантами улучшения скорости загрузки являются:
- Оптимизация изображений
Тяжелые картинки вечно портят нам жизнь, особенно, если речь идет о фоновых изображениях сайта; не забывайте использовать опцию Save for web and devices в вашем фотошопе. С ее помощью вы можете сознательно ухудшить качество изображения, соответственно, существенно снизив его вес. Человеческий глаз подобное «ухудшение» и не заметит, а вот скорость загрузки может возрасти прилично.
- Уменьшение количества HTTP-запросов
Все скрипты и картинки, объединяйтесь!
Чем меньше компонентов у страницы, тем меньше запросов к серверу отправляется при ее загрузке.
Если вы не готовы жертвовать навороченным дизайном вашего сайта, попробуйте заняться объединением различных элементов.
Объединить изображения вам помогут Image Maps и CSS-спрайты.
Слить несколько скриптов в один файл — смогут умелые руки опытного программиста.
- Оптимизация CSS и Javascript
Вот вам простые правила работы с CSS и JS.
Выносите javascript и CSS во внешние файлы – так они будут работать быстрее.
Поместите CSS в HEAD страницы – это ускорит ее загрузку.
И напротив, поставьте все .js-файлы в самый низ страницы, как можно ближе к концу.
И, конечно, постарайтесь минимизировать количество внешних скриптов на странице: чем проще код, тем выше скорость.
- Настройте клиентское кэширование
В данном случае речь идет о замечательной способности браузеров хранить копить файлов сайта, на котором уже бывал клиент. И так как файлы эти сохранены, при повторном посещении новой загрузки уже не требуется, что, безусловно, ускоряет работу сайта.
Кэшированием управляют несколько HTTP-заголовков.
Вот самые интересные.
ETag и If-None-Match
«Этажи» работают следующим образом.
При создании и каждом редактировании файла сервер отмечает его особым знаком (это и есть ETag) и добавляет заголовок файлу, который отправляется к браузеру.
Например, ETag: «686897696a7c876b7e».
Отлично, браузер получил информацию.
Теперь при повторной загрузке той же страницы браузер отправит на сервер запрос с заголовком If-None-Match: «686897696a7c876b7e».
Дальше все просто. Если ETag не изменился, сервер бодренько отправляет браузеру пустой ответ со статусом 304 (Not Modified), и браузер не менее быстро продемонстрирует пользователю копию из кэша.
Заголовок Expired
А вот заголовок Expired работает принципиально по-иному.
Заголовком Expired ваш сервер сообщает браузеру о своих планах по изменению контента данной страницы.
Фактически, это срок годности страницы, который определяется по вашим правилам.
Например, сервер может сообщить браузеру, что данная страница до 4 марта 2015 года меняться не собирается. А значит, при следующей попытке пользователя загрузить эту страницу, которая может случиться 3 марта 2015 года, браузер не будет обращаться к серверу вообще, а просто восстановит нужную страницу из кэша.
- Использование сжатия GZIP
Сжатие помогает уменьшить время загрузки HTTP-ответа, уменьшая объем его содержимого.
Предположим, что юзер открыл страницу сайта, и отправил тем самым запрос к серверу на передачу данных.
Сервер в ответ отдает браузеру пользователя картинки и файлы сайта, каждый из которых имеет определенный вес.
Так вот, сжатие Gzip подразумевает, что все файлики пакуются «в архив», который традиционно весит меньше, чем все компоненты по отдельности, а браузер уже на своей стороне распаковывает архив и показывать пользователю нужные файлы.
Используйте Gzip для всех ваших CSS, HTML и JS-файлов, которые весят больше 150 байт.
Не используйте Gzip для картинок сайта (здесь мы возвращаемся к первому совету и идем сжимать картинки в фотошопе).
- Уменьшение количества редиректов
Чем меньше перенаправлений на странице, тем быстрее она открывается.
Тут даже комментировать нечего. Планируйте структуру сайта грамотно и, по возможности, не меняйте существующие URL.
Больше редиректов – меньше скорость.
- Использование CDN
Если физические файлы вашего сайта находятся невероятно далеко от пользователя (речь о географической удаленности: клиент в Крыму, а сервер ваш в Канаде), то скорость загрузки страниц будет замедляться.
Размещение файлов сайта на нескольких серверах, расположенных в различных точках мира, сделает загрузку сайта более быстрой.
CDN (Content Delivery Network) – как раз и представляет собой множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Когда пользователь обращается к серверу, чтобы загрузить сайт, система выбирает оптимальный сервер по ряду показателей типа наименьшего времени отклика, и отдает клиенту контент именно оттуда.
Как правило, CDN используется для хранения изображений крупных интернет-магазинов и порталов. Для сайта-визитки с десятком страниц CDN будет явным излишеством.
Используйте все актуальные для вашего сайта приемы, чтобы сделать его более быстрым. И увидите, как улучшение скорости загрузки сайта позитивно скажется на ваших позициях в поисковиках и лояльности клиентов.