История одного сайта
Я не буду тут писать хвалебных речей о WEBO SITE SpeedUp. Думаю, их и так напишут немало. Я расскажу о суровых буднях сайто-строителя.
Сделал я как-то сайт на CMS Joomla. Сайт получился красивый: прозрачные стили, png с альфа-каналом и прочие ништяки. При этом сайт одинаково (насколько это возможно) выглядел в разных браузерах (IE6, IE7, IE8, Opera, FireFox, Safari). Разуметься в IE6 не было прозрачных слоев и прочего, но все было максимально приближено к «оригиналу».
Данный функционал обеспечивался разнообразными php скриптами, которые на лету формировали как файлы стилей (css) так и файлы скриптов (.js) в зависимости от браузера пользователя (User-Agent). При создании сайта было использовано много «технологических» новинок и его сейчас можно сдавать в аренду в качестве полигона для испытаний всяких подобных оптимизаторов.
Попросил друзей «погонять» сайт, на что получил резюме – тормозит. Ну что ж. Пользователи народ привередливый – им не важны всякие диаграммы нагрузок и скорости отдачи контента – тормозит и все. Проблема была обозначена, и ее надо было решать.
Покопавшись по Internet-у, набрел на сайт webo.in, где можно было оценить скорость загрузки сайта и получить рекомендации. Причем рекомендации с неплохим описанием, чего именно они советуют и как этого добиться. Погрузился в чтение. Спустя некоторое время обнаружил, что на сайте можно скачать плагины, в том числе и для CMS Joomla для оптимизации сайта.
Скачал, поставил, и понеслось. Сайт ускорился, тормозить перестал. Со временем, вместо плагина, появился соответствующий компонент, который был тут же установлен, выбрана максимально оптимизирующая конфигурация и я откинулся на спинку стула, что бы насладиться чашкой кофе.
Однако я подавился бутербродом когда увидел свой сайт в IE6. Все стили уползли кто куда, png выглядели так как будто это был сайт про хэллуин, вверху красовались всякие варнинги и ошибки, вообщем кошмар полный.
Полез разбираться. Оказалось, сгубила меня именно навороченность сайта. То что раньше генерировалось на лету и отдавалась пользователи под именно его браузер, сейчас предварительно собирается Webo, пакуется, жмется, оптимизируется и отдается пользователю «как есть». Но надо отдать должное Webo – он пытается сгенерировать разные файлы стилей под (IE6, IE7 и тд), но результата не видно. В платной версии можно отключить отсебятину с попытками подстроиться под разные браузеры, но лучше от этого не будет – всем будет отдаваться одинаковые файл стилей.
Пришлось ковырять php скрипты, генерирующие файлы стилей. Что можно было – вынес в статические файлы, что нельзя было – запретил объединять. Производительность, наверно, упала, но незаметно для глаза. Тут надо еще заметить такой момент – после этой модификации нарушился порядок загрузки файлов стилей и если в них использовались всякие конструкции по переопределению каких-либо свойств, то это надо учесть. Помниться я долго мозги выносил техподдержке по этому поводу, пока не разобрался что к чему.
В целях компенсации потерянной производительности решил более плотно заняться Java-script, оптимизация которого у меня была вообще отключена из-за того что сайт рисовался в динамике. Выбрал что бы объединялись скрипты только которые в тегах <head>. И те скрипты, которые должны генерироваться в райнтайме, я запретил к объединению, остальные объединил.
Решил пойти дальше, а именно в тэг <body>. Основную проблему там представляли счетчики. Скрипты генерируют картинку баннера, и если их объединить с остальными скриптами и запихнуть в тэг <head>, то баннеры будут показываться в левом верхнем углу экрана, а не там где хочется. Однако решение было найдено очень быстро – практически все счетчики допускают раздельный вариант установки – картинка отдельно, текст скрипта отдельно. Что и было сделано. Mail.ru, Rambler, LiveInternet проблем не вызвали. SpyLog раздельно не устанавливается, но можно выбрать невидимый баннер. HotLog такой функциональности не предоставляет и техподдержка молчит. Можно попробовать изменить код скрипта что бы там баннер был невидимый, но это на свой страх и риск.
Аналогичная проблема возникла с баннером погоды. Однако ее скрипт был вынесен в отдельный файл и запрещен к объединению.
Приблизиться к идеалу: «один файл стиля, один файл скрипта» не удалось, но, на мой взгляд, я приблизился к нему максимально возможно.
30.05.2010, 12:05:22