Ускоряем загрузку сайта

Ускоряем загрузку сайта

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

0. Зачем нужно ускорять сайт?

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

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

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

1. Анализ

Анализ скорости сайта

Дабы не оптимизировать всё подряд (а некоторые пункты могут быть довольно трудоёмкими), советую сначала провести анализ вашего сайта. В Google Chrome нажмите F12, откройте вкладку «Network» и нажмите Shift+F5. Вы увидите timeline загрузки вашей страницы без использования кеша браузера (см. картинку справа). Рекомендую предварительно почистить куки браузера.

Процесс загрузки документа разделяется на:

  • DNS Lookup
  • Connecting
  • Sending
  • Waiting
  • Receiving

Если у вас тормозят DNS Lookup, Connecting или Sending, то, скорее всего, проблема где-то у вашего провайдера или на хостинге. Свяжитесь с техподдержкой хостинга, попробуйте сменить хостинг.

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

Ну, а если Receiving – то просто документ довольно большой.

Кроме того не должно быть большого количества HTTP-запросов при генерации страниц. Больше 30 – уже довольно много.

2. Оптимизация документа и вёрстки

Для начала надо ускорить фронтенд

В данном разделе давайте рассмотрим, что же можно ускорить на фронтенде.

2.1. Документ не должен быть большим (что, впрочем, встречается довольно редко) и, желательно, удобочитаемым. Если документ большой, то либо у вас много текста, либо «хромает» вёрстка. В первом случае его можно разбить на части, а во втором – оптимизировать HTML.

2.2. Все стили следует вынести во внешний CSS файл. Идеально, если CSS файл будет один. Аналогично – с JavaScript-ом.

2.3. Поместите декоративные картинки в спрайт. Как известно, использовать тег <img> в декоративных элементах вёрстки семантически неправильно. Кроме того, зачем поисковым системам индексировать неинформативные иконки? Объединяя элементы вёрстки в спрайт, вы существенно ускоряете загрузку страницы.

2.4. Используйте css-градиент, сглаживание вместо фоновых изображений.

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

3. Оптимизация Backend

Бекенд выглядит как-то так

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

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

3.1. Не используйте много запросов к БД и не используйте тяжелых запросов там, где того не надо. Следите за порядком запросов. Количество запросов для генерации страницы не должно увеличиваться при изменении входных данных (добавления статьи, раздела и т.п.). Важен также порядок запросов: никогда не выполняйте запрос в цикле.

3.2. Используйте кеш! Большинство простых запросов к БД возможно легко кешировать. Хорошо если ваш хостинг предоставляет memcached, но даже использование файлового кеша часто даёт прирост скорости в разы. Начните с «тяжелых» страниц. Возможно, прийтётся рефакторить код.

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

3.4. Оптимизируйте время исполнения PHP-скрипта. Перепишите медленные скрипты, жрущие память и процессорное время.

3.5. Если ваш сайт занимается обработкой изображений, попробуйте сменить библиотеку для работы с изображениями или использовать внешний сервис. Не зря ведь большинство DDOS-атак идёт именно на скрипт, генерирующий капчу. В случае капчи поможет recaptcha, в остальных – всё сугубо индивидуально.

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

Баланс между качеством картинок и скоростью

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

4.2. Если на странице изображений довольно много (не считая декоративных элементов, которые надо объединить в спрайт), можно разнести изображения по различным серверам. Поскольку одновременно может загружаться до 6 изображений с одного домена, то использование нескольких доменов решает проблему со скоростью загрузки у клиента (да и разгружает основной сервер). Ещё раз подумайте, надо ли вам столько изображений на одной странице.

5. Остальное

Кеширование браузера ускорит ваш сайт до скорости поезда

5.1. Кеширование со стороны браузера здорово помогает. Проверьте заголовки Cache-Control и Expires. Этими заголовками вы указываете клиенту время, когда он должен заново перезагрузить файл с сервера.

5.2. Не забывайте про keep-alive! Это позволит делать несколько HTTP-запросов на одном TCP-соединении.

5.3. Используйте заголовки ETag и Last-Modified. Они не только помогают уменьшить трафик на сервер, но и позволяют поисковым системам оптимизировать анализ вашего сайта, как следствие – он будет быстрее индексироваться.

Итог

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

Удачного вам полёта и до новых записей в блоге!

Комментарии

30.11.2013 02:33:36
Avatar of Юра ГалинЮра Галин
Поместить все картинки в спрайт. Как известно, использовать тег в элементах вёрстки плохо. Ещё одна причина использовать стиль background – возможность использования спрайтов. Объединяя элементы вёрстки в спрайт, вы существенно ускоряете загрузку страницы.

Имеется в виду тег <img>?
30.11.2013 11:47:46
Avatar of КонсервКонсерв
@Юра
Спасибо, исправил.
16.08.2014 11:27:04
Avatar of 202202
Интересная статья. И, главное, полезная. Спасибо. Только подскажите пожалуйста что такое DDOS атака?
21.08.2014 09:51:10
Avatar of КонсервКонсерв
DDOS - Distributed Denial Of Service. Распределённая атака на отказ сервиса. Обычно атака совершается с помощью ботнетов.

Ботнет - много нехороших программ на разных компьютерах со всего мира, которыми можно одновременно управлять. Вот кому-то не понравился сайт (конкурентам или просто хулиганам) - владелец ботнета нажимает кнопочку, и на сайт попёрли тысячи, миллионы ботов. Сайт не справляется и оказывается недоступным.
Captcha Обновить
Go Top