Dans le monde du SEO, tout le monde vous dira que le temps de chargement d’une page est important. Sur chaque site, les actions différent, et pour connaitre les optimisations possibles qu’il vous est possible de mettre en place le plus simple est encore de vous rendre sur le Google Page Speed.
Prenons l’exemple d’un WordPress.
Tout d’abord, ajoutez le code #1 en base de page dans votre fichier .htaccess, c’est la base de la base (compression+cache des fichiers qui ne changent pas).
Ensuite, essayez de mettre en place des plugins pour optimiser vos js, et css comme WP_Minify.
Ce plugin va concaténer tous les appels aux différents fichiers. Au liue d’appeler 10 javascripts, vous n’en appelerez qu’un seul. Même chose pour le css.
Si vous voyez que votre site ne marche plus aussi bien qu’avant, alors il faut indiquer tous les js dans le plugin pour lui dire de ne pas les prendre en compte, puis les supprimer un par, jusqu’a temps de voir lesquels posent vraiment problème et ne doivent pas être intégrés à l’optimisation.
Enfin pour passer à la partie qui nous intéresse : le chargement des images pendant le scroll de l’utilisateur. Il faut intégrer le javascript Lazy Load disponible ici.
Ajoutez le code suivant:
<script type="text/javascript" src="jquery.lazyload.js"></script><script type="text/javascript">// <![CDATA[
$("img.lazy").lazyload();
// ]]></script>
Plusieurs options sont disponibles pour ajouter un effet de fondu, ou différer le chargement de plusieurs pixels avant la ligne de flottaison. A vous de voir.
Si le scroll intéresse certain d’entre vous , alors regardez aussi ce plugin Jquery JQuery Scroll.
Il permet de faire scroller directement l’internaute a une partie de la page (un peu comme une ancre) mais sans modifier l’url.
Code #1 (.htaccess)
# compress text, html, javascript, css, xml: 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 # Or, compress certain file types by extension: SetOutputFilter DEFLATE # Turn on Expires and set default expires to 1 week ExpiresActive On ExpiresDefault A604800 # Set up caching on media files for 1 week <FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$"> ExpiresDefault A604800 Header append Cache-Control "public" # Set up 48 Hour caching on commonly updated files <FilesMatch "\.(xml|txt|html|js|css)$"> ExpiresDefault A604800 Header append Cache-Control "public" # BEGIN W3TC Browser Cache AddType text/css .css AddType application/x-javascript .js AddType text/x-component .htc AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html Header append Vary User-Agent env=!dont-vary AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
EDIT: si vous avez des problèmes avec TinyMCE suite à ces modifications, consultez ce post.
