Les scripts effectuent de nombreuses fonctions sur les pages Web telles que le chargement des annonces, les tests A \/ B<\/a>, la gestion des balises (personnalisation de la page) ou l’affichage d’un lecteur vid\u00e9o en ligne.<\/p>\n Au cours des cinq derni\u00e8res ann\u00e9es, le poids total des pages envoy\u00e9es aux appareils mobiles<\/a> a quadrupl\u00e9 \u00e0 2,2 Mo. La taille est importante car, en g\u00e9n\u00e9ral, plus il y a de donn\u00e9es envoy\u00e9es sur un r\u00e9seau mobile ou fixe, plus le temps de chargement est long. Autrement dit : plus il y a de donn\u00e9es, plus il y a de secondes pass\u00e9es devant un \u00e9cran mobile vide.<\/p>\n Cela sugg\u00e8re que les images, qui ont tendance \u00e0 prendre plus de kilo-octets totaux (KB) ou m\u00e9gaoctets (Mo) sur chaque page, sont les principales coupables. Mais ce n’est pas toujours le cas.<\/p>\n JavaScript pourrait avoir plus d’impact sur les performances de la page que sur les images. Comme Patrick Meenan, fondateur du site de test de performance Web WebPageTest <\/a>et ing\u00e9nieur logiciel chez Google, explique : \u00ab Les scripts sont g\u00e9n\u00e9ralement un probl\u00e8me en raison du temps qu’il faut pour ex\u00e9cuter le script en plus de la taille du t\u00e9l\u00e9chargement, alors que les images ne comptent vraiment, que du fait de la taille du t\u00e9l\u00e9chargement. Avec les appareils mobiles par exemple, cela peut prendre plusieurs secondes pour ex\u00e9cuter un script m\u00eame apr\u00e8s avoir \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9. \u00bb<\/em><\/p>\n Ce n’est pas n\u00e9cessairement JavaScript, en soi, le probl\u00e8me mais comment il est impl\u00e9ment\u00e9 : les scripts peuvent monopoliser l’activit\u00e9 du navigateur, bloquant ainsi le t\u00e9l\u00e9chargement et le rendu (affichage) d’autres contenus.<\/p>\n \u00ab Les probl\u00e8mes arrivent le plus souvent lorsque le script est r\u00e9f\u00e9renc\u00e9 dans la page. Le contenu apr\u00e8s un script \u00ab bloquant \u00bb (par opposition \u00e0 un script asynchrone) n’existe pas, en ce qui concerne le navigateur, jusqu’\u00e0 ce que le script ait \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 et ex\u00e9cut\u00e9. Lorsque, comme c’est habituellement le cas, les scripts sont mis au d\u00e9but de la page, cela signifie que la page sera compl\u00e8tement vide jusqu’\u00e0 ce que les scripts aient \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9s et ex\u00e9cut\u00e9s. \u00bb<\/em><\/p>\n Nous discuterons ci-dessous de la diff\u00e9rence entre les scripts de blocage, online, synchrone (sync), asynchrone (async) et diff\u00e9r\u00e9, et comment r\u00e9soudre les probl\u00e8mes de JavaScript. Mais avant cela nous examinerons comment d\u00e9tecter les probl\u00e8mes.<\/p>\n Si vous avez test\u00e9 vos pages Web \u00e0 l’aide de Google PageSpeed Insights<\/a>, il est probable que vous avez vu l’avertissement suivant :<\/p>\n \u00ab \u00c9liminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison. Aucune partie du contenu situ\u00e9 au-dessus de la ligne de flottaison sur votre page n’a pu \u00eatre affich\u00e9e avant que le chargement des ressources suivantes n’ait \u00e9t\u00e9 termin\u00e9. Essayez de diff\u00e9rer le chargement des ressources qui bloquent votre page, de les charger de mani\u00e8re asynchrone, ou d’int\u00e9grer les parties essentielles de ces ressources directement dans le code HTML. \u00bb<\/p>\n Source : PageSpeed Insights X TF1<\/p><\/div>\n Le texte et l’image ci-dessus proviennent d’un test Mobile PageSpeed Insights sur www.tf1.fr. L\u2019image se r\u00e9f\u00e8re uniquement \u00e0 la partie de la page Web visible sur un appareil mobile, sans d\u00e9filement, Google n’\u00e9met pas de scripts sur le reste de la page.<\/p>\n Au cours des cinq derni\u00e8res ann\u00e9es, la quantit\u00e9 de JavaScript utilis\u00e9e sur la page mobile moyenne a presque quadrupl\u00e9 de 101KB en f\u00e9vrier 2012, \u00e0 387KB en f\u00e9vrier 2017. Le nombre de demandes (une demande est le nombre de fois qu’un navigateur est n\u00e9cessaire pour t\u00e9l\u00e9charger un morceau suppl\u00e9mentaire de contenu<\/a> ou de code) pour diff\u00e9rents fichiers JavaScript est pass\u00e9 de 8 \u00e0 21.<\/p>\n Ceci est clairement illustr\u00e9 dans le graphique ci-dessous \u00e0 partir d’archives HTTP. HTTP Archive, teste les 1 million de sites les plus importants chaque mois en utilisant les donn\u00e9es de WebPageTest et publie les tendances et les statistiques qui constituent un benchmarking essentiel pour la performance de votre site.<\/p>\n Source : HTTP Archive<\/p><\/div>\n Pour les 1 million de sites surveill\u00e9s par HTTP Archive<\/a>, JavaScript repr\u00e9sente 17,4% du poids de la page. JavaScript repr\u00e9sente \u00e9galement 21 des 93 demandes totales (22,6%).<\/p>\n Pour certains sites comme les sites d\u2019actualit\u00e9, JavaScript a une part consid\u00e9rablement plus grande de poids de la page que la norme.<\/p>\n L’image ci-dessous compare la r\u00e9partition par type de contenu pour le site, en moyenne, sur BBC.com test\u00e9 par HTTP Archive (15 f\u00e9vrier 2017) :<\/p>\n Source : HTTP Archive X @Andy_Favell\/ClickZ<\/p><\/div>\n Lorsque vous comparez les r\u00e9sultats des tests de ces quatre sites d\u2019actualit\u00e9s britanniques, il est remarquable de noter combien la BBC est inf\u00e9rieure \u00e0 ses rivaux. Il est un tiers \u00e0 la moiti\u00e9 de la taille, avec deux \u00e0 trois fois moins de JavaScript.<\/p>\n Il en r\u00e9sulte que le site de la BBC en ligne charge beaucoup plus vite que tous ses concurrents ?<\/p>\n Le 15 f\u00e9vrier 2017, HTTP Archive a enregistr\u00e9 les temps de chargement suivants :<\/p>\n Ainsi, la BBC est plus rapide sur un appareil mobile que CNN et le New York Times, mais consid\u00e9rablement plus lent que l’ESPN.<\/p>\n C’est \u00e0 cela que ressemblent les deux sites sur un appareil mobile. Chaque image repr\u00e9sente 1 seconde. Lorsque le test HTTP<\/a> Archive a eu lieu, pendant 9 secondes, les visiteurs mobiles BBC.com n’ont rien vu, tandis que pendant 4 secondes, les visiteurs ESPN n’ont rien vu.<\/p>\n Source : HTTP Archive X @Andy_Favell\/ClickZ<\/p><\/div>\n Il pourrait y avoir de nombreuses raisons pour lesquelles un site Web pourrait \u00eatre plus rapide qu’un autre, comme les temps de r\u00e9ponse du serveur, l’utilisation des r\u00e9seaux de distribution de contenu (CDN), l’impact des r\u00e9seaux publicitaires, l’inclusion de donn\u00e9es tierces (communes sur les sites d\u2019actualit\u00e9 notamment) ou l’heure et le lieu du test (en l’occurrence Californie, \u00c9tats-Unis).<\/p>\n Cependant, toutes les autres choses \u00e9tant \u00e9gales, il est possible que JavaScript puisse \u00eatre un facteur contributif.<\/p>\n JavaScript est souvent utilis\u00e9 pour effectuer des t\u00e2ches qui ne peuvent pas \u00eatre compl\u00e9t\u00e9es avec HTML ou CSS. Et pour cause, beaucoup de scripts Javascript sont impossibles \u00e0 r\u00e9aliser avec HTML & CSS. Cependant, depuis la sortie d\u2019HTML5 et CSS3<\/a>, quelques scripts Javascript sont devenus obsol\u00e8tes. Un bon exemple de cela est une image responsive.<\/p>\n Alex Painter, Consultant Web Performance au Groupe NCC ajoute : \u00ab En r\u00e8gle g\u00e9n\u00e9rale, il vaut la peine de respecter le principe de l’am\u00e9lioration progressive : fournir un site qui fonctionne sans JavaScript et utiliser des scripts uniquement pour les fonctionnalit\u00e9s suppl\u00e9mentaires qui ne peuvent \u00eatre r\u00e9alis\u00e9es d’une autre mani\u00e8re. \u00bb<\/em><\/p>\n \u00ab L’utilisation de JavaScript pour le contenu peut \u00eatre co\u00fbteuse : il faut du temps pour charger et ex\u00e9cuter. Ainsi, par exemple, si vous pouvez utiliser HTML et CSS pour obtenir le m\u00eame r\u00e9sultat, cela va g\u00e9n\u00e9ralement aller plus rapide. \u00bb<\/em><\/p>\n \u00ab En ce qui concerne les images en responsive web design<\/a>, par exemple, vous pouvez utiliser des requ\u00eates multim\u00e9dias dans CSS et picture \/ srcset dans le HTML pour fournir la bonne image sans compter sur JavaScript. \u00bb<\/em><\/p>\n Il existe plusieurs fa\u00e7ons dont JavaScript peut \u00eatre impl\u00e9ment\u00e9 sur une page Web, y compris :<\/p>\n Vous souhaitez adapter votre site web aux diff\u00e9rents types de terminaux dans les plus brefs d\u00e9lais et approfondir vos connaissances en base technique du web ? Renseignez-vous sans plus attendre sur la formation responsive web design<\/a> ainsi que sur la formation Les bases techniques du Web pour non-techniciens.<\/a><\/p>\n L’effet de JavaScript sur la performance Web mobile est double. On fait le point ! Premi\u00e8rement, c’est le deuxi\u00e8me contributeur au poids de la page Web, derri\u00e8re les images, ce qui augmente le temps de…<\/p>\n","protected":false},"author":2,"featured_media":11827,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[314,681,315,149],"tags":[777,124,776,6],"class_list":["post-11819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-marketing","category-montage-video-iphone-ipad","category-responsive-web-design-mobile-1","category-mobile-web","tag-css3","tag-html5","tag-javascript","tag-mobile"],"yoast_head":"\nTest de blocage de JavaScript<\/h2>\n
\nVotre page contient 7 ressources de script et 1 ressources CSS qui bloquent l’affichage de votre page, et donc le retardent.<\/p>\n![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/06\/pagespeedinsight-TF1.jpg\")
<\/a>Croissance multipli\u00e9e par 4 en termes d’utilisation de JavaScript en cinq ans<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/06\/dna46t_javascript_2012-2017.png\")
<\/a>\n
![\"dna46t_page_weight_feb_2017-bbc\"](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/06\/dna46t_page_weight_feb_2017-bbc.png\")
<\/a>\n
Quel est l’effet sur la vitesse de la page mobile ?<\/h2>\n
\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/06\/dna46t_bbc_espn_filmstrip.png\")
<\/a>R\u00e9duire sa confiance en JavaScript<\/h2>\n
Choisissez un JavaScript asynchrone et diff\u00e9r\u00e9 sur les scripts en blocage et en ligne<\/h2>\n
\n
https:\/\/searchenginewatch.com<\/h6>\n","protected":false},"excerpt":{"rendered":"