Optimisation de code – comment faire perdre du poids aux pages – le HTML – 1/5

par

Voici un dossier apportant toutes les informations possibles sur les bonnes pratiques de l’optimisation des pages WEB. Celui-ci a été traduit de la source suivante:
http://browserdiet.com/
Bonne lecture à tous.

Est-ce que la performance est vraiment importante?

Bien sûr, que c’est important et vous le savez. Alors pourquoi continuez à développer des sites lents qui mènent à une mauvaise expérience utilisateur? Voici un guide pratique axé sur les bonnes pratiques de la communauté qui va vous montrer comment afficher des sites Web plus rapidement. Ne perdons pas plus de temps, et commençons!

Evitez le code interne

Il ya deux façons pour vous d’inclure du CSS ou du JavaScript dans votre page.
1) Interne: le CSS est défini à l’intérieur d’une balise <style> et le code JavaScript depuis une balise <script>.
2) externe: le CSS est chargé à partir d’un <link> et le code JavaScript par l’attribut src de la balise <script> .

La première option, en dépit de la réduction du nombre de requêtes HTTP, augmente en fait la taille de votre document HTML. Mais cela peut être utile lorsque vous avez des petits ajustements car le coût d’une requête vers une url externe est supérieure. Dans ce cas, exécutez des tests afin d’évaluer s’il ya des gains réels en matière de vitesse. Veillez également à évaluer le but de votre page et son public: si vous vous attendez à ce que les gens la visitent une fois seulement, par exemple pour une campagne tempororaire  et qu’ils n’y reviennent jamais, le code interne aidera à réduire le nombre de requêtes HTTP.

> Évitez la création manuelle CSS / JS au milieu de votre code HTML (automatiser ce processus avec des outils de préférence).

La deuxième option améliore non seulement l’organisation de votre code, mais permet également de mettre en cache navigateur. Cette option doit être privilégiée pour la majorité des cas, en particulier lorsque vous travaillez avec des fichiers volumineux car le coût de l’interne est plus grand.

> Un outil utile: Assetgraph-builder .

Styles en haut, et scripts en bas

Lorsque nous mettons des feuilles de style dans le <head> nous permettons à la page de s’afficher progressivement, ce qui donne l’impression à nos utilisateurs que la page se charge rapidement.

Mais si nous les mettons à la fin de la page, la page sera rendue sans styles jusqu’à ce que les CSS soient téléchargés et appliqués.

D’autre part, lorsqu’il s’agit de JavaScript, il est important de placer les scripts en bas de la page, car ils bloquent le rendu pendant qu’ils sont en cours de chargement.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Browser Diet</title>
  <!-- CSS -->
  <link rel="stylesheet" href="style.css" media="all">
</head>
<body>
  <p>Lorem ipsum dolor sit amet.</p>
  <!-- JS -->
  <script src="script.js"></script>
</body>
</html>

Minimiser votre code html

Pour maintenir votre code lisible, c’est une bonne idée d’écrire des commentaires et d’utiliser l’indentation.

<p>Lorem ipsum dolor sit amet.</p>

<!-- My List -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

Mais pour le navigateur, rien de tout cela n’importe réellement. Pour cette raison, il peut être utile de minimiser votre HTML avec des outils.

<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>

Cela va diminuer la taille du fichier, et par conséquent, vos utilisateurs pourront profiter de téléchargements, d’analyse et d’exécution plus rapides.

> Un outil utile: HTML Compressor .

Essayez les attributs async et defer sur vos scripts

Pour expliquer comment ces attributs sont utiles pour de meilleures performances, il est préférable de comprendre ce qui se passe quand on ne les utilise pas.

<script src="example.js"></script>

Sous cette forme, la page doit attendre que le script soit entièrement téléchargé, analysé et exécuté avant d’être capable d’analyser et de rendre tout le HTML ci-dessous.Cela peut augmenter de manière significative le temps de chargement de votre page. Parfois, ce comportement pourrait être désirée, mais généralement ce n’est pas le cas.

<script async src="example.js"></script>

Ici, le script est téléchargé de manière asynchrone alors que le reste de la page continue de se faire analyser. Le script est assuré d’être exécuté dès que le téléchargement est terminé.

<script defer src="example.js"></script>

Tout comme l’exemple ci-dessus, le script est téléchargé de manière asynchrone. Mais il est exécuté uniquement lorsque la page a été complètement analysée.

Optimiser l’affichage des Vidéos Youtube

Lorsque vous chargez une vidéo Youtube (iframe), vous chargez énormément de données supplémentaires. Si l’internaute ne les utilise pas, elles sont donc chargées pour rien. L’astuce consiste ici à remplacer le chargement de la vidéo par une image, et n’appelez la vidéo qu’au moment du clic. Par conséquent, plutôt que d’avoir:

<iframe width="320" height="180"
     src="http://www.youtube.com/embed/LcIytqkbdlo">
</iframe>

essayez d’avoir

<div class="youtube" id="LcIytqkbdlo" style="width: 320px; height: 180px;"></div>
<script src="https://labnol.googlecode.com/files/youtube.js"></script>

Pour lire la suite, cliquez sur la flèche ci-dessous.


Articles relatifs:

5 réflexions au sujet de “Optimisation de code – comment faire perdre du poids aux pages – le HTML – 1/5”

  1. Ping : Comment choisir une agence web qui connait le SEO | Game And Me
  2. Ping : Rendez votre site rapide comme l'éclair ! | Nesasio - Part 1

    • Moins de 2 secondes, c est parfait (amazon)
      Entre 2 et 6 secondes, c ‘est bien.
      Entre 6 et 10 secondes, c’est bof.
      Au delà, l’internaute s’en va…

      Répondre
  4. Ping : Comment passer votre site Wordpress en PWA ? - Game And Me

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.