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

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

27.08

153

64 828

Увеличение скорости загрузки сайта на 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 и кеш браузера.
Снова проверяем сайт с помощью гугла (ссылка в начале поста) и радуемся существенному прибавлению баллов.

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

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

Если вы перенесете:
<link media="screen" href="/engine/editor/css/default.css" type="text/css" rel="stylesheet"/>
в конец кода, то НЕ будет оформляться редактор например комментов, т.к. $js_array содержит также и этот default.css...

ПафНутиЙ 3 ноября 2012 23:15

#2339

.css не переносят в конец? т.к. css-файлы имеют первостепенную роль в оформлении сайта.. в конец переносят .js

kabmir 3 ноября 2012 23:30

#2340

... т.к. $js_array содержит также и этот default.css...

ПафНутиЙ 4 ноября 2012 00:10

#2341

Я так понимаю речь идёт о визуальном редакторе. Тогда лучше просто не переносить.
P.S. очень редко кто пользуется визуальным редактором, поэтому я даже не рассматриваю случаи, когда он включен.

kabmir 4 ноября 2012 23:53

#2342

Кстати, интересно ваше мнение - лучше не включать визуальный редактор?

ПафНутиЙ 5 ноября 2012 00:19

#2343

Кому как.
Кто привык руками код писать - вообще не нужен редактор.
А кто копирует из word - без визуальника ну никак, только код в этом случаи лучше не пытаться понять, его зачастую больше, чем самого текста в несколько раз.

lsdoptom 10 декабря 2012 07:43

#2417

ПафНутиЙ а скорость загрузки страниц зависит от хостинга ? у меня на главной 83 на других
75-78 это приемлемо? хостинг бесплатный!

ПафНутиЙ 10 декабря 2012 08:52

#2419

нет. Это показатель оптимизации сайта для ускорения загрузки. Главная страница и внутренние всегда различаются. К примеру полной новости добавляются скрипты, относящиеся к форме добавления комментариев - это уменьшает кол-во баллов т.к. скрипты лежат инлайново.

Arsen 7 января 2013 23:30

#2465

После шага со стилями гриво отображаеться шаблон, как буто стили не прописал

ПафНутиЙ 7 января 2013 23:34

#2466

адрес сайта?

Arsen 8 января 2013 20:30

#2467

ПафНутиЙ,

Цитата: ПафНутиЙ

адрес сайта?

Проблема устранена неправильно прописал имя стилей))) Сайт действительно ускорился))

ПафНутиЙ 8 января 2013 22:40

#2468

отлично!

ecotraid 16 февраля 2013 20:01

#2658

Здравствуйте! А как включить gzip-сжатие для css если в шаблоне такой вывод:

<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>

<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

Спасибо!

ПафНутиЙ 16 февраля 2013 21:25

#2660

@import CSS - зло, откажитесь от подобного вида конструкций и жить станет легче)

ecotraid 16 февраля 2013 21:27

#2661

Подскажите как, только не меняя шаблон.

ПафНутиЙ 16 февраля 2013 21:31

#2663

<link href="{THEME}/css/style.css" rel="stylesheet">
<link href="{THEME}/css/engine.css" rel="stylesheet">

ecotraid 16 февраля 2013 21:33

#2664

ПафНутиЙ,спасибо! Буду пробовать.
Все получилось, и сжатие подключил. Еще раз спасибо!

Gopr 20 июля 2013 23:10

#3073

Пару дней назад поставил первый пункт. Появились проблемы на странице добавления новостей. Перестали появляться подсказки в поле теги. То есть при написании уже существующего тега в этом поле не срабатывало авто заполнение. Еще пропала анимация при добавлении комментов. При нажатии на кнопку "Отправить" страница подпрыгивает до упора вверх. Анимацию удаления не проверял. Сайт на 9.7. Если не заменять {headers}, а дописать после него {metatags} то все нормально. Но такое решение возвращает визуально к стандартам dle и смысл такой оптимизации теряется, поэтому отказался.

ПафНутиЙ 20 июля 2013 23:47

#3075

всё так и должно быть, у вас просто отвалились js, использующие jquery.
не переносите подключение скриптом в футер.

Gopr 21 июля 2013 01:21

#3077

Вроде бы все js перед </body>
Вот так было в main.tpl:
<html>
<head>{metatags} + css</head>
<body>
<div>
<div>шапка</div>
<div>контент</div>
<footer>подвал</footer></div>
{headers}{AJAX} + js</body></html>

ПафНутиЙ 21 июля 2013 01:25

#3078

все ваши js да, но не системые, которые выводятся ~~через жопу~~ в DLE своеобразно.

Golden_Eagle 2 ноября 2013 12:25

#3302

Добрый день, спасибо за статью!!

Я выполнил 1 шаг, 2 шаг пропустил, 3 шаг (2 часть статьи) выполнил,

Выполнив 2 шаг, у меня пошли серьёзные баги, поэтому я его не стал делать.

А после 1,3 шагов у меня оптимизация возрасла до 94%, но PageSpeed ругается на "Удалите из верхней части страницы код javascript и CSS, блокирующий отображение"

Еще у меня перестала работать кнопка: "наверх" и косячно работает "добавление материалов"

Можете зайти глянуть???

Сайт тут http://vk.cc/1WU649
Скан сайта тут http://vk.cc/1WU5Rf

ПафНутиЙ 2 ноября 2013 17:16

#3303

забейте, подобные сайты не нужно оптимизировать)

Golden_Eagle 3 ноября 2013 07:20

#3304

а как быть с нерабочей кнопкой наверх и с нерабочим добавлением материалов?

ПафНутиЙ 3 ноября 2013 13:20

#3306

Учиться пользоваться отладчиком.

Golden_Eagle 4 ноября 2013 13:17

#3308

А где его найти в Chrome?

ScreN 3 июня 2014 17:25

#3753

Все бы классно, но...
После таких манипуляций, перестает работать отправка сообщений CTRL+ENTER в чате + перестает работать плеер. Плеер стоит Media Elements

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

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

Информация

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