Réduire la taille de vos ressources

Accélérer votre site

Un site web plus véloce améliore
le référencement

La réactivité d'un site web devient un critère important pour le référencement de votre site sur google. La vitesse de chargement d'un site Internet représente également un critère crucial de satisfaction pour vos lecteurs. Que faire pour optimiser le chargement des pages de votre site Internet ?

Une vitesse de chargement trop lente influence le nombre total de pages indexées. En fait, puisque un robot a des milliards de pages à indexer quotidiennement, Googlebot ne dispose pas de temps à " gaspiller " sur un site Web trop lent.

Si vos pages sont rapides, celui-ci disposera sûrement du temps nécessaire pour tout crawler. Autrement, vos nouvelles pages vont être indexées moins rapidement et votre référencement naturel en sera retardé d'autant.

Google vous recommande de faire apparaître le premier octet en moins de 200ms et le début de l'affichage (au-dessus de la ligne de flottaison) moins d'une seconde. 

Voici nos recommendations :

Optimiser vos CSS

Les fichiers CSS sont parfois volumineux et freinent le chargement d'une page.

Supprimer les propriétés CSS inutiles avec unused.

Utiliser la syntaxe étendue.

Regrouper les propriétés ayant des valeurs similaires.

Employer des données hexadécimales pour les couleurs (ex : color:#FFF au lieu de color:white).

Contrôlez vos fichiers CSS avec w3C.

Renoncez aux polices Google gourmandes en temps et en requêtes.

Rapportez toutes vos Font (polices de caractères) sur votre serveur avec fontsquirrel.

Privilégier le format woff2 pour vos polices.

Minifier vos fichiers CSS et supprimer les commentaires.

ATTENTION !

Avant de diffuser le fichier épuré, faire une copie de l'ancien fichier.
Quelquefois, les outils de vérification et de nettoyage du code retirent une parenthèse, un point-virgule,
ou d'autres caractères pouvant modifier la mise en page. Je vous souhaite bonne chance pour les identifier. 

Maximiser vos JavaScript

Les fichiers JavaScript sont le premier ennemi du webmaster en matière de rapidité et d'optimisation SEO. La bonne manière d'optimiser les fichiers JS reste de les éviter. 

Quelques sites web contiennent des animations fortes et jolies, mais toutes pilotées par JavaScript qui réduit énormément la vitesse de chargement. Cela est particulièrement le cas de wordpress et de ses plugins.

Les barres de boutons de partage sur les réseaux sociaux, notamment, fonctionnent en JavaScript. Ces fichiers JS correspondent à des fichiers externes hébergés sur un autre serveur que le vôtre. En analysant le temps de chargement de ces JS avec le "module développeur" de votre navigateur, vous constaterez le temps que cela nécessite et les requêtes.

De plus, ces fichiers externes sont tous dotés d'un temps de mise en cache bien trop court. Nous pouvons tenter de les récupérer en interne pour attribuer votre propre temps de mise en cache, par contre tous ne le prévoient pas.

Minifier vos fichiers Javascript et éliminer les commentaires.

Compresser vos images

Les photos sont le deuxième problème majeur du webmaster qui désire accélérer son site. 

Compressez vos images sur chaque page avec FileOptimizer (Jpg, Png, SVG) .

Redimensionnez ses images à la bonne dimension.

Choisir le format Jpg pour les photos, Png pour les dessins et Svg pour les icônes.

Le format Webp est préconisé par PageSpeed Insights mais méfiez-vous, bien qu'il reste plus léger et de ce fait plus rapide, celui-ci ne peut pas encore être pris en charge par tous les navigateurs. Convertir vos fichiers en Webp .

Ce format offre une multitude d’utilisation : photo, image animée et graphique. Le format WebP n’est compatible qu’avec les navigateurs Chrome, Chrome pour Android, Opera, Opera Mini, le navigateur Android, firefox, firefox android, edge, Android Browser, UC Browser for Android, Samsung Internet, QQ Browser et Baidu Browser.

Associez vos Css et JavaScript

Le navigateur devra récupérer des ressources sur votre serveur de façon à visualiser votre page. Par exemple, une image = 1 requête, un fichier CSS = 1 requête, etc. Il faut donc limiter le nombre de requêtes envoyées au serveur.

Combiner c’est regrouper. Vous devez associer vos fichiers CSS en un seul. Plusieurs fichiers impliquent plusieurs requêtes. Un seul fichier correspond à une seule requête. 

De cette façon, vous épargnez les allers-retours avec votre serveur. Ce processus désengorge votre serveur et raccourcit le temps de chargement de votre page. Des outils existent pour combiner ces fichiers CSS et JS. A titre personnel, nous le faisons à la main, par choix, de manière à ne perdre aucun caractère important lors de la minification.

ATTENTION !

Certains fichiers JS devront se placer en premier pour que les autres fichiers JS dirigent correctement votre page Web. On peut citer le cas du fichier Jquery. Avant de combiner, contrôlez l'ordre de vos fichiers JS et regroupez-les dans l'ordre. 

Condenser vos fichier avec Gzip

L'utilisation de Gzip pour Apache permettra de réduire vos ressources jusqu'à 70%, chose qui n'est pas négligeable. Pour autoriser cette compression, rien de plus simple : il vous faut ajouter le code suivant à votre fichier htaccess :

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

Mise en cache de vos fichiers

La mise en cache de vos fichiers statiques déleste le serveur d'une partie de la charge. C'est le moment auquel le fichier sera non rechargé et la ressource qui sera mise en cache est utilisée. A mettre dans votre fichier Htaccess.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 20 days"
</IfModule>

Utiliser un CDN

En diminuant le nombre de requêtes adressées à votre serveur d'hébergement, un CDN se révèle utile pour réduire la consommation de ressources (telles que l'espace disque et la bande passante).

Vous bénéficierez d'une augmentation générale de la vitesse de téléchargement. Cloudflare offre aussi en version payante une mise en cache professionnelle et d’autres services pour améliorer la rapidité de votre site.

Différer vos codes JavaScript

Les fichiers JavaScript entravent le rendu de la page. D’ailleurs si vous aller sur PageSpeed insight ou GTMetrix vous le constaterez rapidement dans les notifications que vous recevrez si vous ne faites rien. 

Positionnez systématiquement vos fichiers JavaScript avant </body> .

Tentez de régler vos JS en async ou en defer (Attention, quelques fichiers JS refuseront de fonctionner. A vous de vérifier).

Certains fichiers externes peut être téléchargés sur votre serveur tout en fonctionnant. Il vous appartient de procéder à des tests à ce sujet également.

Sélectionner un bon hébergement

Un temps de réponse élevé du serveur affectera le temps de chargement de vos pages. En adoptant pour un hébergement gratuit, il ne faut pas s'attendre à des performances maximales. Privilégiez un hébergement de qualité (bonne bande passante, serveurs puissants avec mémoire). Son coût est élevé, mais il doit être rapide et efficace de sorte à ne pas altérer les performances web de votre site. 

LWS dispose d'une large gamme de services et de solutions à des tarifs avantageux. Elle fait partie des sociétés d'hébergement web présentant le meilleur rapport qualité/prix. Les serveurs et le service client sont 100% implantés en France. Les multiples offres de LWS se destinent aussi bien aux débutants qu'aux professionnels. 

Mais pour nous le meilleur reste O2Switch , il se démarque par une offre singulière et unique à un prix très attrayant. La marque a gagné son pari puisque la performance est là et elle n'a franchement rien à envier aux géants du marché.

À absolument éviter : OVH et 1&1