|
|
Инструкции, модификации и статьи для DLE Сборник инструкции, модов и статей по движку DataLife Engine |
|
Опции темы | Поиск в этой теме |
29.03.2013, 15:36 Вверх | #1 | |||
Коварный тип
|
Увеличение скорости загрузки сайта на DLE
Увеличение скорости загрузки сайта на 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> вставляем: Код:
{headers} {AJAX} Так же необходимо перенести ниже этих тегов все скрипты, подключаемые к шаблону, иначе теряется смысл оптимизации. Оптимизация номер два - 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> Снова проверяем сайт с помощью гугла (ссылка в начале поста) и радуемся существенному прибавлению баллов. В следующий раз постараюсь рассказать как использовать кеш браузера для ещё большего ускорения страниц. (часть 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 и обновить кеш в админке. |
|||
Cказали cпасибо: |