Créer un site Web n'est plus difficile, du moins en surface. Tout le monde peut prétendre créer un site Web pour vous. Mais le secret d'un site Web haute performance est ce qui se fait au niveau du serveur principal et est imprégné d'une complexité technique que la plupart des concepteurs Web n'ont aucun intérêt ou connaissance. Explorons certains de ces secrets qui propulseraient votre site Web vers le ciel avec de meilleurs scores PageSpeed ​​et YSlow (pour un meilleur référencement), et en particulier pour les utilisateurs mobiles.

L'erreur de la conception Web

Pour certains clients, tout ce qui leur importe, c'est un «joli» site Web. Ils veulent des blings flashy, avec des images plein écran, des vidéos robustes et des scripts flashy de toutes sortes. Pour ces clients, ils ont cette idée erronée que les clients et les visiteurs payants aiment les sites Web de cette façon. Malheureusement, c'est une erreur qui est toujours soutenue par certaines agences et concepteurs de sites Web qui ne savent pas mieux ou qui ont trop peur de passer du temps à expliquer comment les sites Web fonctionnent réellement.

Vous voyez, un bon site Web est destiné à fournir des informations avec des appels à l'action (CTA) afin que les visiteurs puissent être tournés vers des prospects et des clients. Un bon site Web doit donc servir 2 objectifs principaux:

  1. Peut être trouvé par les visiteurs via les moteurs de recherche (pensez à Google).
  2. Doit être rapide à tout visiteur du monde entier, d'autant plus que nous vivons actuellement dans une économie mondiale, avec Amazon comme exemple.

Ces deux objectifs principaux sont intimement liés. Google n'indexera votre site Web que s'il est pertinent (pas plein de «spam»), sécurisé (sans logiciel malveillant ni publicité malveillante), rapide (contenu optimisé) et adapté aux mobiles. Le fait de ne pas respecter l'un de ces critères pénalisera votre site Web, et les puits sont de plus en plus en retard dans l'index Google.

Et pour les utilisateurs? Les utilisateurs sont impatients et de plus en plus.

Si votre site Web se charge très lentement sur le Wi-Fi public ou sur un mobile, il continuera (selon une statistique mesurable appelée "taux de rebond"). Si votre site Web est lourd et lent, les visiteurs vont attendre quelques secondes et cliquer ailleurs. Vous venez de perdre la seule et unique opportunité d'engager un nouveau prospect.

Certains concepteurs Web exécuteront votre prototype de site Web sur un disque local qui n'aura évidemment aucune pénalité de vitesse, et vous ne réaliserez peut-être pas à quel point votre site Web sera lent dans la vie réelle. Certains peuvent héberger votre prototype de site Web dans une dorsale locale en fibre, et vous pouvez également penser que le site Web est assez rapide. Mais la réalité est que le site Web ne semblera rapide que si vous êtes sur la même épine dorsale et que vous ne traversez pas trop de sauts.

Concevoir des téléphones mobiles n'est pas aussi facile qu'il n'y paraît. La plupart des concepteurs Web utiliseront un thème CMS (système de gestion de contenu) qui est «responsive», et dans les circonstances habituelles, votre site Web pourra être consulté sur un téléphone mobile.

Cependant, le diable est dans les détails, et beaucoup de ces thèmes utilisent des frameworks très lourds, qui ralentiront la vitesse de votre site Web, en particulier pour les mobiles, et seront mal classés dans les tests mobiles.

Voyons maintenant comment tester votre site Web pour voir s'il sera compatible avec Google, avec la bande passante et pour les mobiles.

Le biais éducatif est un problème

De nombreuses écoles se concentrent sur la conception de sites Web et oublient que le DÉVELOPPEMENT est tout aussi important, voire plus important que la conception, lorsqu'il s'agit de créer un bon site Web.

Et comme beaucoup de gens se concentrent uniquement sur l'esthétique plutôt que sur les complexités techniques, le composant de développement manque à de nombreux utilisateurs de sites Web. Je sais, car j'ai interviewé d'innombrables candidats, et la plupart n'ont pas réussi à faire le genre de travail dont j'avais besoin. Même les fournisseurs d'hébergement Web ne sont pas exemptés.

J'ai parlé à des collègues très sympathiques dans les domaines du support technique des sociétés d'hébergement Web, et ils ont été assez honnêtes pour m'avouer que ce que j'ai communiqué avec eux était «au-dessus de leur niveau de rémunération» (en citant leurs mots). J'ai dû dépanner et résoudre moi-même de nombreuses complexités techniques tout au long du long voyage ardu depuis 1996 à aujourd'hui (21 ans!).

Le site Web est-il vraiment adapté aux mobiles?

Il est facile de faire fonctionner automatiquement un thème adapté aux mobiles (réactif). Ce que beaucoup de gens ne réalisent pas, c'est qu'un site Web doit non seulement être visuellement compatible avec un smartphone, mais également compatible avec la bande passante - c'est-à-dire se charger assez rapidement sur un mobile sur une connexion 3G ou peut-être 4G.

Le moyen simple et gratuit de tester votre site Web est d'utiliser le navigateur que le roi des moteurs de recherche a créé - le Google Chrome navigateur.

Sous le navigateur Outils de développement option, sélectionnez Réseau Étranglement options et sélectionnez "Bon 3G»(Une bonne estimation pour de nombreux utilisateurs de smartphones dans cette partie du monde développé), et cliquez sur«Désactiver le cache" .

Au bas de l'écran, vous remarquerez 3 lectures:

  • Demandes,
  • (Les données) Transféré
  • finition (il est temps de charger complètement la page).

Moins il y a de demandes, plus les données transférées sont petites et plus la fin est courte (temps de chargement complet de la page), plus votre site Web est adapté aux mobiles en termes de bande passante mobile.

Par exemple, notre site Web fait 23 demandes, a une taille de 640 Ko et se charge complètement en 6.6 secondes sur une connexion mobile 3G.

20170423_chrome3g_mb1

Test de limitation du réseau Chrome - notre propre site Web

Voici un exemple de page d'agence de conception Web, qui fait 79 demandes, fait 1.5 Mo, et se charge en 9.81 secondes sur une connexion mobile 3G.

20170423_chrome3g_webdevcd1

Test de limitation du réseau Chrome - une agence de conception Web

Voici une boutique en ligne de commerce électronique que nous avons conçue, qui héberge 50 choix de produits sur cette page, et fait 70 demandes, mesure 1.1 Mo (en raison des 50 produits) et se charge en 9.76 secondes.

20170423_chrome3g_ecommepshub1

Test de limitation du réseau Chrome - un site de commerce électronique que nous avons développé

Voici une boutique en ligne de commerce électronique d'une autre société, avec 244 requêtes, 6.7 Mo de taille, et se termine le chargement en 39.91 secondes. Il est extrêmement hostile à un utilisateur mobile et le taux de rebond sera élevé. Il aurait été plus sage de réduire le nombre de demandes sur chaque page avec un design plus intelligent, et ainsi de réduire la taille totale de la page et son temps de chargement.

20170423_chrome3g_ecommchallgr1

Test de limitation du réseau Chrome - un grand site de commerce électronique local

Bien que nous puissions mesurer la convivialité d'un site Web pour le mobile et sa bande passante correspondante, qu'est-ce qui détermine ces performances? Nous le découvrirons dans un instant.

Les compétences d'administration et de sécurité des serveurs sont essentielles

Pour un site Web CMS typique, le concepteur Web typique bricole uniquement la partie WordPress, avec des thèmes, des plugins et du contenu (texte, images et liens vers des vidéos et autres contenus). Ce n'est vraiment pas sorcier et même dans ce cas, de nombreux concepteurs Web échouent au niveau critique de la sécurisation correcte du site WordPress.

J'ai le privilège d'être un praticien de la sécurité depuis 1996, et j'ai réalisé des programmes de sécurité et consulté à des niveaux stratégiques, pour au moins comprendre ce qui doit être fait. Mais de nombreux jeunes créateurs n'auront pas ce mandat ou ces connaissances. Pour les plugins de sécurité WordPress, une mauvaise configuration peut faire tomber le site Web (500 erreurs interdites) et même verrouiller complètement les utilisateurs légitimes. Et le manque de sécurité peut faire tomber le site Web très facilement en raison des fréquentes attaques DDoS (déni de service distribué) et par force brute. C'est un facteur critique et ne doit pas être traité à la légère.

Certains concepteurs Web ne se concentrent pas (ou n'ont aucune expertise dans) l'administration des serveurs, ce qui fait la différence dans votre Scores PageSpeed ​​et YSlow, ainsi que les performances mobiles, car nombre de ces paramètres ne peuvent être configurés que sur le serveur.

Un bon site Web qui a un référencement de qualité (optimisation des moteurs de recherche) et une optimisation de contenu nécessite des connaissances en programmation et en administration de serveur, telles que Apache configuration / sécurité du serveur web, PHP langage de script et SQL gestion de base de données pour peaufiner WordPress CMS. Ces compétences techniques sont du domaine des programmeurs et des développeurs.

Quelques anecdotes qui peuvent améliorer les performances et la sécurité de votre site Web, mais qui peuvent être négligées par de simples concepteurs, sont également les versions de votre logiciel de serveur Web Apache (ou d'un autre logiciel de serveur Web comparable), PHP et SQL.

Par exemple, utilisez-vous au moins Apache 2.4x, PHP 7 et MariaDB 10? Encore une fois, cela nécessitera quelques ajustements pour que votre site Web fonctionne correctement.

GTmetrix à la rescousse

GTmetrix est une excellente plateforme de test pour vérifier la vitesse et l'optimisation de votre site Web. Si vous sélectionnez un concepteur Web ou une agence, utilisez GTmetrix comme test décisif pour leurs compétences. Un bon concepteur ou une bonne agence devrait au moins être en mesure d'optimiser son site Web pour la vitesse.

Il y a 2 scores que vous devez connaître, PageSpeed YSlow, qui sont des moyens courants pour les professionnels de l'industrie de mesurer la vitesse et l'optimisation d'un site Web, et de découvrir comment améliorer le site Web en conséquence.

Il est plus facile d'obtenir un score PageSpeed ​​plus élevé, tandis que le score YSlow est beaucoup plus strict. Vous pouvez marquer un B pour PageSpeed ​​et un D pour YSlow. À mon avis, un bon site Web devrait être un A pour PageSpeed ​​et un B ou mieux pour YSlow.

Quel est le score de votre site Web?

Outre les scores PageSpeed ​​et YSlow, d'autres facteurs critiques que vous pouvez discerner à partir de GTmetrix sont:

1) Temps entièrement chargé - une véritable mesure de la vitesse et de la taille d'une page Web, car certaines personnes peuvent utiliser "charge paresseuse”Pour charger les images de manière asynchrone, mais les utilisateurs doivent toujours charger la page entière pour tout lire.

2) Taille totale de la page - est-il assez petit pour les mobiles? La bande passante de la page Web est-elle compatible avec le Wifi public lent ou la 3G? C'est là que vous avez besoin de raison plutôt que d'obsession. L'un des défauts courants des concepteurs Web (y compris de certains grands magasins) est que les images ne sont pas optimisées pour le Web. Par exemple, vous n'avez PAS besoin d'une image de 4,000 1,200 pixels (largeur) pour le Web, qui est davantage destinée à l'impression. Une image de 1986 XNUMX pixels (largeur) avec une compression d'image optimale est suffisante. De plus, diffusez des «images mises à l'échelle», qui exigent davantage du concepteur Web, mais qui aideront à améliorer PageSpeed ​​et les performances. Rappelez-vous que notre vision humaine est basée sur une logique floue et est très sophistiquée pour distinguer les détails sans avoir besoin d'une résolution complète ou élevée. En tant que pionnier de la conception de médias interactifs depuis XNUMX, je vous assure qu'il existe de nombreuses astuces incroyables que l'on peut utiliser pour réduire considérablement la taille des images et rendre le site Web léger.

3) Demandes - le nombre de requêtes HTTP vers divers sites et serveurs afin de répondre à la diffusion de l'ensemble de la page. Certains sites font des centaines de requêtes serveur, ce qui est beaucoup trop. Pour les demandes légitimes telles que CSS (feuilles de style en cascade) et JS (Javascript), combinez-les et réduisez-les si possible. Inline de petits fichiers CSS et JS chaque fois que vous le pouvez. Les appels HTTP inutiles peuvent réduire la convivialité d'un site Web, augmenter les taux d'erreur, réduire la vitesse et également soulever des problèmes de sécurité et de confidentialité. De telles demandes se produisent souvent avec des domaines de cookies, des fournisseurs de publicité, des plates-formes vidéo, des plates-formes de médias sociaux, etc. Utilisez les demandes judicieusement. Si nécessaire, choisissez les dénominateurs les plus bas et consolidez ou rationalisez les demandes.

4) La mise en cache - autre que la mise en cache au niveau du serveur, vous pouvez également tirer parti de la mise en cache du navigateur pour permettre à vos utilisateurs de mettre en cache le contenu sur leurs propres disques. Cela réduira le temps de chargement lorsque vos visiteurs reviendront, car ils auraient mis en cache une partie du contenu. Vous pouvez le configurer sur le serveur principal. Et sur votre site Web, configurez un plugin de mise en cache de bonne qualité.

5) Gzip - configurer votre serveur pour servir du contenu compressé, en particulier des fichiers texte tels que HTML, JS et CSS. Certaines pages peuvent être compressées jusqu'à 70% et vous aideront avec vos temps de chargement globaux.

6) Rester en vie - configurez votre Apache pour activer les connexions HTTP persistantes afin que les mêmes connexions puissent envoyer et recevoir des requêtes synchrones, augmentant ainsi la vitesse pour vos utilisateurs.

7) Expirer les en-têtes - encore une autre configuration au niveau du serveur qui peut être configurée sur le serveur ou au niveau du site Web. La plupart des contenus peuvent avoir un en-tête d'expiration désigné, où le contenu transitoire tel que le texte peut avoir une expiration plus courte, tandis que les images, vidéos, documents et scripts peuvent avoir une expiration plus longue car ils sont moins susceptibles de changer souvent. La mise en garde concerne certains scripts externes (tels que les scripts de Google), car nous n'aurons pas de contrôle au niveau du serveur sur ceux-ci, et nous ne pouvons donc pas leur désigner des en-têtes d'expiration.

Voici un exemple de nos scores GTmetrix, montrant A pour PageSpeed ​​et YSlow, avec un temps de chargement complet très court (1.8 s), une petite taille de page totale (693 Ko) et 22 demandes:

20170423_gtmetrix_mb1

Score GTmetrix - notre propre site web

Voici un exemple de fournisseur d'hébergement Web, ayant un E pour PageSpeed ​​et YSlow, avec un temps de chargement complet de 7 secondes, une taille de page totale de 2.22 Mo et 170 requêtes incrédules.

20170422_gtmetrix_sgwebhost1

Score GTmetrix - un grand hébergeur

Voici un exemple d'agence de conception Web, ayant un A pour PageSpeed ​​mais un C pour YSlow, avec un temps de chargement complet de 23.9 secondes très lent, une taille de page totale de 2.66 Mo, avec 52 demandes.

20170422_gtmetrix_sgwebdesign1

GTmetrix Score - une agence de design web

Boost CDN

Un réseau de diffusion de contenu (CDN) peut ajouter un coup de pouce supplémentaire, même s'il n'est pas entièrement nécessaire si vous avez effectué une configuration de bonne qualité pour activer un score A pour PageSpeed. YSlow attache une valeur aux CDN, donc si vous n'exécutez pas de CDN, votre score YSlow diminuera. Il existe différents CDN, et autant que possible, DÉPENSEZ sur un bon CDN car les CDN gratuits ne fonctionneront jamais aussi efficacement qu'un CDN dédié payant. Il n'y a pas de déjeuner gratuit dans le monde.

Donc, si vous avez un site Web, je suggère de le tester par rapport à GTmetrix et Google Chrome dès maintenant, et d'avoir une idée de ce qui peut être amélioré. Si les scores sont abyssaux et troublants, ne vous inquiétez pas, car il existe des techniques éprouvées sur votre serveur principal pour faire les choses correctement. Ce ne sera pas une courte promenade facile dans le parc, mais cela en vaudra la peine car vous augmenterez vos scores et réduirez les pénalités de référencement. Et si vous n'avez pas encore de site Web et que vous parlez à des concepteurs et des agences Web potentiels, testez leurs propres sites Web avec GTmetrix et Google Chrome. Ensuite, trouvez les bonnes personnes pour vous aider à avancer.

Dr Seamus Phan est le CTO et responsable du contenu chez McGallen & Bolden. Il est un expert en technologie, stratégie, image de marque, marketing, formation au leadership et gestion de crise. Cet article peut apparaître simultanément sur son blog. Connectez-vous sur LinkedIn. © 1984-2020 Seamus Phan et coll. Tous les droits sont réservés.