Инфо Joomla - радикальная оптимизация скорости по PageSpeed Insights

jabbaxatt

jabbaxatt

Добрый модератор
Регистрация
21 Янв 2009
Сообщения
902
Реакции
432
Хочу рассмотреть оптимизацию скорости загрузки сайта на Joomla в соответствии с гугл сервисом - Для просмотра ссылки Войди или Зарегистрируйся

Основные моменты требующие рассмотрения там следующие:

1) Оптимизация изображений. Самое простое. По итогам созданной мною отдельной темы - Для просмотра ссылки Войди или Зарегистрируйся остановился на Image Catalyst - Для просмотра ссылки Войди или Зарегистрируйся (хотя там есть ещё пара других интересных вариантов) Тут всё просто. Кинули папочку с сайтом на иконку, и все картинки с оптимизировались разом. Красота. Аж душа радуется.

2) Кеширование в браузере. Тут по итогам всяческих проб и ошибок - я добавляю в локальный конфиг ngix строки
Код: 
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf)$ {
                    expires max;
}
И это похоже это оно, по крайней мере для картинок работает. Не знаю стоит ли кешировать так css и js. И можно ли\нужно так же кешировать flv ролики.

Если статика обрабатывается не ngix а apache - то вы добавляете несколько строк в .htaccess - инструкций в сети море.

Но в общем, тут могут быть уточнения от Вас - ибо в конфигурировании ngix и apache я нуб.

3) Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение
А тут начинается хардкор. Ибо мои скрипты и css в шаблоне - я могу тасовать как хочу.
А вот 15+ скриптов и стилей Joomla и всяких плагинов выводимых замечательной строкой
Код: 
<jdoc:include type="head" />
уже не поддаются. И риск разных глюков с картинными галереями, слайдерами и т.д. сильно возрастает.
Что с ними делать по уму?

Про Wordpress - Для просмотра ссылки Войди или Зарегистрируйся, а вот Joomla разобрать никто не озаботился.
В общем - этот вопрос пока основной, по которому жду советов.

4) Включите сжатие с помощью функций gzip или deflate
На это я решил забить. Производительность моего сервера мне важнее небольшой экономии по трафику. Но прав ли я, или нет - не знаю. Если не прав - кинте ссылку на инструкцию, как включить\настроить.
 
astass написал(а):
Для просмотра ссылки Войди или Зарегистрируйся неплохой онлайн сервис который сжимает картинки без потерь.
Нажмите для раскрытия...
По картинкам оптимальное решение найдено. А сей сервис не способен в один клик оптимизировать все 100500 картинок сайта раскиданных в 1050 разных папок с сохранением имён и структуры. А без этого - любой сервис тлен - ибо время.
 
Именно по этому я сначала оптимизирую картинки, и только потом ставлю их. По поводу остальных советов от гоши по скорости можно не заморачиваться. Максимум что полезно это сжимать картинки и CSS. Если скорость в пределах 60 уже норм.
 
Очень много экспериментов было с оптимизацией.
Гугл после теста кстати сам дает урезанные картинки, css, js файлы. которые можно СКАЧАТЬ и ЗАМЕНИТЬ
В конце списка рекомендаций ест строка
Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы
GZIP дает и прирост бала в спид тесте и иногда даже помогает отдавать быстрее страницу
Например проверяю параллельно еще тут Для просмотра ссылки Войди или Зарегистрируйся хороший аналог который скажет кто подтормаживает загрузку
В настройки сервера я не влажу из-за отсутствия знаний и иногда даже потому что у клиента самый обычный хостинг.

Вот пример с пары сайтов файла htaccess
<IfModule mod_deflate.c>
#AddOutputFilterByType DEFLATE text/plain
#AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/javascript
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>
Header set Cache-Control "max-age=43200"
# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>
# использование кеша браузеров
# Enable expiration control
# Default expiration: 1 hour after request
ExpiresDefault "access plus 1 year"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 year"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jp2 "access plus 1 month"
ExpiresByType image/pipeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/tiff "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/icon "access plus 1 month"
ExpiresByType text/ico "access plus 1 month"
ExpiresByType application/ico "access plus 1 month"
ExpiresByType image/vnd.wap.wbmp "access plus 1 month"
ExpiresByType application/vnd.wap.wbxml "access plus 1 month"

# Включаем кэш в браузерах посетителей
<FilesMatch "\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">
Header set Cache-Control "max-age=2592000, must-revalidate"
</FilesMatch>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>
Готовилось все методом тыка мата и многА пива. Просто без знаний особенностей настройки, но это дало свои отличные результаты.
 
jabbaxatt написал(а):
И это похоже это оно, по крайней мере для картинок работает. Не знаю стоит ли кешировать так css и js. И можно ли\нужно так же кешировать flv ролики.
Нажмите для раскрытия...
expires max; стоит ставить для всего потенциально статичного и пользователь и ваш сервер от этого только выиграет.
Изменения js/css очень желательно разруливать через версионирование, например подставляя GET параметр: *.css?ver=0.01
 
по поводу JS и CSS:

смотрю какие JS и CSS подрубаются из компонентов и модулей
нужно пробежать по всем компонентам сайта, чтобы собрать максимальную картину какие JS и CSS подключатся в целом

потом беру эти JS (модулей и компонентов) и вкидываю в JS(в конце файла) шаблона. как правило шаблоны хоть какой-то но JS подрубают
ну а если не подрубает - то просто создаю его и потом подключаю в шаблоне. а из компонентов и модулей удаляют их вставку

аналонично с CSS. ну и CSS можно немного минимизировать
хотя бы чтобы каждый селектор начинался с новой строки, а то вообще потом править полностью минифицированный CSS не особо удобно

в итоге получается, что до 15 CSS и 15 JS файлов превращаются в 2 файла
основная проблема остается только с системными JS которые касаются ядра joomla - я их не трогаю

эффект сразу виден - сайт грузится быстрее так как запросов к серверу гораздо меньше

ну и часто бывает такое, что общий CSS в итоге содержит повторения, так как многие ссвременные компоненты любят компилить less и в него добавляют бустрап, а он зачастую уже подрублен самой joomla. так что итоговый файл CSS потом еще и урезается от повторений
 
kolio написал(а):
по поводу JS и CSS:

основная проблема остается только с системными JS которые касаются ядра joomla - я их не трогаю
Нажмите для раскрытия...
Из за обновлений? или по каким - то другим причинам?
 
Генко, у меня вопрос по поводу спойлера 2

# использование кеша браузеров
# Enable expiration control
# Default expiration: 1 hour after request
ExpiresDefault "access plus 1 year"

насколько я понял: для всего по умолчанию ставится кеш в 1 год, но как быть с самой страницей (допустим главная)?
я так понял она тоже закешируется и не будет тянуться ровно год?
так как ниже идут уменьшения кеширования до 1 недели для медийных и некоторых статических файлов

просто у тебя в спойлерах ничего не сказано про Content-Type text/html

jabbaxatt написал(а):
Из за обновлений? или по каким - то другим причинам?
Нажмите для раскрытия...

от части это версионность ядра joomla
а в остальном потому, что админка тоже подргружает иногда эти файлы и зачастую все они ей не нужны
а искать по всем компонентам админки где каждый из них подрубается - не охота

и зачастую js и css не подрубается именно через addScript или addStylesheet, а через через вот такие хрени:
JHtml::_('behavior.formvalidator');
JHtml::_('formbehavior.chosen', 'select');

в общем потом очень тяжело на модифицированный движок натягивать новые обновления
иногда приходится сравнивать уже готовый сайт с распакованным апдейтом чтобы найти свои правки + применить их изменения
это удобно делать в araxis merge
 
Последнее редактирование модератором:
Генко, у меня вопрос по поводу спойлера 2

# использование кеша браузеров
# Enable expiration control
# Default expiration: 1 hour after request
ExpiresDefault "access plus 1 year"

насколько я понял: для всего по умолчанию ставится кеш в 1 год, но как быть с самой страницей (допустим главная)?
я так понял она тоже закешируется и не будет тянуться ровно год?
так как ниже идут уменьшения кеширования до 1 недели для медийных и некоторых статических файлов

просто у тебя в спойлерах ничего не сказано про Content-Type text/html
Нажмите для раскрытия...
а я хз, гуглил все подряд, честно проблем никаких не возникало, это кэш не на серве, а в браузере, если что можно сделать ctrl+f5, и по идее если браузер видит что на странице что то радикально сменилось он сам заменяет кэш
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху