» » Увеличение скорости загрузки сайта на DLE (часть 1) обновлено

Увеличение скорости загрузки сайта на DLE (часть 1) обновлено

27.08
153
61 782
Увеличение скорости загрузки сайта на 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}

Важно эти теги вставить до вызова всяких счётчиков и сторонних скриптов типа 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&amp;f={THEME}/style/styles.css,{THEME}/style/engine.css&amp;7" />

    Где:
    charset=windows-1251&amp; - указание на кодировку файла (можно удалить если нет русских символов в файле или сайт на utf-8)
    &amp;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&amp;f={THEME}/js/libs.js,{THEME}/js/somesctipt.js&amp;7"></script>

    В итоге существенно увеличивается скорость загрузки страниц. Однако нужно иметь ввиду, что при редактировании файлов необходимо очищать кеш DLE и кеш браузера.
  2. Снова проверяем сайт с помощью гугла (ссылка в начале поста) и радуемся существенному прибавлению баллов.


В следующий раз постараюсь рассказать как использовать кеш браузера для ещё большего ускорения страниц.

Похожие материалы

Комментарии

ПафНутиЙ
ПафНутиЙ 3 июня 2014 18:10
Начало статьи читали?
ScreN
ScreN 4 июня 2014 03:38
А... Вот оно че. То есть чтобы нормально работало, нужно вынести все скрипты которые внутри документа в отдельные js файлы? И тогда заработает? Только я все равно не понял почему в чате перестала работать связка CTRL+ENTER
ПафНутиЙ
ПафНутиЙ 7 июня 2014 23:42
адрес сайта?
Inperations
Inperations 6 сентября 2014 00:24
PageSpeed Просит добавить файл я его превращаю в <script type="text/javascript" src="/engine/classes/min/index.php?charset=windows-1251&f={THEME}/js/libs.js,{THEME}/js/somesctipt.js&7"></script>

тока вписываю свой файл. Но потом PageSpeed Просит уже добавит не просто файл а Превращеный(( Что не так?
ПафНутиЙ
ПафНутиЙ 6 сентября 2014 20:18
Простите, не понимаю вас.
Дайте ссылку на сайт.
Inperations
Inperations 6 сентября 2014 21:02
http://lnc24.ru/
ПафНутиЙ
ПафНутиЙ 6 сентября 2014 23:17
https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=http%3A%2F%2Flnc24.ru%2F&tab=desktop от же всё написано.
Вот тут про сжатие есть.
Kenas
Kenas 8 октября 2014 04:41
ПафНутиЙ, Уважаемый ПафНутиЙ выручайте :)
&7 - количество дней, на которое кешируется файл.
Как изменить на минуты пример на 5 минут.
У меня новостный сайт, соответственно частое обновление контента. Пользователи в прямом смысле "висят" на сайте. Жду ответа :)
Kenas
Kenas 8 октября 2014 04:49
Да и коль я туть...)
http://pafnuty.name/others/133-pagespeed-2.html - тож поставил. Что посуветуете для новостного сайта, где каж. день 30-50 материалов !?
ПафНутиЙ
ПафНутиЙ 8 октября 2014 15:54
А зачем кешировать статику на 5 минут?
Для того чтобы дать совет, нужно узнать какие проблемы имеются :)
Kenas
Kenas 8 октября 2014 19:51
ПафНутиЙ,
Из всех css думаю сделал один стиль и сжать его. Буду пробовать использовать спрайты. (это хорошо да ведь?)
Вообще я аматор, дык сайту год, ну и моей "веб-карьере" тоже год)
Проблема:
1) Google Page Speed кричит чтобы "включить сжатие"
2)"Воспользоваться кэшированием браузера".
3)"Выключить блокировку воспроизведения javascript и CSS в содержании вверху страницы".
Объясните пожалуйста на пальцах, в долгу не останусь, даже за пивом сгоняю :)
ПафНутиЙ
ПафНутиЙ 8 октября 2014 19:53
давайте адрес сайта, гляну хоть что там гугл говорит.
Kenas
Kenas 8 октября 2014 21:39
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Finferma.net&tab=desktop

Demo site smile
ПафНутиЙ
ПафНутиЙ 9 октября 2014 12:17
Забейте.
Сначала запустите сайт, потом делайте оптимизацию.
Kenas
Kenas 9 октября 2014 20:02
Сайт запущен на даном сайте я "рисую" шаблон.
Подкиньте несколько идей,подсказок )
Хоть до 80-85 дотянуть в гугле, потом натяну шаблон.
Kenas
Kenas 9 октября 2014 23:55
Роздуплился.
У меня nginx. Гугл все же ругает чтобы включить кэш.
CSS и JS теперь кэшируются. Возможно как-то кэшировать картинки c nginx браузером ?
жирный_кот
жирный_кот 8 ноября 2014 07:00
Пафнутий, кода напишешь статью.
В следующий раз постараюсь рассказать как использовать кеш браузера для ещё большего ускорения страниц.
ПафНутиЙ
ПафНутиЙ 8 ноября 2014 11:21
arriah
arriah 7 февраля 2015 05:59
Подскажите пожалйста,

В Index.php нет таких строк, какие указаны в начале статьи, нашел их тут: engine/modules/main.php

Версия DLE 10.4

И еще вопрос по сжатию.
У меня nginx. Как лучше включать сжатие - средствами DLE или на стороне nginx? Пробовал включать и там и там, отваливаются некоторые скрипты.

Спасибо
ПафНутиЙ
ПафНутиЙ 9 февраля 2015 19:44
в index.php подключается файл, ищите нужный код в нём.
если еcть nginx и есть возможность пересобрать - поставьте pagespeed для nginx
arriah
arriah 10 февраля 2015 21:04
ПафНутиЙ,
пересобрать возможность есть. но к сожалению под freebsd этот порт имеет broken. Можно конечно собрать, но предпочитаю собирать из портов.
И поводу сжатия, если не использовать pagespeed - где его предпочтительнее включать - на сервере или все же на DLE?
ПафНутиЙ
ПафНутиЙ 10 февраля 2015 22:31
лучше конечно же через nginx т.к. он статику на порядки эффективнее отдаёт.
lineup
lineup 17 марта 2015 10:45
Здравствуйте. На DLE 10.3 не могу разделить headers. Оно то в принципе все получается, но в итоге я вижу страницу с иероглифами, и без метатегов соответственно.
ПафНутиЙ
ПафНутиЙ 17 марта 2015 10:49
Не разделяйте. Если у вас после элементарных действий всё развалилось — лучше отложить до лучших времён, ведь после разделения ещё отломится некоторый js-функционал сайта.
lineup
lineup 17 марта 2015 10:53
Спасибо за оперативность. То я с утра немного ну проснулся еще... wink В общем я на 100 процентов был уверен, что все делал правильно, но редактировал вместо рабочего шаба другой what Только вот после того, как написал коммент, увидел, что ковыряю не там wink Спасибо еще раз.

Кста, после переноса, insights показал на моб версии 97/100. Немного не хватило до соточки.
dada
dada 18 марта 2015 08:41
Привет!
Я не могу разобрать второй этап оптимизации где искать и где заменять? где они эти строки должны быть?
<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" />


может быть все там же, индекс и маин?
ПафНутиЙ
ПафНутиЙ 18 марта 2015 08:49
А где вы обычно прописываете подключение стилей и скриптов?
dada
dada 18 марта 2015 09:09
и как быть с таким скриптом?
<script>
        !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
            if(!d.getElementById(id)){
                js=d.createElement(s);
                js.id=id;
                js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
    
dada
dada 18 марта 2015 09:12
ПафНутиЙ,
удивляюсь вашей отзывчивости, большая редкость на сегодняшний день. Ну а ответ на ваш вопрос, о уважаемый, если бы я знал?!))
dada
dada 18 марта 2015 09:43
извиняюсь за балаган, что тут устраиваю, но к сожалению не могу удалить или хотя бы совместить комментарии. большое спасибо за ваш труд, вроде во всем разобрался и ошибок не обнаружил. bully

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

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