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

На написание данной статьи меня побудило незнание 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. Они не только помогают уменьшить трафик на сервер, но и позволяют поисковым системам оптимизировать анализ вашего сайта, как следствие – он будет быстрее индексироваться.

Итог

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

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