AccueilActualitésRessourcesAccélérez vos sites avec ces 8 ressources javascript gratuites Ressources Accélérez vos sites avec ces 8 ressources javascript gratuites Publié le 29/04/2015 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest jAujourd'hui, je vous propose une série de 8 ressources pour optimiser le chargement ressenti de vos visiteurs; la vitesse de chargement de vos sites n'est pas à prendre à la légère. Non seulement il est possible que Google la prenne en compte dans son référencement, mais il est surtout prouvé qu'elle joue un grand rôle dans la fidélisation et la conversion de vos visiteurs. InstantClick Cette ressource vous propose de charger les pages de votre site à une vitesse suffisamment grande pour que le passage d'une page à l'autre semble instantané. Comment ? En trichant ! Plutôt que d'accélérer le chargement, la ressource analyse le comportement de vos visiteurs pour deviner quel lien ils veulent cliquer quelques dixièmes de seconde avant qu'ils ne le fassent, et donc commencent à charger en avance. Pjax Cette ressource fonctionne en combinant jQuery.load a un peu de HTML5 pour transformer n'importe quel site en site "sans rechargement". Le header de la page n'est jamais rechargé, et nous n'avons donc pas besoin de lire de nouveau les fichiers Javascript, CSS, et toutes les outres ressources présentes sur toutes les pages. De plus, nous évitons aussi l'effet de "scintillement" dû à des CSS trop lourds, ce qui augmente encore l'impression de vitesse. Pegasus Les fichiers Javascript sont les plus ennuyeux à charger, car ils ne permettent pas au navigateur de faire autre chose en même temps que leur chargement. En résout une page qui parfois bloque quelques dixièmes de seconde (quand ce ne sont pas des secondes complètes) en les attendant. Pegasus règle ce souci, et offre une seconde vie à tous les sites chargeant de nombreux fichiers Javascript. Imgix Pour beaucoup de sites vitrines et folio, les ressources les plus lourdes sont malheureusement celles sur lesquels il est le plus dur de marchander avec la qualité : les images. En effet, à quoi sert de charger vite des images si elles sont trop pixelisées pour rendre la qualité de vos travaux . Heureusement, il existe des solutions pour ce genre de problème. Dans un premier temps, découvrez Imgix, qui vous permettra de charger des images de manière "responsive", pour fournir des images de qualité aux grands écrans sans impacter les plus petits. Unveil Toujours pour les images, Unveil permet de mettre en place du "lazy loading", c'est-à-dire différer le chargement des images jusqu’à quelques secondes avant leur entrée dans l’écran. De cette manière, le chargement du site semble plus rapide et les personnes navigantes sur mobile usent moins vite leur forfait 4g :). SVGMatic Pour en finir avec les SVG, il est aussi possible de fournir des fichiers CSV, qui sont souvent moins lourds pour les images peu détaillées. Seul problème : tous les navigateurs n'affichent pas le SVG. SVGMatic fournit la solution et transforme vos SVG en Png pour les navigateurs incompatibles. Sprint Enfin, attaquons-nous à la library "boîte à outils" de votre site. La plupart des sites utilisent jQuery, qui est très bien mais malheureusement un peu lent (surtout dans sa branche 1, cela va bien mieux avec jQuery 2). La solution la plus puissante à l'heure actuelle semble être Sprint, une library hyper rapide. Seuls soucis : Cette vitesse a été gagnée au prix du support des navigateurs les plus anciens (comprenez IE9 et inférieur). À utiliser avec précaution donc. Lazy De manière un peu moins brusque, Lazy js est lui aussi plus rapide que jQuery, tout en supportant les navigateurs anciens. Un bon compromis selon moi. By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.
Ressources Les infographies pour en savoir plus sur les tendances mobiles en 2015 ! Publié le 09/10/2015
Ressources 20 packs de badges et d’icônes avec un style vintage à télécharger librement Publié le 26/08/2015