Treburi serioase - Google Page Speed Isights!

[vertedi]

La majoritatea website-urilor mele am combinat CSS-urile si le-am comprimat.

Ce am invatat eu despre optimizarea on-page a unui website:
- combinarea CSS-urilor si incarcate dintr-un CSS, comprimat. Eu prefer sa il incarc din root sau CDN
- la fel cu fisierele JS, insa nu este posibil tot timpul.
- declararea dimensiunilor pentru imagini. Foarte multe scripturi nu au declarata dimensiunea la thumbnail sau slidere, lucru care scade procentul de optimizare
- coduri in .htaccess, care ajuta la cache, imagini, JS-uri, etc. Iata ce am in .htaccess:

FileETag none
ExpiresActive On
ExpiresByType image/ico A15552000
ExpiresByType image/gif A31556926
ExpiresByType image/png A31556926
ExpiresByType image/jpg A31556926
ExpiresByType image/jpeg A31556926
ExpiresByType text/javascript A31556926
ExpiresByType text/css A31556926
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$" >
Header set Cache-Control "max-age=31556926, public"
</FilesMatch>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/ico "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Header set Cache-Control "public"
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/ico A2592000
Expiresbytype text/js A21600
Expiresbytype text/js "access plus 1 year"
ExpiresByType text/php "access plus 1 year"
ExpiresByType text/html "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
Header set Cache-Control "public"
ExpiresByType image/jpg "access plus 1 year"
Header set Cache-Control "public"
ExpiresByType image/jpeg "access plus 1 year"
Header set Cache-Control "public"
ExpiresByType image/png "access plus 1 year"
Header set Cache-Control "public"
ExpiresByType image/x-icon "access plus 1 month"

<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

<IfModule mod_headers.c>
<FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|sw f|tif|tiff)$">
Header set Last-Modified "Mon, 31 Aug 2010 00:00:00 GMT"
</FilesMatch>
</IfModule>

Exista servere slab configurate care nu suporta toate codurile insa, se poate rezolva si acolo. Eu am intalnit unul in Germania si unul in Austria, in rest bine peste tot.

Pentru optimizarea imaginilor si a fisierelor CSS, sau JS, care nu pot fi combinate, folosesc Page Speed, pentru Firefox. La website-urile statice PHP sau HTML, procentul de optimizare poate ajunge la 100%, testand cu Page Speed, pentru firefox. Cu Page Speed Insights, nu ai cum sa ajungi la asemenea procent. Acolo ar trebui sa ai un website fara CSS, sau JS.

Diferente intre Page Speed Firefox si Insights:

- site cu 100/100 optimizare la Page Speed, are 92 cu 98, la Insights
- site cu 99/100 optimizare la Page Speed, are 86 cu 92, la Insights - aici se incarca de pe un server din Romania, destul de slab