ПафНутиЙ-Блог » Разное » Увеличение скорости загрузки сайта на DLE (часть 1) обновлено

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

27.08

153

64 789

Увеличение скорости загрузки сайта на 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-сжатие скриптов и стилей

Теперь самое простое и интересное: включаем 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& - указание на кодировку файла (можно удалить если нет русских символов в файле или сайт на 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&amp;f={THEME}/js/libs.js,{THEME}/js/somesctipt.js&amp;7"></script>
```
В итоге существенно увеличивается скорость загрузки страниц. Однако нужно иметь ввиду, что при редактировании файлов необходимо очищать кеш DLE и кеш браузера.
Снова проверяем сайт с помощью гугла (ссылка в начале поста) и радуемся существенному прибавлению баллов.

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

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

А... Вот оно че. То есть чтобы нормально работало, нужно вынести все скрипты которые внутри документа в отдельные js файлы? И тогда заработает? Только я все равно не понял почему в чате перестала работать связка CTRL+ENTER

ПафНутиЙ 7 июня 2014 23:42

#3765

адрес сайта?

Inperations 6 сентября 2014 00:24

#4047

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

#4050

Простите, не понимаю вас.
Дайте ссылку на сайт.

Inperations 6 сентября 2014 21:02

#4051

http://lnc24.ru/

ПафНутиЙ 6 сентября 2014 23:17

#4052

https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=http%3A%2F%2Flnc24.ru%2F&tab=desktop от же всё написано.
Вот тут про сжатие есть.

Kenas 8 октября 2014 04:41

#4201

ПафНутиЙ, Уважаемый ПафНутиЙ выручайте :)
&7 - количество дней, на которое кешируется файл.
Как изменить на минуты пример на 5 минут.
У меня новостный сайт, соответственно частое обновление контента. Пользователи в прямом смысле "висят" на сайте. Жду ответа :)

Kenas 8 октября 2014 04:49

#4202

Да и коль я туть...)
http://pafnuty.name/others/133-pagespeed-2.html - тож поставил. Что посуветуете для новостного сайта, где каж. день 30-50 материалов !?

ПафНутиЙ 8 октября 2014 15:54

#4204

А зачем кешировать статику на 5 минут?
Для того чтобы дать совет, нужно узнать какие проблемы имеются :)

Kenas 8 октября 2014 19:51

#4208

ПафНутиЙ,
Из всех css думаю сделал один стиль и сжать его. Буду пробовать использовать спрайты. (это хорошо да ведь?)
Вообще я аматор, дык сайту год, ну и моей "веб-карьере" тоже год)
Проблема:
1) Google Page Speed кричит чтобы "включить сжатие"
2)"Воспользоваться кэшированием браузера".
3)"Выключить блокировку воспроизведения javascript и CSS в содержании вверху страницы".
Объясните пожалуйста на пальцах, в долгу не останусь, даже за пивом сгоняю :)

ПафНутиЙ 8 октября 2014 19:53

#4209

давайте адрес сайта, гляну хоть что там гугл говорит.

Kenas 8 октября 2014 21:39

#4210

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Finferma.net&tab=desktop

Demo site smile

ПафНутиЙ 9 октября 2014 12:17

#4213

Забейте.
Сначала запустите сайт, потом делайте оптимизацию.

Kenas 9 октября 2014 20:02

#4216

Сайт запущен на даном сайте я "рисую" шаблон.
Подкиньте несколько идей,подсказок )
Хоть до 80-85 дотянуть в гугле, потом натяну шаблон.

Kenas 9 октября 2014 23:55

#4217

Роздуплился.
У меня nginx. Гугл все же ругает чтобы включить кэш.
CSS и JS теперь кэшируются. Возможно как-то кэшировать картинки c nginx браузером ?

жирный_кот 8 ноября 2014 07:00

#4308

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

ПафНутиЙ 8 ноября 2014 11:21

#4309

да вроде как рассказал уже давно

arriah 7 февраля 2015 05:59

#4569

Подскажите пожалйста,

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

Версия DLE 10.4

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

Спасибо

ПафНутиЙ 9 февраля 2015 19:44

#4573

в index.php подключается файл, ищите нужный код в нём.
если еcть nginx и есть возможность пересобрать - поставьте pagespeed для nginx

arriah 10 февраля 2015 21:04

#4583

ПафНутиЙ,
пересобрать возможность есть. но к сожалению под freebsd этот порт имеет broken. Можно конечно собрать, но предпочитаю собирать из портов.
И поводу сжатия, если не использовать pagespeed - где его предпочтительнее включать - на сервере или все же на DLE?

ПафНутиЙ 10 февраля 2015 22:31

#4587

лучше конечно же через nginx т.к. он статику на порядки эффективнее отдаёт.

lineup 17 марта 2015 10:45

#4684

Здравствуйте. На DLE 10.3 не могу разделить headers. Оно то в принципе все получается, но в итоге я вижу страницу с иероглифами, и без метатегов соответственно.

ПафНутиЙ 17 марта 2015 10:49

#4685

Не разделяйте. Если у вас после элементарных действий всё развалилось — лучше отложить до лучших времён, ведь после разделения ещё отломится некоторый js-функционал сайта.

lineup 17 марта 2015 10:53

#4686

Спасибо за оперативность. То я с утра немного ну проснулся еще... wink

В общем я на 100 процентов был уверен, что все делал правильно, но редактировал вместо рабочего шаба другой what

Только вот после того, как написал коммент, увидел, что ковыряю не там wink

Спасибо еще раз.

Кста, после переноса, insights показал на моб версии 97/100. Немного не хватило до соточки.

dada 18 марта 2015 08:41

#4687

Привет!
Я не могу разобрать второй этап оптимизации где искать и где заменять? где они эти строки должны быть?

<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

#4688

А где вы обычно прописываете подключение стилей и скриптов?

dada 18 марта 2015 09:09

#4689

и как быть с таким скриптом?

<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 18 марта 2015 09:12

#4690

ПафНутиЙ,
удивляюсь вашей отзывчивости, большая редкость на сегодняшний день. Ну а ответ на ваш вопрос, о уважаемый, если бы я знал?!))

dada 18 марта 2015 09:43

#4691

извиняюсь за балаган, что тут устраиваю, но к сожалению не могу удалить или хотя бы совместить комментарии. большое спасибо за ваш труд, вроде во всем разобрался и ошибок не обнаружил. bully

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

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

Информация

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