Pull to refresh

И снова о speed performance вашего сайта

Website development *
Уф… наконец-то я решился написать свой первый пост.

В этом посте я хочу рассказать вам о некоторых простых, и в тоже время эффективных способах ускорения загрузки вашего сайта.
Все методы основаны на LAMP + nginx + drupal, но я уверен что всё это верно и для остального тоже.
Разговор пойдёт о первой загрузке сайта, то есть когда у клиента нет ещё кеша в браузере.

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






Главное не размер а количество ©

1. Чем меньше количество запросов (requests) к вашему сайту, тем лучше!

смотрим на рис. 3
Время в секундах, это adsl линия 2.5Мб
Итак, что же у нас есть? Есть 37 запросов и 18 сек. времени. Много!
Первый запрос это собственно сам html
(если ваш html отдаётся менее чем за 1 сек — я думаю рано думать об оптимизации кода)
потом пошли css, js и картинки
как видно из скрина, картинки отдаются параллельно, а css и js нет!
Вывод: Уменьшить количество запросов для css и js
В пятом друпале фишка сжатия css в один файл — билд-ин, то есть просто идём в performance и выставляем там.

смотрим рис. 1
Вместо 9 файло-запросов и 6 сек. получаем 1 запрос и 1.5 сек времени. Неплохо… :)
Теперь очередь js.
скачиваем модуль javascript_aggregator — инсталим, и получаем там-же в performance такую же фишку для js
смотрим рис. 6 и видим, что все наши js файлы теперь берут только 1.5 сек. вместо тех же 6 сек. Практически хорошо… :)

Так же к количеству запросов можно добавить и то, что если у вас есть много однотипных картинок на сайте (иконки, пиктограммы)
то стоит посмотреть в сторону css спрайтов. То есть все эти картинки пихаем в 1 файл в ряд, а потом в css для нужного места делаем offset. В результате имеем 1 запрос вместо 5-10.

upd: По наводке тов. Chapaev — «А ещё можно все картинки интерфейса собрать в одну — ImageBundles»

Ну и напоследок, если у вас сайт уровня дигг, то все свои css и js вставляйте инлайн в html, этим вы сэкономите ещё 2-3 запроса. (Да, они не закешируются, но зато так быстрее. + можно на внутренних страницах вставлять их инклюдами, когда картинки уже в кеше)

Вот способ как сложить js и css в один файл:
<!-- /*
function t(){}
<!-- */
<!-- body { background-color: Aqua; }
Внизу есть ссылка с подробностями.

Кстати, тут на хабре пробегал скрипт combine который пакует и компрессует css и js


2. Жмите весь отдаваемый контент!

Забудьте о всяких ob_start(«ob_gzhandler»);

Зачем напрягать php и себя, если можно сжимать всё веб сервером автоматически?
Ставим\включаем mod_deflate или mod_gzip для apache и всё! весь ваш контент будет сжат автоматом (почти :) ).
(Это утверждение правильно только если у вас есть доступ к настройкам апача)
Смотрим и сравниваем рис. 3 и рис 6. (первый запрос)
в одном случае 22кб а в другом 6кб. практически в 4 раза!


3. Не забываем о php акселераторах

xcache, eAccelerator, APC

Мал да удал ©

4. Не отдавайте клиентам статику апачем!

Этот монстр начинает жутко тормозить при больших нагрузках.
Для отдачи картинок (да и тех же css, js, flash итд.) используйте веб сервер nginx
Есть 3 варианта его настройки:
1 вариант:
manual
отдельный поддомен для статики (напр. i.zoza.ru )
плюсы:
• уверенность в том, что всё будет работать как и работало (апач так и будет продолжать получать прямые запросы)
• простая настройка
минусы:
• нужно 2 ip (один для апача и один для nginx, оба на 80 порту, т.к. некоторые админы режут всё что не 80 порт)
• нужно править шаблоны и прописывать путь к поддомену

2 вариант:
как фронт-энд
manual
плюсы:
• 1 ip адрес на разных портах
• ничего не меняем в шаблонах
минусы:
• много ресурсов (к апачу ещё и второй сервер вдобавок)
• переменные окружения могут «врать». (напр. для апача ip адрес клиента будет адрес nginx, но это лечится)

3 вариант:
как основной (единственный) веб сервер
плюсы:
• убираем апач совсем (меньше памяти надо серверу)
• 1 ip адрес
• ничего не меняем в шаблонах
минусы:
• некоторые вещи, заточенные только под апач, не будут работать


Я уверен что много чего пропустил и не договорил, но уже и так «многа букав». Так что спрашивайте в комментах — отвечу.

реклама:
www.eaccelerator.net
rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
drupal.org/project/javascript_aggregator
blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx
sysoev.ru/nginx
csssprites.com
www.drupal.ru/node/8304
developer.yahoo.com/performance/rules.html
hostingfu.com/article/running-drupal-with-clean-url-on-nginx-or-lighttpd
sittinginoblivion.com/node/251

PS. Пишу в личный блог, в другое место не могу — рылом кармой не вышел. :)
Перенёс в веб-разработку. спасибо за карму! :)

UPD: ЛЮДИ!!! ЧЕЛОВЕКИ!!! Этот пост будет полезен тем, кто хоть капельку способен думать,
для тех, кому эти вещи ещё не знакомы, но он хочет узнать.
Я дал тут старт для поисков, так сказать «проспамил нужные кийворды». Вот не знал человек что есть такая вещь как php акселерация — набрал в гугле xcache или eAccelerator и всё… уже в курсе.
Или конфиг nginx — да в нете полно статей на эту тему.
Или mod_deflate.
Tags:
Hubs:
Total votes 54: ↑47 and ↓7 +40
Views 1.8K
Comments 76
Comments Comments 76