Google PageSpeed рекомендации для Joomla

Одна из рекомендаций Гугл Page Speed, гласит: - "Используйте кэш браузера"!

Для этого используем файл .htaccess...

Вообще рекомендаций у "PageSpeed" довольно много, большинство можно сделать без использования доп. средств...

Наиболее часто приходится видеть следующее:

Используйте кэш браузера

Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.

Чтобы это исправить, добавим следующие строки в файл .htaccess:

# 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=10800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

После проверки, так же можно изменить время кэширования.

Обычно этого хватает!

Другой вариант

<IfModule mod_expires.c>
<FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresActive on
ExpiresByType image/jpeg "access plus 7 day"
ExpiresByType image/gif "access plus 7 day"
ExpiresByType image/png "access plus 7 day"
<FilesMatch \.(css|js)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Для скриптов и стилей лучше задать другое время кэширования, т.к. после обновления расширений могут меняться и они!

JPEG 2000, JPEG-XR или webp

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

Проблему пока решает использование lazy-loading плагинов, например такого: http://jquery.eisbehr.de/lazy/. На мой взгляд, на сайтах, где много изображений, такой подход в любом случае будет полезен.

JS

Всем скриптам которые используют jquery добавить defer, не использующим async.

Счетчики, консультанты и т.п.

Нашел вот такой пример оптимизации кода консультанта Jivosite, 

<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ document.jivositeloaded=0;var widget_id = 'ВАШ_ID';var d=document;var w=window;function l(){var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}//эта строка обычная для кода JivoSite
function zy(){
    //удаляем EventListeners
    if(w.detachEvent){//поддержка IE8
        w.detachEvent('onscroll',zy);
        w.detachEvent('onmousemove',zy);
        w.detachEvent('ontouchmove',zy);
        w.detachEvent('onresize',zy);
    }else {
        w.removeEventListener("scroll", zy, false);
        w.removeEventListener("mousemove", zy, false);
        w.removeEventListener("touchmove", zy, false);
        w.removeEventListener("resize", zy, false);
    }
    //запускаем функцию загрузки JivoSite
    if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}
    //Устанавливаем куку по которой отличаем первый и второй хит
    var cookie_date = new Date ( );
    cookie_date.setTime ( cookie_date.getTime()+60*60*28*1000); //24 часа для Москвы
    d.cookie = "JivoSiteLoaded=1;path=/;expires=" + cookie_date.toGMTString();
}
if (d.cookie.search ( 'JivoSiteLoaded' )<0){//проверяем, первый ли это визит на наш сайт, если да, то назначаем EventListeners на события прокрутки, изменения размера окна браузера и скроллинга на ПК и мобильных устройствах, для отложенной загрузке JivoSite.
    if(w.attachEvent){// поддержка IE8
        w.attachEvent('onscroll',zy);
        w.attachEvent('onmousemove',zy);
        w.attachEvent('ontouchmove',zy);
        w.attachEvent('onresize',zy);
    }else {
        w.addEventListener("scroll", zy, {capture: false, passive: true});
        w.addEventListener("mousemove", zy, {capture: false, passive: true});
        w.addEventListener("touchmove", zy, {capture: false, passive: true});
        w.addEventListener("resize", zy, {capture: false, passive: true});
    }
}else {zy();}
})();</script>
<!-- {/literal} END JIVOSITE CODE -->

 

Ссылки и благодарности

Решения: