1. Объединение CSS файлов с помощью PHP

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

Подготовка

Перед оптимизацией CSS файлов, нам необходимы стили для работы. Давайте создадим несколько файлов с стилями:

1. // main.css
2. // CSS для примера
3.  
4. body {
5. width: 800px;
6. margin: 0 auto;
7. color: grey;
8. }
9.  
10. #wrapper {
11. margin-top: 30px;
12. background: url(../images/cats.png);
13. }

1. // typography.css
2. // CSS для примера
3.  
4. body {
5. font-family: Arial, san-serif;
6. font-weight: bold;
7. }
8.  
9. strong {
10. font-size: 120%;
11. }

1. // forms.css
2. // CSS для примера
3.  
4. form {
5. position: relative;
6. top: 400px;
7. z-index: 99;
8. }
9.  
10.  
11. input {
12. height: 50px;
13. width: 400px;
14. }

PHP

Нам необходимо извлечь содержание всех файлов и соединить в определенном порядке. Значит наш скрипт должен получить имена таблиц стилей через УРЛ параметры, открыть эти файлы и соединить.

1. <?php  
2. //Определяем переменные  
3. // --- NOTE: PATHS NEED TRAILING SLASH ---  
4. $cssPath = './css/';
5. if (isset($_GET['q'])) {
6.    $files = $_GET['q'];  
7.    // Получаем массив файлов    
8.    //Давайте убедимся, что в файловых именах нет страшных символов :) .  
9.    foreach ($files as $key => $file) {
10.       $files[$key] = str_replace(array('/', '\\', '.'), '', $file);  
11.    }    
12.  
13.    $cssData = '';  
14.    foreach ($files as $file) {
15.       $cssFileName = $cssPath . $file . '.css';  
16.       $fileHandle = fopen($cssFileName, 'r');
17.       $cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
18.       fclose($fileHandle);
19.    }
20. }
21. // Скажи браузеру, что у нас CSS файл
22. header("Content-type: text/css");
23. if (isset($cssData)) {
24.    echo $cssData;
25.    echo "\n\n// Generated: " . date("r");
26. } else {
27.    echo "// Files not avalable or no files specified.";
28. }
29. ?>

Более подробно о каждой части кода

1. <?php
2. //Определяем переменные
3. // --- NOTE: PATHS NEED TRAILING SLASH ---
4. $cssPath = './css/';
5. if (isset($_GET['q'])) {
6.    $files = $_GET['q'];
7.    // Got the array of files!
8.    //Давайте убедимся, что в файловых именах нет страшных символов :) .
9.    foreach ($files as $key => $file) {
10.       $files[$key] = str_replace(array('/', '\\', '.'), '', $file);
11.    }

Этот код устанавливает путь к папке со стилями и проверяет на наличие файлов. Путь к папке должен иметь слеши вначале и в конце названия папки, так как в противном случае у нас будет масса ошибок. Далее мы проверяем каждое имя файла и удаляем точки и/или слеши.

1. $cssData = '';
2. foreach ($files as $file) {
3.    $cssFileName = $cssPath . $file . '.css';
4.    $fileHandle = fopen($cssFileName, 'r');
5.    $cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
6.    fclose($fileHandle);
7. }
8. }

Теперь нам необходимо создать общую таблицу стилей из файлов. Для этого мы запускаем цикл, который просматривает массив файлов, открывает каждый файл и соединяет в единый файл. "\n" добавляет новую строку для порядка и чистоты. Функция filesize() используется для того, чтобы узнать длину файла и передать fread().

1. // Скажи браузеру, что у нас CSS файл
2. header("Content-type: text/css");
3. if (isset($cssData)) {
4.    echo $cssData;echo "\n\n// Generated: " . date("r");
5. } else {
6.    echo "// Files not avalable or no files specified.";
7. }
8. ?>

Последняя часть кода передает все стили браузеру. Это значит, что нам необходимо сказать PHP, что мы передаем CSS информацию и что PHP должно проинформировать об этом браузер. Мы делаем это с помощью функции header(), и устанавливаем Content-type: text/css. Далее мы передаем CSS клиенту. Но перед этим проверяем наличие CSS стилей в файле. Если их нет, значит это означает, что названия CSS файлов не были переданы. Если же у нас есть файлы мы их передаем и добавляем сообщение о генерации.

Проверка

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

Теперь загрузите все файлы в корень сайта и обратитесь к файлу index.php через браузер. Вас должна встретить фраза 'Files not available or no files specified' (файлы не доступны или не указаны). Это означет, что мы не дали названия файлов, которые необходимо соединить. Однако, хорошая новость - что все работает без ошибок. Давайте попробуем напечатать в браузере 'index.php?q[]=main'. У Вас на экране появится содержание файла main.css. Если нам необходимо извлечь несколько файлов и объединить их, нам необходимо отправить следющий запрос 'index.php?q[]=main&q[]=forms'. Как Вы видите мы можем повторять 'q[]=' сколько угодно раз. Вы можете объединить в один файл хоть 50 таблиц стилей.

Заключение

Данный метод может быть очень полезным, и иметь множество плюсов. У Вас может быть общая таблица стилей для всего сайта, и отдельная, например, для страниц с формами.

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

2. Удаление пустых строк из HTML и CSS

Многие из нас используют большое количество пустых строк при написании кода. Хорошие новости - пустые строки в PHP не передаются браузеру. Однако, передаются в HTML.

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

Подготовка

Ниже представлены коды для HTML и CSS файлов.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html>
4. <head>
5. <title>Hey a Page!</title>
6. <link rel="stylesheet" href="./css.css" type="text/css">
7. </head>
8. <body id="homepage">
9. <div id="wrapper">
10. <div id="header">
11. <h1>Kittens for sale!</h1>
12. <div>
13. There   are      lots      of spaces here! But we need to get    rid   of  them!
14. </div>
15. </div>
16. <div id="mainbody">
17. Lorem Ipsum dol...
18. </div>
19. </div>
20. </body>
21. </html>

1. body {
2. min-height: 800px;
3. background: black;
4. font-size: 18px;
5. }
6. #wrapper {
7.       width: 960px;
8.       margin: 20px auto;
9.       padding: 15px;
10.       }
11. #header h1 {
12.       text-indent: -99999em;
13.       background: url(../images/header.png);
14.  
15.       display: block;
16.       width: 100%;
17.       height: 48px;
18.       }
19. #mainbody {
20.       font-weight: bold;
21.       }

PHP

Преимуществом данного скрипта является то, что он может одновременно работать как с HTML, так и с CSS. Скрипт загружает файл, убирает все пустые строки, оставляет только 1 пробел, чтобы слова не соединялись в одно целое.

1. <?php
2. $fileDirectory = '';
3. $file = $_GET['q'];
4. $nameExplode = explode('.', $file);
5. $ext = $nameExplode[1];
6. $fileName = $fileDirectory . $file;
7. if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
8.    //Проверка для хакеров
9.    die('Hackers...!');
10. } else {
11.    //Начнем
12.    $handle = fopen($fileName, 'r');
13.    $fileData = fread($handle, filesize($fileName));
14.    //Чудеса регулярных выражений
15.    $newData = preg_replace('/\s+/', ' ', $fileData);
16.    fclose($handle);
17.    //Выводим данные
18.    if ($ext == 'css') {
19.       header("Content-type: text/css");
20.    }
21.    echo $newData;
22. }
23. ?>

Более подробно о каждой части кода

Мы получаем имя файла и проверяем его тип. Далее извлекаем все данные и убираем пробелы и пустые строки. Этот метод наиболее примитивный и не удалит все пустые строки, но он справится с большинством. И это всего несколько строк кода.

1. <?php
2. $fileDirectory = '';
3. $file = $_GET['q'];
4. $nameExplode = explode('.', $file);
5. $ext = $nameExplode[1];
6. $fileName = $fileDirectory . $file;

Этот код задает необходимые переменные. Снова, мы передаем все данные через 'q'. Тут также определяется папка для файлов.

1. if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
2.    //Проверка для хакеровdie('Hackers...!');
3. } else {

Тут мы проверяем действительно ли файл является CSS или HTML.

1. //Начнем
2. $handle = fopen($fileName, 'r');
3. $fileData = fread($handle, filesize($fileName));
4. //Чудеса регулярных выражений
5. $newData = preg_replace('/\s+/', ' ', $fileData);
6. fclose($handle);
7. //Выводим данныеif ($ext == 'css') {
8.    header("Content-type: text/css");
9. }
10. echo $newData;
11. }
12. ?>

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

Работает ли это?

Если Вы в браузере напечатаете 'index.php?q=css.css', то увидите одну линию CSS. Значит все работает! Если откроете исходный код страницы, то увидите такую же картину. С помощью данного метода мы уменьшили 314 символьный CSS файл до 277 символов. HTML файл с 528 до 448 символов. Неплохо для 15 строк кода.

Заключение

Это отличный пример того, как мы можем сделать много используя несколько строк кода. Если Вы взгляните на исходный код таких сайтов как Гугл, то заметите, что там практически нет пустых строк.

3. Кеширование PHP скриптов

Я покажу Вам, как настроить кеширование Ваших скриптов, используя пример выше. Цель - ускорить работу сайта. Суть очень проста - данные не будут генерироваться каждый раз при обращении к сайту. Они будут храниться в кеше.

Для добавления кеширования, нам необходимо добавить три вещи к нашему скрипту. Во первых, нам необходить собрать все данные в скрипт и сгенерировать файл уникальный для этого набора введенных данных. Во-вторых, нам необходимо найти файл с кешем и проверить насколько он "свеж". В-третьих, нам необходимо использовать кешированную копию или сгенерировать новый файл кеша для использования в дальнейшем.

Подробнее

1. <?php
2. $fileDirectory = '';
3. $file = $_GET['q'];
4. $nameExplode = explode('.', $file);
5. $ext = $nameExplode[1];
6. $fileName = $fileDirectory . $file;
7. //-- WE HAVE ENOUGH DATA TO GENERATE A CACHE FILE NAME HERE --
8. if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
9.    //Check for evil people...
10.    die('Hackers...!');
11. } else {
12.    //-- WE CAN INTERCEPT AND CHECH FOR THE CACHED VERSION HERE --
13.    //Lets get down to business
14.    $handle = fopen($fileName, 'r');
15.    $fileData = fread($handle, filesize($fileName));
16.    //Now for some regex wizardry!
17.    $newData = preg_replace('/\s+/', ' ', $fileData);
18.    fclose($handle);
19.    //Time to output the data.
20.    //-- NOW WE CAN STORE THE NEW DATA IF REQUIRED AND OUTPUT THE DATA --
21.    if ($ext == 'css') {
22.       header("Content-type: text/css");
23.    }
24.    echo $newData;
25. }
26. ?>

Приступим

Далее идет код кеширования для данного скрипта. Ниже будет разобрана каждая часть.

1. <?php
2. $fileDirectory = '';
3. $file = $_GET['q'];
4. $nameExplode = explode('.', $file);
5. $ext = $nameExplode[1];
6. $fileName = $fileDirectory . $file;
7. $cacheName = './cache/' . $nameExplode[0] . $nameExplode[1] . '.tmp';
8. if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
9.    //Хакеры
10.    print_r($ext);
11.    die('Hackers...!');
12. } else {
13.    if (file_exists($cacheName) AND filemtime($cacheName) > (time() - 86400)) {
14.       $cacheHandle = fopen($cacheName, 'r');
15.       $newData = fread($cacheHandle, filesize($cacheName));
16.       fclose($cacheHandle);
17.       $isCached = TRUE;
18.    } else {
19.       //Начнем
20.       $handle = fopen($fileName, 'r');
21.       $fileData = fread($handle, filesize($fileName));
22.       //Чудеса регулярных выражений
23.       $newData = preg_replace('/\s+/', ' ', $fileData);
24.       fclose($handle);
25.       //Кешируем
26.       $cacheHandle = fopen($cacheName, 'w+');
27.       fwrite($cacheHandle, $newData);
28.       fclose($cacheHandle);
29.       $isCached = FALSE;
30.    }
31.    //Выводим данные
32.    if ($ext == 'css') {
33.       header("Content-type: text/css");
34.       if ($isCached) {
35.          echo "// Retrieved from cache file. \n";
36.       }
37.    } else {
38.       if ($isCached) {
39.          echo '<!-- Retrieved from cache file. -->';
40.       }
41.    }
42.    echo $newData;
43. }
44. ?>

Объяснение

В данном скрипте была добавлена функция обновления кеша каждые 24 часа. Это удобно. Допустим, если Вы поменяли что-либо на сайте - можете подождать 24 часа или же очистить кеш.

1. $cacheName = './cache/' . $nameExplode[0] . $nameExplode[1] . '.tmp';

Этот отрезок кода достает название файлов и их расширения, склеивает их вместе и добавляет в кеш с правильным расширением '.tmp'.

1. if (file_exists($cacheName) AND filemtime($cacheName) > (time() - 86400)) {
2.    $cacheHandle = fopen($cacheName, 'r');
3.    $newData = fread($cacheHandle, filesize($cacheName));
4.    fclose($cacheHandle);$isCached = TRUE;
5. } else {

Тут мы проверяем наличие сохраненного кеша и был ли он создан в течении последних 24 часов (значение в секундах - можно поменять на любое другое). Если оба условия выполняются, открываем файл и извлекаем содержание, чтобы заменить им результат работы скрипта. Мы также устанавливаем $isCached true для вывода дополнительных сообщений в конце.

1. //Lets cache!
2.    $cacheHandle = fopen($cacheName, 'w+');
3.    fwrite($cacheHandle, $newData);
4.    fclose($cacheHandle);
5.    $isCache = FALSE;
6. }

Кешируем результат скрипта для использования при дальнейших обращениях. Мы просто открываем файл в режиме записи, сбрасываем туда информацию и закрываем.

1. //Time to output the data.
2. if ($ext == 'css') {
3.    header("Content-type: text/css");
4.    if ($isCached) {
5.       echo "// Retrieved from cache file. \n";
6.    }
7. } else {
8.    if ($isCached) {
9.       echo '<!-- Retrieved from cache file. -->';
10.    }
11. }

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

Пробуем

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

Заключение

Умение быстро добавить простое кеширование к любому скрипты означает, что Вы идете в верном направлении. Скрипт с кешированием существенно снизит нагрузку на любой сервер.

Статьи по теме:

• Оптимизация .htaccess
• Скрипт для оптимизации загрузки сайта
• Установка eAccelerator на Unix систему
• Настройка SWAP-файла
• Установка Zend Optimizer на Linux