Как ускорить загрузку своего сайта при помощи compress.php, который объединит и сожмёт JS + CSS в Gzip

в 5:38, , рубрики: оптимизация сайта, Серверная оптимизация, сжатие, метки: ,

Ускоряем сайт при помощи GoogleПодробные инструкции, которые даются на code.google позволят вам:

  • Сжать все многочисленные скрипты JS и стили CSS
  • Соединить все полученные файлы в один JS и в один CSS
  • Сжать полученные два файла в формат GZIP, который понимают почти все браузеры и умеют распаковывать на лету
  • Прописать такой .htaccess, который заставляет браузеры кэшировать данные два файла

Всё это будет происходить при запуске единственного скрипта compress.php

Для примера, результат сжатия скриптов моего сайта:

  • JS: сжато в gz 26 698 B, сжато без gz 95 796 B, было 120 147 B
  • CSS: сжато в gz 46 049 B, сжато без gz 160 001 B, было 281 870 B

Получается, что экономия трафика составляет 329 270 B. Но основной выигрыш для скорости загрузки в том, что теперь загружается не 14 файлов, а всего 2. (а это намного быстрее, так как браузер не тратит время на запросы)

В итоге, получится:

<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" />
<script src="min/all_1349888114.jsgz" /></script>

Инструкции на удивление просты:

  1. Скачайте скрипт compress.php
  2. Скачайте скрипты cssmin.php, jsmin.php
  3. Загрузите эти 3 скрипта в корень своего сайта*
  4. Создайте в корне сайта файл compress_timestamp.php и установите на него права, чтобы скрипт compress.php мог этот файл перезаписывать*
  5. Создайте пустую папку min в корне своего сайта
  6. В свой index.php включите в header следующий код:
    <?php
    require_once('compress_timestamp.php');         //загрузить timestamp сохранённый в файле, чтобы обмануть кэширование. Устанавливает $compress_stamp=unix_timestamp                                       
    if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false)   
            $gz='gz';
     else
            $gz=null;
    echo '<script src="min/js_schedule_'.$compress_stamp.'.js'.$gz.'" />',PHP_EOL;
    echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL;
    ?>
    

  7. Отредактируйте файл compress.php, и перечислите свои скрипты и стили в соответствующем месте:
    <?php
    file_compress('css_schedule.css',array('./CSS/menu.css', './CSS/ThreeColumnFixed.css', './CSS/sprite.css', './CSS/iCal.css'));
    file_compress('js_schedule.js',array('./js/all1.js', './js/jquery.js', './js/love_habrahabr.js', './love_4pda.js'));
    ?>
    

    Именно ради этих волшебных функций (пакующих в один файл и сжимающих его) мы всё и затевали. Необходимые файлы создадутся в папке MIN в варианте GZipped и обычном. Если браузер старый, будет выдаваться обычный формат JS и CSS, если новый то JSGZ и CSSGZ.

  8. Удалённо запустите скрипт compress.php и всё произойдёт автоматически
  9. Загружайте сайт для проверки

*для простоты мы сохраняем все файлы в корень сайта, но лучше этого не делать в целях безопасности

Теперь ваш сайт загружается быстрее, код ваших JS и CSS труднее расшифровать любителям чего нибудь поломать.

Каждый раз, когда вы меняете скрипты на сайте, нужно запустить compress.php перед загрузкой сайта, всё остальное происходит автоматически.

Не забывайте, что ссылки на картинки в ваших стилях CSS теперь должны вызываться с учётом того, что CSS находится в папке MIN.


Если хотите ещё больше ускорить сайт, есть простое решение. Установите заголовки статических файлов такими, чтобы браузеры их кэшировали надолго. Это можно сделать, если положить в корень сайта файл .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType audio/mp3 "access 1 year"
ExpiresByType audio/wav "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

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

Источник на code.google
Автор: Arn Burkhoff

Автор: imater

Поделиться

* - обязательные к заполнению поля