8Dle
Авторизация

В погоне за Pagespeed (оптимизация DLE). Начало

В погоне за Pagespeed (оптимизация DLE). Начало

Всем привет. Не так давно решил оптимизировать один из своих сайтов. Вернее самый первый мой сайт. Много лет назад были популярны "варезники", на которых была инфа по всем тематикам и т.д. и т.п. За время существования сайта (8 лет) насобиралось немного мусора, а именно: ~2 миллиона фото (включая миниатюры), замурзанная база в 300 мб и старая версия самого движка (v9.6).

На Pagespeed оценки вообще не радовали (~50 баллов), хотя как могли радовать, если я забил на сайт 2 года назад и он жил своей жизнью. И вот наконец-то дошли руки до этого сайта. И как вы уже поняли, данная статья (как и три последующих) будет о том, как качественно оптимизировать сайт, дабы добиться максимально возможных показателей по pagespeed.

Спонсор статьи сайт - http://arenda-zvuka-spb.ru/light.html - Аренда светового оборудования (аренда света, аренда светового оборудования, аренда цветомузыки) в Санкт-Петербурге.

Что с CSS?


Все CSS и JS пакуем через минифаер, который уже есть в DLE. Выглядит сеё дело примерно так:

Где, charset= кодировка сайта, f= все скрипты/стили через запятую, &30 количество дней в кеше браузера юзера.

Лично меня бесила длиннющая строка в шаблоне. В .htaccess в корне сайта после RewriteEngine On вбиваем:
RewriteRule ^all.css$ /engine/classes/min/index.php?charset=windows-1251&f=/templates/тема/css/allsite.css,/templates/тема/css/font-awesome.css,/templates/тема/css/bbcodes.css&30 [QSA]

Через запятую можете прицепить все CSS на сайте. В свою очередь в main.tpl вбиваю всего один стиль:
<link href="/all.css" rel="stylesheet" />

А вот если у вас есть какие-то стили, которые используются только, например, в полной новости или на странице добавления новостей, то лучше их отделить от всей массы. Примерно так:
[aviable=addnews]
    <link href="/add.css" rel="stylesheet" />
[/aviable]
[aviable=showfull]
    <link href="/full.css" rel="stylesheet" />
[/aviable]

С .js файлами мы проводим идентичные операции:
[aviable=showfull]
    <script src="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/js/uppod_api.js,{THEME}/js/jquery.wysibb.min.js,{THEME}/js/fullstory.js&30" type="text/javascript"></script>
[/aviable]

Или же помещаем в .htaccess аналогично со стилями, предварительно поменяв {THEME} на путь к вашей теме. Кстати можно поместить нужные JS в основной массив библиотек groupsConfig.php (об этом ниже).

По поводу JS


Как я надеюсь, всем понятно, что все скрипты мы должны передвинуть в самый низ кода до закрывающего тега . Но что же делать с теми скриптами, которые требует сам DLE и выводит через тег {headers}? Начиная с версии 10.6 был введен новый тег {jsfiles}, который выводит в шаблон 3 файла (библиотеки jquery, jquery-ui и dle_js). До версии 10.6 делалось так:
Заходим в /index.php или /engine/modules/main.php (в зависимости от версии) и ищем:
$tpl->set ( '{headers}', $metatags."\n".$js_array );

И разделяем на два тега шаблона:
$tpl->set ( '{headers}', $metatags );
$tpl->set ( '{jsfiles}', $js_array );

То-есть в main.tpl в мы оставляем {headers}, а перед добавляем
{AJAX}
{jsfiles}

Как вы заметили, {AJAX} находится до {jsfiles}. Тут стоит сделать ремарку. Я привык подгружать jquery с CDN, например так:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
{AJAX}
{jsfiles}

В связи с этим нужно убрать из {jsfiles} встроенные библиотеки. Идем в /engine/modules/functions.php и удаляем/комментируем:
'engine/classes/js/jquery.js',
'engine/classes/js/jqueryui.js',

Далее идем в /engine/classes/min/groupsConfig.php и удаляем/комментируем:
$min_documentRoot . '/engine/classes/js/jquery.js',
$min_documentRoot . '/engine/classes/js/jqueryui.js',


А если хотите вообще по "модному", то можно сделать в таком духе:
'general' => array(
    #$min_documentRoot . '/engine/classes/js/jquery.js',
    #$min_documentRoot . '/engine/classes/js/jqueryui.js',
    $min_documentRoot . '/engine/classes/js/dle_js.js',
    $min_documentRoot . '/templates/Default/js/jquery.cookie.js',
    $min_documentRoot . '/templates/Default/js/ajaxform.js',
    $min_documentRoot . '/templates/Default/js/main.js',
),

И тогда в вашем {jsfiles} уже будут все нужные скрипты. Конечно же при условии включенного кеширования.

Чистим кеш и видим результат! Тем самым мы выполнили 3 правила: Сократите javascript, Сократите CSS и Удалите из верхней части страницы код javascript и CSS, блокирующий отображение. В конце концов наш main.tpl похож на:
<!DOCTYPE html>
<html>
    <head>
        {headers}
        <link href="{THEME}/images/favicon.ico" rel="icon" type="image/x-icon"/>
        <link href="{THEME}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
        <link href="/all.css" rel="stylesheet"/>
        [aviable=showfull]
            <link href="/full.css" rel="stylesheet"/>
        [/aviable]
        [aviable=addnews]
            <link href="/add.css" rel="stylesheet"/>
        [/aviable]
    </head>

    <body>
        {content}
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        {AJAX}
        {jsfiles}
        [aviable=showfull]
            <script src="/full.js"></script>
        [/aviable]
        [aviable=addnews]
            <script src="/add.js"></script>
        [/aviable]
    </body>
</html>

Пожалуй дальнейший рассказ перенесу в следующую статью. Далее мы поговорим об отложенной подгрузке скриптов и сжатии. Тем самым выполним еще 4 правила. Надеюсь, вам было интересно. Можете задавать вопросы :)

Жмите на Кнопу ниже, или подписывайтесь!


Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Dle это движок который изначально проектировался для создания новостных сайтов, но по мере своего развития движка значительно расширил свою функциональность и стал универсальным средством разработки и сопровождения сайтов и блогов различной направленности и тематики. По сравнению с другими бесплатными (и некоторыми платными) CMS системами движок dle обладает довольно обширными возможности.

Авторизация