Ускорение загрузки страниц для конечного пользователя.

Опубликовано

По результатам проделаной работы решил написать небольшую статью. Буду писать на примере фоурма G-soft.info, но данные действия применимы для любого сайта.
Из инструментов нам понадобится FireFox последней версии, лично я предпочитаю 4.0 хотя в данный момент он имеет статус Beta. Плагин FireBag и PageSpeed от Google.

После установки всего этого мы сможем вызывать консоль FireBag нажатием клавишы F12. Что ж давайте начинать. Заходим на главную страницу жмем F12 переходим на вкладку PageSpeed жмем анализ, после чего получаем примерно следующую картину.

FireBag

Открываем первый же пункт и смотрим что нам сообщает плагин.

FireBag

Значит у нас не включено сжатие информации. Будем исправлять, проверяем включен ли у вас плагин DEFLATE, если включен прописываем в .htaccess которые лежит в корне сайта.

<FilesMatch "\.(js|css|htm)$">
SetOutputFilter DEFLATE
</FilesMatch>

Тем самым мы включаем сжатие для текстовой информации. Так же было бы не плохо вписать туда же

SetEnvIf User-Agent .* force-no-vary
SetEnvIf Accept-Encoding gzip !force-no-vary
SetEnvIf Accept-Encoding deflate !force-no-vary

Что бы срезались vary заголовки, тем самым отключая сжатие. Но учтите через прокси сервер вы будете все равно получать не сжатую информацию. Я это не учел и потерял около получаса на экспериментах, не повторяйте моих ошибок.

FireBag
Тут все просто, не настроено кэширование. Идем опят же в .htaccess и вписываем

ExpiresActive on
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"

Тем самым мы сообщаем браузеру о том что изображения кэшируются на месяц.

FireBag
Уменьшить количество CSS данных тут все еще проще, плагин нам сразу предлагает сжатую версию, сохраняем ее на компьютер и закачиваем на сервер, заменяем имеющуюся у нас, либо вносим изменения в движок (в тему оформления) и сохраняем под именем к примеру name_.css

FireBag
Проделываем то же самое что и с CSS

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

Я на этом остановился, хотя можно и дальше продолжать.  После всего этого мы получаем такую картинку.

FireBag

напоминаю про прокси сервер. Согласитесь не плохо, к тому же загрузка страниц стала заметно быстрее, что очень радует.

Apache