web-dev-qa-db-fra.com

Comment puis-je résoudre le rendu du contenu au-dessus du pli pour les fichiers CSS si j'utilise Cloudflare?

Je voulais apprendre à augmenter le nombre de pages que je charge lors de la création de sites et lors de recherches, en apprenant sur Google PageSpeed ​​Insights . Après avoir testé mon site, je me suis rendu compte que Google me marquait 79 sur 100 et les problèmes concernent mes fichiers CSS:

  • API Google Font
  • Bootstrap CSS à partir d'un CDN
  • CSS par défaut (style.css) pour WordPress

Après de nombreuses recherches pour apprendre à résoudre Eliminate render-blocking JavaScript and CSS in above-the-fold content, j'ai rencontré:

Pour aborder les polices Google, je pensais déplacer les appels de police de style.css vers la tête dans les balises style, mais je ne suis pas sûr de l’approche que je devrais adopter pour les deux autres fichiers CSS.

D'autres recherches ont produit:

Après avoir lu toutes ces informations, je suis un peu dépassé si je devais avoir une autre solution pour mettre en cache mes fichiers si j'ai déjà implémenté le cache de Cloudflare ou si déclarer la version du fichier dans la wp_enqueue_script() suffirait? Que dois-je faire pour résoudre mon problème CSS avec PageSpeed ​​afin de résoudre Your page has 3 blocking CSS resources. This causes a delay in rendering your page.?

wordpresscachecloudflaregoogle-pagespeed
1
DᴀʀᴛʜVᴀᴅᴇʀ

La meilleure pratique pour l'optimisation CSS et, en particulier, pour la suppression de CSS bloquant le rendu de la zone d'en-tête du document HTML ne se fait pas en une seule étape.

Eh bien, vous êtes effectivement en mesure de supprimer tout le code CSS au bas de la page et de le reporter (chargez-le après l'événement onLoad). Si cela fonctionnait n'importe où - ce serait tout le travail.

Mais dans certaines circonstances (dans certains navigateurs/avec certains agents utilisateurs), l’utilisateur obtiendra FOUC - un contenu illimité.

Pour éviter le fouc, vous devriez:

  • apprendre à connaître les règles de style nécessaires pour afficher votre zone au-dessus du pli,
  • incluez ces règles de style dans l'en-tête de votre document HTML, à l'aide de la balise <style>-.

Pour que ces règles de style sachent qu'il existe de nombreuses approches différentes, toutes ne sont pas triviales. Beaucoup de ces outils sont listés sur un page github d'un googler . Un simple est ici à trouver.

De la même manière, non seulement les règles de style, mais aussi les images et les polices - comme les URI de données de base64 devraient être insérés dans la tête.

Enfin, votre document HTML augmentera - mais si le navigateur obtient vraiment toutes les informations nécessaires pour afficher la zone au-dessus du pli, il suffit de lire un seul document HTML (aucune demande de fichier supplémentaire, TCP connexions, poignée de main, tout ce jazz), votre travail d'optimisation est fait à 98,5%.

1
Evgeniy