В погоне за 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 вбиваем:

Через запятую можете прицепить все CSS на сайте. В свою очередь в main. tpl вбиваю всего один стиль:

А вот если у вас есть какие-то стили, которые используются только, например, в полной новости или на странице добавления новостей, то лучше их отделить от всей массы. Примерно так:

С .js файлами мы проводим идентичные операции:

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

По поводу JS

Как я надеюсь, всем понятно, что все скрипты мы должны передвинуть в самый низ кода до закрывающего тега. Но что же делать с теми скриптами, которые требует сам DLE и выводит через тег ? Начиная с версии 10.6 был введен новый тег , который выводит в шаблон 3 файла (библиотеки jquery, jquery-ui и dle_js). До версии 10.6 делалось так:

Заходим в /index. php или /engine/modules/main. php (в зависимости от версии) и ищем:

И разделяем на два тега шаблона:

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

Как вы заметили, находится до . Тут стоит сделать ремарку. Я привык подгружать jquery с CDN, например так:

В связи с этим нужно убрать из встроенные библиотеки. Идем в /engine/modules/functions. php и удаляем/комментируем:

Далее идем в /engine/classes/min/groupsConfig. php и удаляем/комментируем:

А если хотите вообще по "модному", то можно сделать в таком духе:

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

Чистим кеш и видим результат! Тем самым мы выполнили 3 правила: Сократите javascript, Сократите CSS и Удалите из верхней части страницы код javascript и CSS, блокирующий отображение. В конце концов наш main. tpl похож на:

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