Meilleure vitesse de site: 4 idées originales

La plupart d'entre nous ont effectué des audits de vitesse sur site ou vu des audits effectués par d'autres. Ceux-ci peuvent être très utiles pour les entreprises, mais je trouve souvent qu'ils sont assez étroits. En général, nous utilisons des outils bien connus qui jettent un tas de choses à regarder, puis nous plongons dans les choses à partir de là.

Cependant, si nous approfondissons, il existe souvent d'autres idées sur la façon dont la vitesse du site peut être améliorée. Je vois souvent de nombreuses opportunités qui ne sont jamais couvertes par les audits de vitesse du site. La plupart des améliorations de la vitesse du site sont le résultat d'un tas de petits changements, et donc dans cet article, je vais couvrir quelques idées que je n'ai jamais vues dans aucun audit de la vitesse du site, qui peuvent toutes faire la différence. [19659003] Un angle différent sur l'optimisation de l'image

Envisager des SVG optimisés par rapport aux PNG

Je cherchais récemment à réserver des billets pour voir Frozen 2 (à cause de, euh, mes enfants …) et j'ai donc atterri sur ce page . Il utilise trois images SVG pour les icônes de transport:

Les images SVG sont des images vectorielles, elles sont donc bien adaptées à des choses comme les icônes; si vous avez des images affichées au format PNG, vous voudrez peut-être demander à vos concepteurs les SVG d'origine, car il peut y avoir des économies considérables . Bien que ce ne soit pas toujours mieux, l'utilisation d'un SVG peut économiser 60% de la taille du fichier.

Dans ce cas, ces icônes arrivent à environ 1,2k chacune, donc elles sont assez petites. Ils passeraient probablement sous le radar des audits de vitesse du site (et ni Page Speed ​​Insights ni GTMetrix ne mentionnent ces images pour cette page).

Donc, vous pensez peut-être, "Ils sont moins de 5k combinés – vous devriez chercher des problèmes plus importants!", Mais jetons un coup d'œil. Premièrement, nous pouvons tous les exécuter via l'outil de compression SVG de Jake Archibald ; c'est un excellent outil gratuit et sur les SVG plus grands, cela peut faire une grande différence.

Dans ce cas, les fichiers sont petits, donc vous vous demandez peut-être "Pourquoi s'embêter?" L'outil les comprime sans aucune perte de qualité de ~ 1240 octets à ~ 630 octets – un bon rapport mais pas beaucoup d'économie globale.

Cependant… maintenant que nous les avons compressés, nous pouvons penser différemment à les livrer…

Images en ligne

GTMetrix fait des recommandations concernant l'inclusion de petits morceaux de CSS ou JS, mais ne mentionne pas d'images en ligne.

Si vous considérez que même un très petit fichier image nécessite un aller-retour complet (ce qui peut avoir un impact très réel sur la vitesse ) , même pour les petits fichiers, cela peut prendre du temps. Dans le cas des images de transport Cineworld ci-dessus, j'ai simulé une connexion "Fast 3G" et j'ai vu:

Le site n'utilise pas HTTP2 donc il y a une longue période d'attente, puis l'image (qui est de 1,2 ko) prend presque 600 ms à charger (pas de HTTP2 signifie également que cela bloque les autres requêtes). Il y a trois de ces images, donc entre elles, elles peuvent avoir un réel impact sur la vitesse de la page.

Cependant, nous les avons maintenant compressées à seulement quelques centaines d'octets chacune, et les images SVG sont en fait constituées de balisage dans une façon similaire au HTML:

Vous pouvez réellement mettre le balisage SVG directement dans un document HTML!

Si nous faisons cela avec les trois images de transport, le HTML compressé pour cette page qui est envoyé du serveur à notre le navigateur passe de 31 182 octets à 31 532 octets – une augmentation de seulement 350 octets pour les 3 images!

Donc, pour récapituler:

• Notre requête HTML a augmenté de 350 octets, ce qui est à peine n'importe quoi
• Nous pouvons nous défaire de trois tours les déplacements vers le serveur, dont nous pouvons voir qu'ils prenaient beaucoup de temps

Certains d'entre vous ont peut-être réalisé que si les images n'étaient pas en ligne, elles pouvaient être mises en cache séparément, de sorte que les futures demandes de page n'auraient pas besoin de les récupérer. Mais si l'on considère:

• Chaque image était à l'origine d'environ 1,5 Ko sur le réseau (ils ne compressent pas les SVG), avec environ 350 octets d'en-têtes HTTP au-dessus pour un total d'environ 5,5 Ko transférés. Donc, dans l'ensemble, nous avons réduit la quantité de contenu sur le réseau.
• Cela signifie également qu'il faudrait plus de 20 pages vues pour bénéficier de leur mise en cache.

À retenir: Considérez où il y en a possibilités d'utiliser des SVG au lieu de PNG.

À emporter: Assurez-vous d'optimiser les images SVG, utilisez l'outil gratuit auquel je suis lié.

À emporter: Les petites images

Remarque: Vous pouvez également incorporer des fichiers PNG – voir ce guide .

Remarque: Pour des images PNG / JPG optimisées, essayez Kraken .

Reculez, JavaScript! HTML peut gérer cela …

Si souvent de nos jours, grâce à la prévalence des bibliothèques JavaScript qui offrent une solution standard, je trouve que JavaScript est utilisé pour des fonctionnalités qui pourraient être obtenues sans lui. Plus de bibliothèques JS signifient plus de téléchargement, peut-être plus d'allers-retours pour des fichiers supplémentaires à partir du serveur, puis le temps d'exécution JavaScript et les coûts eux-mêmes.

J'ai beaucoup de sympathie pour la façon dont vous arrivez à ce point. Les développeurs reçoivent souvent de mauvais briefs / spécifications qui ne spécifient rien sur les performances, seulement la fonction. Ils manquent souvent de temps et il est donc facile de finir par simplement laisser tomber quelque chose.

Cependant, beaucoup de progrès ont été réalisés en termes de fonctionnalités qui peuvent être obtenues avec HTML et ou CSS. Regardons quelques exemples.

Zone de liste déroulante avec recherche

Les zones de liste déroulante qui ont une option de recherche de texte sont un élément d'interface assez courant de nos jours. Un article récent que j'ai rencontré décrit comment utiliser la bibliothèque Javascript Select2 pour faire une telle liste:

Il s'agit d'un élément d'interface utilisateur utile et peut aider vos utilisateurs. Cependant, dans la bibliothèque Select2 est une bibliothèque JavaScript, qui à son tour s'appuie sur certains CSS et la bibliothèque JQuery. Cela signifie trois allers-retours pour collecter un tas de fichiers de tailles différentes:

• JQuery – 101kb
• Select2 JavaScript – 24kb
• Select2 CSS – 3kb

Ce n'est pas idéal pour la vitesse du site, mais nous pourrions certainement faire valoir que cela en vaut la peine afin d'avoir une interface simplifiée pour les utilisateurs.

Cependant, il est en fait possible d'avoir cette fonctionnalité prête à l'emploi avec l'élément de liste de données HTML:

Cela permet à l'utilisateur de parcourir la liste ou pour libérer tapez leur propre réponse, fournit donc la même fonctionnalité. De plus, il a une interface native sur les smartphones!

Vous pouvez le voir en action dans ce codepen .

Détails / Résumé

LonelyPlanet a un beau site Web, et je regardais ceci page sur l'Espagne qui contient un lien "En savoir plus" que la plupart des internautes connaissent:

Comme presque toutes les implémentations que je vois, ils ont utilisé une bibliothèque JavaScript pour l'implémenter, et encore une fois cela vient avec un tas de frais généraux.

Cependant, HTML a une paire de balises intégrées appelées détails et résumé qui sont conçues pour implémenter cette fonctionnalité exactement . Gratuitement et nativement en HTML. Pas de frais généraux, et plus accessible pour les utilisateurs ayant besoin d'un lecteur d'écran, tout en transmettant une signification sémantique à Google.

Ces balises peuvent être stylisées de différentes manières flexibles avec CSS et recréer la plupart des versions JS que j'ai vues là-bas. [19659002] Découvrez une démonstration simple ici: https://codepen.io/TomAnthony/pen/GRRLrmm

… et plus

Pour plus d'exemples de fonctionnalités que vous pouvez obtenir avec HTML à la place de JS, consultez ces liens:

• http://youmightnotneedjs.com/
• https://dev.to/ananyaneogi/html-can-do-that-c0n

À emporter: Examinez les fonctionnalités de vos sites et voyez où il peut y avoir des possibilités de réduire votre dépendance aux grandes bibliothèques Javascript où il y a des options HTML / CSS natives.

À retenir: N'oubliez pas que ce n'est pas seulement la taille des fichiers JS est problématique, mais le nombre d'aller-retour requis.

Remarque: Il existe les cas où vous devriez utiliser la solution JS, mais il est important de peser le pour et le contre.

Optimisations du réseau

Chaque fois que le navigateur doit collecter des ressources sur un serveur, il doit envoyer un message Internet et retour; la vitesse de celui-ci est limitée par la vitesse de la lumière. Cela peut sembler ridicule de nous préoccuper, mais cela signifie que même de petites demandes ajoutent du temps au chargement de la page. Si vous n'avez pas saisi le lien ci-dessus, mon article expliquant HTTP2 traite de ce problème plus en détail .

Il y a certaines choses que nous pouvons faire pour aider à réduire la distance de ces demandes ou à réduire la nombre de voyages aller-retour nécessaires. Celles-ci sont un peu plus techniques, mais peuvent obtenir de réelles victoires.

TLS 1.3

TLS (ou SSL) est la technologie de cryptage utilisée pour sécuriser les connexions HTTPS. Historiquement, il a fallu deux allers-retours entre le navigateur et le serveur pour configurer ce cryptage – si l'utilisateur est à 50 ms du serveur, cela signifie 200 ms par connexion. Gardez à l'esprit que Google recommande historiquement de viser 200 ms pour livrer le HTML (cela semble légèrement détendu dans les mises à jour plus récentes); vous perdez beaucoup de temps ici.

La norme TLS 1.3 récemment définie réduit cela de deux allers-retours à un seul, ce qui peut réduire le temps précieux de la connexion initiale des utilisateurs à votre site Web.

votre équipe technique sur la migration vers TLS 1.3; les navigateurs qui ne le prennent pas en charge reviendront sans problème à TLS 1.2. Tout cela est dans les coulisses et n'est pas une migration d'aucune sorte. Il n'y a aucune raison de ne pas le faire.

Si vous utilisez un CDN, cela peut être aussi simple que de simplement l'activer.

Vous pouvez utiliser cet outil pour vérifier quelles versions de TLS que vous avez activé.

QUIC / HTTP 3

Au cours des 2-3 dernières années, nous avons vu un certain nombre de sites passer de HTTP 1.1 à HTTP 2, qui est une mise à niveau en arrière-plan qui peut une réelle amélioration de la vitesse (voir mon lien ci-dessus si vous voulez en savoir plus).

Tout de suite, il y a une paire de normes émergentes connues sous le nom de QUIC + HTTP / 3, qui optimisent davantage la connexion entre le navigateur et le serveur, ce qui réduit encore les allers-retours requis.

La prise en charge de ceux-ci ne fait que commencer à devenir viable, mais si vous êtes un client CloudFlare, vous pouvez l'activer aujourd'hui et au cours des 6 prochains mois avec le déploiement de Chrome et Firefox. , vos utilisateurs bénéficieront d'un gain de vitesse.

En savoir plus ici: https://blog.cloudflare.com/http3-the-past-present-and -future /

Super routage

Lorsque les utilisateurs se connectent à votre site Web, ils doivent ouvrir des connexions réseau où qu'ils se trouvent sur vos serveurs (ou votre CDN). Si vous imaginez Internet comme une série de routes, vous pouvez imaginer qu’elles doivent «se rendre» à votre serveur sur ces routes. Cependant, cela signifie des embouteillages et des embouteillages.

En fait, certaines des grandes sociétés de cloud computing ont leurs propres routes privées qui ont moins de nids de poule, moins de trafic et des limites de vitesse améliorées. Si seulement les visiteurs de votre site Web pouvaient accéder à ces routes, ils pourraient «vous conduire» plus rapidement!

Eh bien, devinez quoi?

Pour CloudFlare, ils fournissent cet accès via leur produit Argo alors que si vous êtes sur AWS, vous pouvez utiliser leur Global Accelerator . Cela permet aux demandes de votre site Web d'utiliser leurs réseaux privés et d'obtenir une augmentation de vitesse potentielle. Les deux sont très bon marché si vous êtes déjà clients.

À retenir: Beaucoup de ces types d'avantages sont considérablement plus faciles à obtenir si vous utilisez un CDN. Si vous n'utilisez pas déjà un CDN, vous devriez probablement l'être. CloudFlare est un excellent choix, tout comme CloudFront si vous utilisez AWS. Est rapidement le plus configurable d'entre eux si vous êtes plutôt un pro.

À retenir: TLS 1.3 est maintenant très largement pris en charge et offre une amélioration significative de la vitesse pour les nouvelles connexions.

À retenir: QUIC / HTTP3 commencent à peine à recevoir du soutien, mais au cours des prochains mois, cela sera plus répandu. QUIC inclut les avantages de TLS 1.3 ainsi que d'autres. Une connexion HTTP2 typique nécessite aujourd'hui 3 aller-retour pour s'ouvrir; QUIC n'a besoin que d'un seul!

À retenir: Si vous utilisez CloudFlare ou AWS, il est possible d'obtenir des accélérations simplement en actionnant un commutateur pour activer les fonctions de routage intelligent.

Laissez CSS faire plus

Ci-dessus, j'ai parlé de la façon dont HTML possède des fonctionnalités intégrées que vous pouvez exploiter pour économiser en vous reposant sur des solutions qui sont «faites maison» et nécessitent donc plus de code (et de traitement du côté des navigateurs) à implémenter. Ici, je vais parler de quelques exemples où CSS peut faire la même chose pour vous.

Réutiliser des images

Souvent, vous trouvez des pages qui utilisent des images similaires tout au long de la page à plusieurs endroits. Par exemple, des variations sur un logo de différentes couleurs ou des flèches qui pointent dans les deux directions. En tant qu'actifs uniques (aussi similaires soient-ils), chacun d'eux doit être téléchargé séparément.

Revenant à ma recherche de billets de cinéma ci-dessus, où je regardais cette page nous pouvons voir un carrousel comportant des flèches gauche et droite:

De la même manière que la logique utilisée ci-dessus, bien que ces fichiers image soient petits, ils nécessitent toujours un aller-retour pour être récupérés à partir du serveur.

Cependant, les flèches sont identiques – pointant simplement vers directions opposées! Il est facile pour nous d'utiliser la fonctionnalité de transformation de CSS pour utiliser une image dans les deux sens:

Vous pouvez consulter ce codepen pour un exemple.

Un autre exemple est lorsque le le même logo apparaît dans différents styles sur différentes parties de la page; souvent, ils chargeront plusieurs variantes, ce qui n'est pas nécessaire. CSS peut recolorer les logos pour vous de diverses manières:

Il y a un codepen ici montrant cette technique en action. Si vous souhaitez calculer la valeur de filtre CSS requise pour atteindre une couleur arbitraire, consultez cette étonnante calculatrice de couleurs .

Interactions (par exemple, menus et onglets)

Souvent, des éléments de navigation tels que les menus et les onglets sont implémentés en JavaScript, mais ceux-ci peuvent également être effectués en CSS pur. Consultez ce codepen pour un exemple:

Animations

CSS3 a introduit beaucoup de puissantes capacités d'animation dans CSS. Souvent, celles-ci sont non seulement plus rapides que les versions de JavaScript, mais peuvent également être plus fluides car elles peuvent s'exécuter dans le code natif du système d'exploitation plutôt que d'avoir à exécuter du Javascript relativement plus lent.

Consultez Dozing Bird à titre d'exemple:

Vous pouvez trouver beaucoup plus dans cet article . Les animations CSS peuvent ajouter beaucoup de caractère aux pages à un coût de performance relativement faible.

… et plus

Pour plus d'exemples de fonctionnalités que vous pouvez obtenir en utilisant des solutions CSS pures, consultez:

• http://youmightnotneedjs.com/
• https: // dev. vers / ananyaneogi / css-can-do-that-18g7m

À emporter: Utilisez CSS pour optimiser le nombre de fichiers à charger à l'aide de rotations ou de filtres.

À emporter: Les animations CSS peuvent ajouter du caractère aux pages et nécessitent souvent moins de ressources que JavaScript.

À retenir: CSS est parfaitement capable d'implémenter de nombreux éléments d'interface utilisateur interactifs.

Récapitulatif

J'espère que vous ' J'ai trouvé ces exemples utiles en eux-mêmes, mais le point plus large que je veux faire valoir est que nous devrions tous essayer de penser un peu plus en dehors de la boîte en ce qui concerne la vitesse du site. Il est particulièrement important de réduire le nombre d’aller-retour nécessaires au serveur; même les petits actifs prennent un certain temps à aller chercher et peuvent avoir un impact appréciable sur les performances (en particulier les mobiles).

Il y a beaucoup plus d'idées que ce que nous avons couvert ici, alors veuillez sauter dans les commentaires si vous avez d'autres choses que vous avez croiser.