Responsive Design, comment booster le temps de chargement

Au niveau amélioration performances de rendu et temps de chargement des pages web, on peut mettre en place du lazy loading et infinite scroll 

Pour les images responsive, il n’y a pas encore de solutions standards.
La solution la plus proche du standards html picture W3C en cours d’étude / validation est picturefill
Smashing Magazine propose un très bon article (en anglais) sur les solutions possibles selon différents critères : choosing-a-responsive-image-solution/

Pour l’iconographie :
– Faire un set d’icones typo : http://icomoon.io/ ou http://fontello.com/
– Faire des Icones pure CSS (scalables) : http://one-div.com/
http://fontawesome.io/ le set d’icones typo de Bootstrap3

A noter :
– Le SVG dans un futur proche car pas supporté par Android 3.2 et ie8 (cf : http://css-tricks.com/icon-fonts-vs-svg/)
– Les images sprite pour un set d’icônes reste performant (environ 10kb d’image + css) + gestion css pixel-ratio pour écrans rétina.

Par tags :

Répondre