Всем привет. Не так давно решил оптимизировать один из своих сайтов. Вернее самый первый мой сайт. Много лет назад были популярны "варезники", на которых была инфа по всем тематикам и т. д. и т. п. За время существования сайта (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 правила. Надеюсь, вам было интересно.