Aborder le blocage du rendu CSS pour un site Web de rendu rapide

Optimiser la stratégie de chargement CSS et améliorer la vitesse du rendu Web

Cet article examine la façon dont les navigateurs chargent les fichiers CSS et leur impact sur la vitesse de rendu Web, et introduit plusieurs stratégies d'optimisation pour vous aider à améliorer votre expérience utilisateur.

Problème: le rendu de blocage CSS

Si vous avez utilisé Google Page Speed ​​Insights, vous avez peut-être vu une astuce comme ceci:

Le navigateur utilise DOM et CSSOM pour rendre les pages Web. CSS est situé sur le chemin de rendu critique, ce qui signifie que le navigateur doit télécharger et traiter toutes les informations HTML et CSS pour commencer le rendu, ce qui peut entraîner des retards et un impact sur l'expérience utilisateur. Les feuilles de style externe en particulier provoqueront plusieurs aller-retour entre le navigateur et le serveur, provoquant un décalage horaire entre l'achèvement du téléchargement HTML et le rendu de la page.

Concept de clé CSS

Bien que le HTML soit crucial pour le rendu des pages, tous les CSS ne sont pas essentiels. Ce qui concerne le plus les utilisateurs, c'est le contenu de la zone visible (fenêtre) de la page. Par conséquent, les stratégies d'optimisation courantes retardent ou le chargement asynchrone des ressources de blocage, ou des pièces clés en ligne en HTML.

Stratégie d'optimisation

Voici quelques méthodes d'optimisation couramment utilisées pour les développeurs:

1. minimiser le blocage du rendu avec les types de médias et les requêtes multimédias: diviser les CS externes en différents fichiers (par exemple style.css, print.css, other.css) et utiliser le type de média et les requêtes de média appropriées se référer à eux. Par exemple:

<code class="language-html"><link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)"></code>

Le navigateur télécharge toutes les feuilles de style, mais préfère les feuilles de style non bloquant.

2. Utilisez la commande preload Commande: preload pour dire au navigateur pour obtenir des ressources spécifiques à l'avance. Combiné avec l'événement onload de JavaScript, vous pouvez implémenter des feuilles de style de chargement asynchrones:

<code class="language-html"><link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'"></code>

À l'heure actuelle, la prise en charge du navigateur de preload est limitée et vous pouvez utiliser le polyfill fourni par le groupe Filament.

3. Solutions du groupe Filament: Les politiques du groupe Filament incluent: Inline Critical CSS dans HTML et charger le CSS non critique CSS à l'aide de push du serveur HTTP / 2. Ils utilisent la bibliothèque LoadCSS, qui contient des polyfills qui ne prennent pas en charge les navigateurs preload.

4. Mettez le lien de feuille de style dans le corps du document: Cette méthode ne s'appuie pas sur le concept de "Vieille ci-dessus", mais place plutôt le lien de feuille de style avant son contenu HTML correspondant pour implémenter le rendu de page le contenu en séquence. Par exemple:

<code class="language-html"><link rel="stylesheet" href="/site-header.css">
<main>...</main>
<link rel="stylesheet" href="/article.css"></code>

Conclusion

La façon dont le navigateur télécharge les feuilles de style peut bloquer le rendu de la page et affecter l'expérience utilisateur. Plusieurs méthodes d'optimisation introduites dans cet article peuvent vous aider à résoudre ce problème et à améliorer la vitesse de chargement des pages Web. La méthode à choisir dépend de la taille et de la complexité de votre site Web.

FAQS (FAQ)

• Quel est le chemin de rendu critique (CRP)? Pourquoi est-il important pour les sites Web à chargement rapide? CRP est une séquence d'étapes pour un navigateur pour convertir HTML, CSS et JavaScript en pixels d'écran. L'optimisation du CRP peut accélérer le chargement des pages Web et améliorer l'expérience utilisateur.

• Comment optimiser les chemins de rendu des clés? CRP peut être optimisé en réduisant la taille du fichier, en minimisant le nombre de ressources critiques et en raccourcissant la longueur critique du chemin. Par exemple: fichiers compressés, CSS critique en ligne, CSS et JavaScript non critiques retardés et utilisent un chargement asynchrone.

• Qu'est-ce qu'une ressource de blocage de rendu? Comment affectent-ils la vitesse de chargement du site Web? Render les ressources de blocage sont des fichiers (généralement des fichiers CSS et JavaScript) qui empêchent les pages Web de s'afficher jusqu'à ce qu'elles soient entièrement téléchargées et traitées. Ils retardent le rendu Web et ralentissent le chargement.

• Comment éliminer les ressources de blocage du rendu? Vous pouvez éliminer les ressources de blocage du rendu en retardant les CS et JavaScript non critiques, les CSS critiques en ligne et le chargement asynchrone des fichiers.

• Quelle est la différence entre le chargement synchrone et le chargement asynchrone? Le rendu de la page Web de chargement synchrone jusqu'à ce que le fichier soit entièrement téléchargé et traité;

• Comment alimenter le CSS critique? Pourquoi est-ce bénéfique? La clé en ligne CSS est de placer CSS directement dans des documents HTML, pas dans des fichiers externes. Cela élimine le besoin de demandes de réseau distinctes, réduisant ainsi le temps requis pour rendre une page Web.

• Quel est le rôle de JavaScript dans les chemins de rendu critique? JavaScript peut fonctionner DOM et CSSOM, mais s'il n'est pas géré correctement, il bloquera également le processus de rendu.

• Comment augmenter la vitesse de chargement du site Web avec des fichiers compressés? Les fichiers compressés supprimeront les caractères inutiles (tels que les espaces et les commentaires) dans le code, la réduction de la taille du fichier et l'accélération des téléchargements.

• Quels outils peuvent être utilisés pour analyser et optimiser les chemins de rendu critiques? Les outils tels que Google Pagespeed Insights, Lighthouse et WebPageTest peuvent aider à analyser et à optimiser les chemins de rendu critiques.

• Comment optimiser les chemins de rendu clés pour améliorer l'expérience utilisateur? L'optimisation des chemins de rendu critique peut réduire le temps de chargement des pages Web et améliorer l'expérience utilisateur. Les vitesses de chargement plus rapides peuvent améliorer la satisfaction des utilisateurs et potentiellement améliorer les classements des moteurs de recherche.

(Un contenu de cet article est fourni par Siteground)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!