Увеличение скорости загрузки сайта на DLE
(часть 1)
Всем известно, что DLE - один из самых быстрых движков. Но не все знают о возможности его ускорения простыми средствами.
В статье мы будем рассматривать уже более-менее оптимизированный сайт, на котором скрипты и стили вынесены в файлы, а не лежат по всем шаблонам инлайново.
Оптимизация номер один - размещение скриптов на странице
ВНИМАНИЕ!
Не советую производить первый шаг если не разбираетесь в подключении скриптов. Т.к. скорее всего при этом будет много ошибок js на разных страницах сайта.
Первое, что проще всего сделать в чистой вёрстке для ускорения страницы - положить все скрипты в конец страницы, перед тегом </body>.
В DLE такого нет и мы это исправим.
Открываем index.php
Для DLE до версии 9.6
находим:
Код:
$tpl->set ( '{headers}', $metatags."\n".build_js($js_array, $config) );
меняем на:
Код:
$tpl->set ( '{headers}', build_js($js_array, $config) );
$tpl->set ( '{metatags}', $metatags );
Для DLE 9.6 (и скорее всего более поздних версий)
находим:
Код:
$tpl->set ( '{headers}', $metatags."\n".$js_array );
меняем на:
Код:
$tpl->set ( '{headers}', $js_array );
$tpl->set ( '{metatags}', $metatags );
Это разделит метатеги и скрипты. Иначе не получится правильно оформить страницу.
Открываем main.tpl
Находим {headers} и заменяем на {metatags}
Находим и удаляем {AJAX}
Перед </body> вставляем:
Важно эти теги вставить до вызова всяких счётчиков и сторонних скриптов типа VK и т.д.
Так же необходимо перенести ниже этих тегов все скрипты, подключаемые к шаблону, иначе теряется смысл оптимизации.
Оптимизация номер два - gzip-сжатие скриптов и стилей
1. Теперь самое простое и интересное: включаем gzip-сжатие для js и css, лежащих в шаблоне.
Для этого необходимо пройти в админку и включить сжатие js-файлов. Далее:
Предположим у нас есть 2 файла стилей:
Код:
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
Заеняем эти строки на:
Код:
<link rel="stylesheet" href="/engine/classes/min/index.php?charset=windows-1251&f={THEME}/style/styles.css,{THEME}/style/engine.css&7" />
Где:
charset=windows-1251& - указание на кодировку файла (можно удалить если нет русских символов в файле или сайт на utf-8)
&7 - количество дней, на которое кешируется файл.
Таким же образом поступаем с перенесёнными в конец main.tpl (если всё же решили проделать первый шаг) дополнительными скриптами:
Код:
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<script type="text/javascript" src="{THEME}/js/somesctipt.js"></script>
превращаем в:
Код:
<script type="text/javascript" src="/engine/classes/min/index.php?charset=windows-1251&f={THEME}/js/libs.js,{THEME}/js/somesctipt.js&7"></script>
В итоге существенно увеличивается скорость загрузки страниц. Однако нужно иметь ввиду, что при редактировании файлов необходимо очищать кеш DLE и кеш браузера.
Снова проверяем сайт с помощью гугла (ссылка в начале поста) и радуемся существенному прибавлению баллов.
В следующий раз постараюсь рассказать как использовать кеш браузера для ещё большего ускорения страниц.
(часть 2)
Все браузеры давно умеют кешировать статические данные (картинки, скрипты, css и т.д.), но для этого веб-сервер должен сообщить браузеру на сколько он должен кешировать эти данный с момента первого обращения к этим данным. Т.е. Если пользователь зашёл на сайт - загрузились к примеру 4 скрипта по 10кб - это 40кб, вроде бы не страшно, однако при каждом переходе по страницам сайта браузер будет загружать эти скрипты вновь и вновь, потому что думает, что скрипт обновляется при каждом обращении к нему. Поэтому логично "сказать" браузеру, что бы он проверял не обновился ли этот скрипт не при каждом обращении, а лишь раз в месяц или раз в год.
Как раз для указания "времени жизни" закешированных данных, правильной обработки HTTP-заголовков браузерами и предназначен этот код:
Код:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# html
ExpiresByType text/html "access plus 0 seconds"
# XML
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
# RSS
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon
ExpiresByType image/x-icon "access plus 1 week"
# Картинки
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
# HTC файлы (например css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Нестандартные шрифты сайта
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS и javascript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
# Cache-Control браузера
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>
<IfModule mod_setenvif.c>
#Эта конструкция для говнобраузера
#Запрет отдачи HTTP-заголовков Vary
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>
Как видно код разбит на блоки-условия. Если какой то из используемых в коде модулей не включен - блок будет пропущен.
Так же в коде прокомментированы сроки, на которые кешируются статические данные и представлен фикс для IE.
Представленный код - результат сбора данных с разных источников и оптимизации его под DLE. Для подключения его нужно вставить в самое начало файла .htaccess и обновить кеш в админке.
