Javascript au secours des webperfPublié le par dans Javascript et jQuery | 1 commentaire »

Malgré l'absence prolongée de nouveaux billets sur ce blog, je reste très actif dans le développement de sites web. Il y a quelques jours, j'ai lancé une nouvelle version de Scooter System, mon terrain de jeu grandeur-nature. Au-delà des aspects purement ergonomiques de cette refonte, j'ai consacré d'importants efforts à rendre l'expérience utilisateur la plus rapide et réactive possible. Je suis parvenu à un résultat qui me satisfait vraiment, et dont les performances sont reconnues par les outils de mesure de webperf les plus populaires. De façon assez paradoxale, tout cela a été possible grâce à l'utilisation de quelques lignes de Javascript.

Quand je parle de rapidité et de réactivité, j'entends que le délai de rendu doit être minimal et l'interface utilisable au plus tôt. Et cela malgré l'utilisation du framework jQuery et de ses dépendances, de polices d'écriture "exotiques" (Open Sans, Roboto et icônes créées avec Icomoon) et l'affichage de publicités via Google DFP. Sans oublier les incontournables boutons sociaux et Google Analytics. Mes recherches ont visé à trouver un moyen de charger l'ensemble de ces ressources sans bloquer le fameux "chemin de rendu critique", une notion complexe dont je commence seulement à comprendre le sens !

Il s'agit globalement de limiter le nombre de ressources CSS et Javascript chargées avant le rendu du code html. Tout ce qui n'est pas critique doit être appelé le plus tard possible (avant la fin de </body>), ou via les attributs "async" et "defer" pour le Javascript. Très intéressants sur le papier, ces attributs html5 le sont moins dans les faits car ils ne permettent pas de gérer les dépendances entre scripts. Comment, dans ce cas, être certain que les plug-ins jQuery se chargent bien après le framework en lui-même ? Et comment exécuter une fonction seulement une fois tel ou tel script chargé ?

La solution n'est pas nouvelle : c'est le loader asynchrone. Seulement même pour les plus légers comme head.js, cela représente plusieurs kilo-octets de données gzippées à charger dans l'entête. Et c'est là que se trouve la marge d'amélioration. Après de nombreuses recherches et tests, je me suis tourné vers ces quelques lignes de code, elles-même déclinées du code utilisé par Google pour charger son outil Analytics en asynchrone. Une fois compressé via des outils utilisant l'excellent UglifyJS, on obtient un fichier de quelques octets qui charge en asynchrone, et offre une fonctionnalité de callback. Il n'en faut pas plus pour gérer les dépendances et exécuter des fonctions au chargement !

Pour permettre au script de charger du CSS, il ne manquait pas grand chose. Je l'ai donc modifié pour qu'il joue également le rôle de loader CSS asynchrone. Ma démarche a été simple : on charge un fichier comprenant le code indispensable au rendu de façon classique (link rel="stylesheet"), puis on appelle le reste via le loader, ce qui permet de le charger en parallèle de la page. J'ai toutefois été un peu plus loin pour les polices d'écriture, qui posent un problème appelé "Flash of Unstyled Text", ou FOUT. Suivant les recommandations de cet article, j'ai créé un fichier CSS comprenant l'ensemble des polices encodées en base64 (via ce bel outil).

Cela permet de charger les polices d'écriture dès le début, mais sans bloquer le rendu avec un fichier de plus de 60 ko (des fontes encodées en base64, ça pèse lourd !). De cette façon, les textes s'affichent bien plus rapidement au 1er chargement, et sans le fameux flash blanc. J'ai privilégié les formats Woff et Woff2, qui se chargent de façon conditionnelle selon le User-Agent détecté par php. Au-delà de l'atout visuel, cette technique constitue également un bon moyen de réduire le nombre de requêtes http, un autre critère qui a guidé mes choix techniques pour cette refonte.

Pour voir l'ensemble de ces optimisations en action, je vous invite à observer le code source de Scooter System. Vous y retrouverez le petit script aload.js en header, et les appels à la fonction de chargement asynchrone aload("fichier.js",function(){callback();}); ou aload("fichier.js"); Si tout cela peut sembler bien peu de choses, c'est pour moi l'aboutissement d'années de veille en matière de bonnes pratiques, une sorte de Saint Graal des webperf. Les visiteurs comme les outils de mesure spécialisés saluent tous le regain de réactivité du site. J'attends maintenant de voir dans quelle mesure http/2 va impacter mes choix techniques.

À vous maintenant de partager vos expériences. Pensez-vous, comme moi, qu'un loader asynchrone est indispensable pour maximiser les webperf d'un site moderne ? Je serai très intéressé par vos avis et opinions ! N'hésitez pas à télécharger et tester aload.js ;)

 



Détecter AdBlock avec jQuery… et bien plus encore !Publié le par dans Javascript et jQuery | 1 commentaire »

Les outils AdBlock Plus et consorts connaissent un succès certain dans les bibliothèques d'extensions pour Google Chrome et Firefox. Pour les éditeurs de sites dont le modèle économique est basé sur la diffusion de bandeaux publicitaires, leur démocratisation est un véritable fléau. Car l'outil ne fait pas de distinction entre ceux qui respectent les bonnes pratiques et les money-sites de type MFA...

Grâce à javascript, il est possible de détecter assez facilement les visiteurs qui ont activé AdBlock. 2 solutions sont alors envisageables : diffuser un message d'information, ce qui peut être mal vécu, ou bien diffuser des publicités non détectables en injectant un code html classique... ce qui va cette fois-ci à l'encontre même du principe du bloqueur de publicité et peut froisser les plus fervents défenseurs du web libre.

Voici ce qui apparaît sur Scooter System avec ce javascript

Voici ce qui apparaît sur Scooter System avec ce javascript

Le code que je partage ci-dessous répond à ces deux cas de figures dans la mesure où le fonctionnement est identique. Mais il va un peu plus loin puisqu'il est capable de renseigner Google Analytics sur l'utilisation (ou non) d'AdBlock. Cela permet de connaître le pourcentage de visiteurs qui en sont équipés, et éventuellement d'étudier les différences entre le profil des 2 types d'utilisateurs (durée moyenne de visite, nombre de pages vues, etc.).

J'ai conçu ce code avec jQuery et Doubleclick for Publishers (DFP) que j'utilise tous deux sur Scooter System, mais cela fonctionne aussi avec du javascript natif et AdSense. Le principe est d'attendre le chargement complet de la page ($(window).load()) puis de vérifier si l'une des variables générée par le fichier javascript de la plateforme publicitaire existe ou non. Si ce n'est pas le cas, c'est que le fichier a été bloqué par AdBlock.

Il suffit ensuite d'injecter dans les éléments contenants le code html souhaité, à savoir une image de remplacement avec un disclaimer de type « Vous utilisez un plug-in anti-pub de type AdBlock. Merci de le désactiver sur notre site qui vit de la diffusion de publicités ». En y rajoutant un lien, rien ne vous empêche de diffuser une publicité générique à la place, mais je ne le recommande pas...

Notez que pour fonctionner, les contenants html (div ou span) doivent passer à travers les mailles du filet d'AdBlock. Il convient pour cela de leur donner un nom générique qui ne contient pas de mots clés de type "pub" ou "ads"... La dernière ligne du code (ici pour la version asynchrone d'Analytics) renvoie une variable personnalisée avec un statut true ou false. Et le tour est joué !

On peut ensuite afficher les résultats sous la forme de graphiques ou tableaux de statistiques

On peut ensuite afficher les résultats sous la forme de graphiques ou tableaux de statistiques

Voici sans plus attendre les quelques lignes de code javascript qui découlent de cette logique. C'est plutôt court :

$(window).load(function(){
if(typeof window.google_num_ad_slots=='undefined'){
$('.vivre728').append('<img src="/images/disclaimer728.png">');
$('.vivre300').append('<img src="/images/disclaimer300.png">');
_gaq.push(['_setCustomVar',2,'AdBlock','true',2]);
} else {
_gaq.push(['_setCustomVar',2,'AdBlock','false',2]);
}
});

J'utilise ce script depuis plus d'un an et cela a toujours fonctionné à merveille. Par chance, le secteur d'activité dans lequel je suis éditeur reste peu équipé. En comparaison avec mes 11% d'utilisateurs d'AdBlock, on peut atteindre les 50% dans le domaine de l'informatique. Autant dire que pour certains éditeurs, monitorer et analyser le comportement des utilisateurs de ce type d'outils est indispensable !



Boostez la visibilité de votre site d’e-commerce – SEOCamp Angers 2013Publié le par dans Référencement | Aucun commentaire »

Dans le cadre du SEOCamp d'Angers qui s'est tenu le samedi 1er juin 2013 à la Maison des Projets, je suis intervenu pour une conférence intitulée "Boostez la visibilité de votre site de e-commerce".

L'objectif de ma présentation n'était pas de proposer un guide ou un manuel des bonnes pratiques mais, au contraire, d'offrir une approche originale fondée sur l'expérimentation de différentes techniques et outils plus ou moins classiques.

J'ai notamment évoqué des sujets comme :

  • Les réseaux sociaux avec un focus particulier sur Pinterest ;
  • L'intégration des vidéos sur les fiches produits ;
  • L'utilisation des microdonnées et des Rich Snippets ;
  • La mise en place de blogs d'entreprise et/ou thématisés ;
  • L'organisation de concours et le relai sur les plateformes spécialisées ;
  • L'utilisation des codes promos associée à Facebook Offers et sur les sites spécialisés ;
  • La vente conjointe sur les places de marché (sans duplicate content) ;
  • Démarrer sur les comparateurs de prix avec LeGuide + Webmarchand ;
  • Les annonces produits (PLA) dans Google AdWords.

Voici quelques chiffres et idées à retenir :

  • Pinterest peut être très intéressant pour les activités où les produits peuvent être valorisés en photos (déco, mode, voyage...) ;
  • En optimisant les fiches produits et les images, on peut avoir jusqu'à 10% de visibilité dans Google images ;
  • Une fiche produit avec une vidéo, c'est une hausse du temps de lecture moyen d'environ 20% ;
  • Les Rich Snippets pour une fiche produit garantissent une hausse du taux de clic de 10 jusqu'à 30% ;
  • Il faut créer au moins un blog officiel et y associer des blogs hébergés gratuitement pour occuper les SERP ;
  • 2/3 des liens créés doivent être non-optimisés (url du site, cliquez ici...) ;
  • Un concours relayé sur les sites spécialisés peut booster la fréquentation jusqu'à 35% dans certains cas ;
  • Facebook Ads permet un ciblage ultra-précis de l'audience, ce qui est idéal en e-commerce ;
  • Créez un champ description spécifique aux marketplaces pour éviter les contenus dupliqués ;
  • Ne laissez jamais les paramètres par défaut dans vos campagnes AdWords : ciblez et temporisez.

Le Diaporama projeté :

SEO : Boostez la visibilité de votre site d'e-commerce ! par EroanBoyer

Merci à tous pour vos retours, à Olivier Bomard pour la photo et à l'association SEOCamp pour son travail de très grande qualité !



Du chargement conditionnel asynchrone avec jQuery 1.9 et 2.0Publié le par dans Javascript et jQuery | Aucun commentaire »

Si vous suivez le développement de la librairie jQuery, certainement avez-vous entendu parler de sa prochaine évolution majeure. En l'occurrence, l'équipe en charge du développement a choisi de travailler sur une V2 qui abandonne le support des navigateurs "oldIE" (versions 6, 7 et 8 d'Internet Explorer). Ils sont en effet responsables d'une partie du poids (conséquent) du fichier javascript, car ils nécessitent l'utilisation de fonctions spécifiques pour émuler ce qu'ils ne sont pas capables de gérer nativement.

jQuery 2.0 s'affranchit de ces contraintes et gagne en poids (environ 15%) et en rapidité d'exécution (moins de fonctions appelées pour un même résultat). Il reste 100% compatible avec tout ce qui fonctionne avec la branche 1.9 : scripts, plugins, jQuery UI, jQuery Mobile... Oui mais voilà, il met de côté un pourcentage de visiteurs (variable selon les pays et secteurs) qui continue à utiliser les vieux IE. La solution idéale est donc de charger les librairies selon le navigateur utilisé, et en asynchrone !

Je vous propose ci-dessous le fruit de mes réflexions et recherches. Ce script fait appel à head.js, que j'affectionne pour son loader asynchrone, mais qui nous sert ici également à détecter le navigateur et sa version. La "prise de poids" liée à l'utilisation de head.js (3.4 ko gzippé) est largement compensée par ses avantages : gain de 3 ko gzippé sur le fichier jQuery et chargement en asynchrone de la librairie et éventuellement ses plug-ins (consultez la documentation pour l'utiliser selon vos besoins).

<script src="https://github.com/headjs/headjs/raw/v0.99/dist/head.min.js"></script>
<script>
var jq_file=(head.browser.ie&&head.browser.version<9)?'jquery-1.9.1.min.js':'jquery-2.0.0b1.min.js';
head.js("http://code.jquery.com/"+jq_file, "http://www.votresite.com/js/vos_plugins.js");
</script>

Notez que nous chargeons les fichiers javascript depuis les sites ou cdn de leurs auteurs, dans leur version minifiée, et que jQuery 2.0.0 est toujours en version bêta 1. À vous d'adapter le code selon les besoins de votre site et l'existant. Vous pouvez voir ce code en fonctionnement sur Scooter System, qui tire largement profit des possibilités offertes par head.js. Vous pouvez tester son fonctionnement en utilisant le panneau développeur d'Internet Explorer 9 et son outil de compatibilité. Et ça marche ;)



HTML5 et le SEO – SEOCamp Nantes 2012Publié le par dans HTML 5, Référencement | 14 commentaires »

Dans le cadre du SEOCamp de Nantes 2012, j'ai été invité à intervenir sur le thème de "html5 et le SEO". J'y ai abordé plusieurs sujets relatifs au référencement dit "On-page" :

  • La syntaxe allégée de html5 ;
  • La rigueur syntaxique moindre avec 3 exemples précis ;
  • Le balisage sémantique et ses conséquences sur la structure des pages et le linking ;
  • Les attributs de liens rel=, notamment pour les "publisher" et "author" ;
  • Les rôles WAI-ARIA et l'accessibilité ;
  • Les microdonnées structurées et schema.org.

J'ai élargi en abordant les évolutions de l'algorithme de Google, avec la montée en puissance des nouvelles formes de recherche : localisée, personnalisée, en temps réel et sémantique. La conclusion est que, non content d'offrir un gain de visibilité immédiat dans les SERP, html5 permet d'anticiper les évolutions futures du SEO.

Je vous propose de retrouver le diaporama qui m'a servi de support, dans lequel vous trouverez les exemples, chiffres et liens présentés durant ma conférence. N'hésitez pas à laisser un commentaire ci-dessous pour compléter ou apporter votre point de vue sur la question, j'y répondrai avec plaisir ;)

HTML5 et le SEO : quelles opportunités ? par EroanBoyer

Merci à l'association SEOCamp pour cette belle journée, à l'école Epitech pour les locaux et à tous ceux avec qui j'ai pu échanger !



Le véhicule électrique léger en plein boom !Publié le par dans Personnel | Aucun commentaire »

Chers lecteurs, je reprends la plume sur mon blog après plusieurs mois de silence radio. Cette absence ne signifie pas que je n'ai pas eu l'occasion de travailler sur de nouveaux scripts ou techniques de référencement, mais plutôt que j'ai été très occupé. En effet, mes activités autour des véhicules électriques légers et de la trottinette électrique réclament de plus en plus d'investissement.

Ma boutique en ligne Elec'store rencontre un grand succès, grâce notamment à la vente de l'Egret One. Avec mon partenaire Vincent Bourdeau, nous avons pour mission de faire connaître le produit en France afin d'en développer les ventes. Un objectif que nous avons atteint grâce à un travail intense sur la toile : communiqués de presse, prêts aux blogueurs influents, reportages...

De mon côté, j'ai profité de la popularité de Scooter System pour publier un essai de l'Egret One, au sein duquel je livre en toute objectivité mes impressions sur la trottinette électrique. Au fil de mes découvertes et rencontres, je me suis pris de passion pour cette catégorie de véhicules. Pour aider à les populariser, j'ai même créé un guide du transporteur personnel électrique sur Scooter System.

Une trottinette électrique Go-Ped à Nantes

Non content de traiter de l'actualité du scooter de toutes les cylindrées, le site présente désormais également les nouveautés en matière de véhicules électriques urbains. Parmi les des derniers modèles présentés figurent 2 transporteurs gyroscopiques (comme le Segway) : le Ryno PT II et le Solowheel. Ce dernier ayant attiré mon attention, j'en ai commandé un dans le but de le tester ! Verdict à venir.

Pour concrétiser cette nouvelle passion, je me suis rapproché des associations les plus actives au niveau national et européen. J'ai ainsi adhéré à l'Avere France et à l'EME (Espace Mobilités Électriques) afin de participer aux salons, colloques et réunions auxquelles elles sont affiliées. Cela offre de nouvelles opportunités pour faire connaître et valoriser les véhicules électriques légers.

Grâce à ces associations et à de nouvelles rencontres, Elec'store participera en 2012 et 2013 à plusieurs événements. Dès septembre prochain, dans le cadre de l'opération Bougez malin, les parisiens pourront essayer l'Egret One sur le parvis de la Mairie ou sur les voies sur Berge. Puis, dans le cadre de Nantes capitale verte 2013, nous animerons la rubrique transports du site...

Nantes capitale verte européenne 2013

Autant dire que le projets sont nombreux ! Et encore, je ne vous ai pas parlé des rollers électriques SpnKix que je teste actuellement ou des futures trottinettes électriques à venir... en voilà un milieu en pleine effervescence !



10 astuces pour rendre vos sites plus performantsPublié le par dans Développement | Aucun commentaire »

Je vous propose de nous intéresser aujourd'hui à un thème qui a gagné en popularité avec la montée en puissance du trio html 5 / CSS3 / jQuery : les performances web. Je vais partager avec vous un ensemble de bonnes pratiques et de recommandations qui sont le fruit de mes lectures et expériences, la plupart ayant été testées puis mises en place sur la nouvelle version de mon site d'actualité Scooter System (lancée hier). Cet article est particulier dans le sens où j'ai opté pour une approche transversale, en traitant de plusieurs technologies et langages. De même, le gain de "performances" vendu à travers le titre de l'article peut être vérifié dans différents domaines : temps de chargement réduit, meilleure interactivité, optimisation pour le SEO... On y va ?

  1. Réduisez la taille du DOM (Document Object Model). J'entends par là la quantité de code html de vos pages, notamment entre les balises <body> et </body>. Évitez d'imbriquer un trop grand nombre d'éléments les uns dans les autres afin de conserver une profondeur moyenne inférieure à 8. C'est l'assurance d'un chargement rapide (pour le téléchargement puis les calculs de rendu), y compris sous les navigateurs anciens et les ordinateurs les moins puissants. C'est également un atout si vous utilisez des scripts manipulant le DOM avec des insertions (de type .append()) ou appels en Ajax. Testez vos pages avec des bookmarklets comme DOM Monster ou DOM Ninja.
  2. Limitez l'utilisation d'identifiants et classes sur vos balises. Utilisez des id pour les principales zones de votre page (#header, #main, #sidebar et #footer), puis des classes pour les sous-éléments (.search, .menu, .breadcrumb, .partenaires). Il n'est pas nécessaire d'attribuer de classes à des éléments qui se répètent. Dans le cadre d'un menu par exemple, mieux vaut qualifier le conteneur (<ul class="menu">) puis styler les enfants grâce au sélecteur descendant ou enfant (.menu>li). Cette méthode est un peu moins performante au niveau du temps de rendu (quoi qu'insignifiant), mais permet d'alléger le code source... et donc d'augmenter le poids des contenus (comme le 1er point). Or, il s'agit d'une bonne pratique en matière de SEO (moins de duplicate content lié aux parties "fixes" de la page).
  3. Réduisez la taille de votre fichier CSS à moins de 50 ko (non gzippé). Si c'est impossible, n'hésitez pas à "découper" votre fichier et à appeler certaines parties uniquement lorsque c'est nécessaire (mais en limitant le nombre de fichiers CSS à 2 maximum). Tirez profit de l'héritage CSS (dit "en cascade"), utilisez des sélecteurs courts, regroupez les éléments qui partagent plusieurs caractéristiques communes, évitez l'utilisation d'éléments encodés en base64, limitez l'utilisation des nouvelles structures CSS3 longues avec 5 préfixes différents (-moz, -webkit, -ms...) et en bout de course, utilisez un outil comme CleanCSS.
  4. Utilisez des sélecteurs CSS performants. Il faut privilégier les identifiants (#header), puis les classes (.menu), puis les tags (a), et enfin recourir aux sélecteurs composés. Pour ces derniers, l'idée est d'éviter les critères trop génériques à droite, car les moteurs de rendu CSS commencent leurs calculs par la fin. On aura ainsi tendance à préférer #header>.menu à #header>ul. Pour cibler un enfant, on essaiera d'utiliser dès que possible le sélecteur de descendance directe (#header>.menu) plutôt que celui de descendance générale (#header .menu). On évitera en outre l'utilisation du critère universel (*) et autres a:link ou input[type="text"]. Enfin, on n'associera pas de tag à un sélecteur d'identifiant ou de classe (pas de ul.menu, .menu suffit). Voici un bon article sur le sujet.
  5. Faites appel aux sprites CSS. Cela consiste à regrouper l'ensemble des images de votre charte graphique en une seule et même image, puis à cibler ses différentes zones en utilisant la propriété CSS background-position. Il existe des outils simples et bien pensés pour vous mâcher le travail, comme SpriteGen. Pour gagner en poids dans votre fichier CSS, vous pouvez faire un 1er appel à cette image pour l'ensemble des éléments concernés, puis cibler ensuite chaque espace à l'aide d'un background-position:0 -100px. Cette pratique est très appréciée par Google Page Speed et YSlow.
  6. Activez l'accélération matérielle sur les zones dynamiques faisant appel aux transitions, défilements et autres apparitions ou disparitions. Et cela qu'elles soient gérées en CSS3 ou en javascript. Cela permet de soulager le processeur en utilisant le GPU (l'unité graphique), et de faire disparaître d'éventuelles saccades ou lags sur les terminaux les moins puissants. L'activation se fait très simplement, en ajoutant la propriété transform:translateZ(0) à l'élément concerné dans votre fichier CSS.
  7. Appelez vos CSS en début d'entête. Pour être performants, vos fichiers CSS doivent être appelés le plus tôt possible, avant tout autre élément du <header>. Il ne faut surtout pas les appeler après un script ou, pire, dans le corps de la page. De même, il est impératif d'utiliser la structure <link rel="stylesheet" href="style.css" />, et surtout pas @import. Le rendu de la page pourra ainsi débuter dès que possible et sans "reflows" (recalcul du rendu d'une partie ou de la totalité de la page), pour une expérience utilisateur de qualité.
  8. Chargez vos javascript en asynchrone. Ce conseil est autant valable pour la librairie jQuery et ses plugins que pour les outils de recommandation sociale (Facebook, Twitter, Google+), votre Google Analytics et même vos publicités AdSense ou DFP (grâce à la nouvelle api Google Publisher Tag). Pour harmoniser et hiérarchiser le chargement de ces scripts, vous pouvez utiliser un loader asynchrone comme head.js. J'y ai systématiquement recours, et sa simplicité de mise en oeuvre n'a d'égal que sa stabilité et son universalité. Je vous invite à regarder le code source de Scooter System pour l'admirer à l'oeuvre, ou à (re)lire l'un de mes articles sur le sujet.
  9. Optimisez le fonctionnement de vos scripts, qu'ils utilisent jQuery, Prototype, Mootools ou du js pur. Privilégiez le lancement de vos scripts d'interaction après le chargement complet de la page ($(window).load(function()) plutôt qu'après celui du DOM ($(function()), sauf bien entendu pour vos menus. Tirez profit des fonctions les plus efficaces (de nombreux tests sont publiés sur jsPerf.com), utilisez des sélecteurs performants et spécifiez un contexte ($(".menu","#header")).
  10. Compressez tout ce qui peut l'être. C'est vrai pour le CSS et des outils comme CleanCSS le font très bien, mais ça l'est aussi pour le javascript (avec l'excellent  Javascript Compressor) et votre code html. Même si ce dernier est gzippé par votre serveur avant envoi (à configurer via le .htaccess si ce n'est pas le cas), à quoi bon charger des centaines d'espaces et de tabulations, qui seront inutiles pour vos visiteurs ? Prenez le temps de nettoyer le code de votre template et n'hésitez pas à utiliser php pour alléger des contenus stockés en base de données : str_replace("\t",'',str_replace("\n",'',$contenu));

En mettant en oeuvre l'ensemble de ces conseils (et quelques autres prodigués par les outils Page Speed et YSlow), vous obtiendrez un site rapide et performant sur toutes les plateformes fixes et mobiles, récentes ou plus anciennes. L'étape suivante dans la course à la performance peut être la mise en place d'un cdn de type media server, pour améliorer le temps de chargement des images... ;)



Boostez les performances de jQuery avec .on() et l’event delegationPublié le par dans Développement, Javascript et jQuery | 2 commentaires »

La version 1.7 de jQuery inaugure une nouvelle gestion des événements, que l'on peut désormais déclarer grâce à la fonction on(). Cette nouvelle structure est utilisable de façon classique de la même façon que bind(), ou bien avec un argument supplémentaire à la façon de delegate(). Son atout est sa polyvalence et sa simplicité de mise en place, mais pas seulement : elle permet d'accélérer considérablement la vitesse d'exécution de vos scripts (jusqu'à 100 fois). Un atout de taille pour offrir une expérience utilisateur de qualité au survol de vos menus et autres zones dynamiques !

Pour faire simple, l'event delegation avec on() permet de d'associer un événement à un élément parent de l'arborescence dom au lieu de l'associer individuellement à chacun des éléments concernés. Pour une liste, l'événement sera ainsi associé à la balise <ul>, et fonctionnera pour les <li> enfants. Le gros avantage de cette solution est qu'elle permet d'associer des événements à les éléments insérés dynamiquement dans le dom à l'aide de fonctions comme append() ou via des appels en Ajax. Je vous propose en exemple une version actualisée de mon astuce "Étendre la portée d’un lien avec Jquery" :

<script>
$(function(){
$("#liste_ul_contenante").on("mouseover","li",function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).on("mouseout","li",function(){
$(this).find("a").css("text-decoration","none");
}).on("click","li",function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>

Utilisant personnellement ce type de fonctions dans mes développements, j'ai constaté un net gain en termes de fluidité lors du passage à cette nouvelle structure. Voilà un beau cadeau de la part des équipes de développement de jQuery ;)



Tracker les clics sur les liens sortants avec AnalyticsPublié le par dans Développement, Javascript et jQuery | 6 commentaires »

Google Analytics est l'outil d'Analytics le plus répandu dans la sphère des webmasters, quel que soit leur niveau. L'outil permet en effet de multiples approches, depuis la simple consultation des données de fréquentation jusqu'à la création d'entonnoirs de conversion extrêmement détaillés. Aujourd'hui, je vous propose de découvrir une fonctionnalité peu connue mais très intéressante de cet outil incontournable : le suivi des événements.

Grâce à cette "brique" de Google Analytics, vous allez être en mesure de réaliser un tracking des clics effectués sur les liens sortants de votre site. Ces données pourront ensuite être croisées avec d'autres, ce qui vous permettra par exemple de savoir quelles sources ou quelles requêtes de recherche génèrent le plus de clics sortants... Ces données peuvent s'avérer très précieuses, pour les sites d'affiliation notamment.

Pour réaliser le tracking des clics de façon transparente et sans bloquer ou ralentir le chargement des pages, je vous propose de réutiliser des techniques déjà expliquées sur mon blog précédemment, à savoir un mélange du loader head.js et de Jquery. Voici le code complet à insérer dans le header de votre page pour activer cette fonctionnalité, ce dernier étant à faire évoluer selon les besoins de votre propre site :

<script type="text/javascript" src="https://github.com/headjs/headjs/raw/v0.96/dist/head.load.min.js"></script>
<script type="text/javascript">
head.js("http://www.google-analytics.com/ga.js");
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js");
head.ready(function(){
$("a[target="_blank"]").click(function(e){
_gaq.push(['_trackEvent','Clics sortants',this.href]);});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
</script>

Nous commençons par appeler le loader head.js, auquel nous demandons ensuite de charger Google Analytics et Jquery en asynchrone. Une fois les 2 scripts chargés, nous activons le tracking sur les liens dont la cible est _blank (nouvelle fenêtre). Rien ne vous empêche d'activer le tracking sur une classe particulière, voire sur tous les liens de vos pages si vous voulez être certain de ne rien laisser passer... mais cela prendra également en compte vos lien internes.

La dernière portion de code est liée à Google Analytics, et doit être personnalisée avec votre propre identifiant (UA-XXXXXX-X). Maintenant, un clic sur un lien sortant de vos pages sera détecté automatiquement par l'outil, de façon totalement transparente. Pour consulter ces données dans l'interface de Google Analytics, rien de plus simple : ça se passe dans Contenu > Événements > Principaux événements.

Vous y retrouverez un tableau avec une ligne "Clics sortants", qui correspond au libellé donné dans notre exemple, et une courbe de suivi au jour le jour. Vous avez également la possibilité d'aller plus loin en créant des tableaux personnalisés sur votre tableau de bord. Dans notre cas, nous avons par exemple croisé les requêtes de recherche avec le nombre de clics, ce qui nous permet d'orienter notre référencement vers les termes les plus rémunérateurs.

Tracking des clics dans Google Analytics

Analytics offrant des possibilités quasiment illimitées, sachez qu'il est également possible d'attribuer une valeur à chaque événement en ajoutant un argument supplémentaire à l'appel du _trackEvent. En indiquant le CPC ou la rémunération au formulaire dans un attribut de vos liens (ex : value=“1.25”), il est possible de le retourner à l'outil pour effectuer un suivi encore plus pointu de vos transformations. Ca vous a plu ? Faites tourner svp ;)