Charger les images pendant le scroll avec JQuery.

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.

SEO

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.

Laisser un commentaire

*