Depuis la plupart des outils en ligne visant à analyser le site pour détecter des problèmes et des données techniques, le service PagesPeed Insights de Google s'est avéré être le plus populaire. Malgré l'importance de ses recommandations, beaucoup essaient d'atteindre des points chéris pour estimer la vitesse de leur ressource. Mais en fait, l'importance de certains articles est très exagérée.
Dans cet article, nous examinerons les caractéristiques et les solutions aux problèmes les plus courants identifiés par le service PagesPeed Insights. Et au résultat final, nous recevrons une estimation d'au moins 85-95 points, ce qui est essentiellement pour améliorer la vitesse de charge WordPress.
Optimiser WordPress pour le service PagesPeed Insights
Toutes les actions à résoudre des problèmes vont essayer de limiter uniquement l'utilisation de fragments de code individuels, autant que possible. Commençons par le fait que nous courons dans les services pour mesurer et évaluer ce moment Vitesse du site et son optimisation.
Nous écrivons ou enregistrons nos résultats et commençons à travailler sur le site.
Activer la compression GZIP
Le premier à démarrer, il est donc d'inclusion de la compression GZIP pour réduire le volume donné à la transmission entre l'expéditeur et les destinataires. Cette fonction, en théorie, est activée par défaut sur de nombreux hébergements. S'il n'est pas activé avec vous, insérez le code suivant dans fichier de configuration. .htaccess.
NGINEX Server Code:
Gzip sur; gzip_comp_level 2; gzip_http_version 1.0; Gzip_proxied tout; gzip_min_length 1100; gzip_buffers 16 8k; GZIP_TYPES Texte / Texte simple / Texte HTML / CSS Application / X-JavaScript Texte / Application XML / Application XML / XML + Texte RSS / JavaScript; gzip_disable "msie. (?!. * Sv1)"; Gzip_vaire sur;
Supprimer JavaScript et CSS Code bloquant l'affichage de la page supérieure
C'est l'un des articles où ce n'est pas tout à fait la bonne recommandation. Nous parlons Pas sur tous les fichiers connectés dans la balise de tête, mais uniquement à propos de ceux qui sont responsables de l'exactitude de l'affichage du site. Si nous reportions, disons, le fichier de style principal est en bas, le site des premières secondes du téléchargement sera chargé sans styles. Par conséquent, l'utilisateur verra une page erratique avec des éléments Web désintéressés et absolument aucun style (c'est-à-dire "nue").
Par conséquent, vous n'avez pas besoin de modifier la connexion des styles de site et de les transférer au sous-sol ou de mettre en dernier lieu. Mais sur le reste, il est logique de réviser leur emplacement. Au plugin Meilleur WordPress Minify. Il existe un Gestionnaire de fichiers CSS et JS intégré. En utilisant, vous pouvez facilement modifier la connexion des scripts, c'est-à-dire pour transférer de la tête vers pied.
Scripts de connexion
En ce qui concerne la connexion de leurs scripts au sujet, il est préférable de les combiner dans un fichier pour réduire le nombre de demandes. Et après la connexion non via la balise de script, comme d'habitude, mais à travers les fonctions de fichier.php dans le pied de page du site, alors:
Fonction my_scripts_mesthod () ("ID-script", get_template_directory_uri (). "/Js/script.js", tableau (), , true);) add_action ("wp_enqueue_scripts", "my_scripts_method");
Connecter le script uniquement sur une page spécifique.
Fonction MY_SCRIPTS_METHOD () (if_Page ("1984")) ("ID-Script", get_template_directory_uri (). "/Js/script.js", tableau (), NULL, TRUE);));));)););) , "My_scripts_mesthod");
Connexion d'un script dans tous les types d'enregistrements, non seulement sur le principal.
Fonction my_scripts_mesthod () (if_enqueue_script ("ID-Script", get_template_directory_uri (). "/Js/script.js", tableau (), NULL, TRUE);)) Ajouter_action ("WP_ENQUIE_SCRIPTS", "MY_SCRIPTS_METHOD");
Connecter le script uniquement dans l'article.
Fonction my_scripts_mesthod () (if_enqueue_script ("ID-Script", get_template_directory_uri (). "/Js/script.js", tableau (), NULL, TRUE);)) Ajouter_action ("WP_ENQUIE_SCRIPTS", "MY_SCRIPTS_METHOD");
Tout est assez simple: changer uniquement la fonction de la condition. Pour vous connecter à une filiale, vous devez modifier la fonction de chemin à ce get_styleesheet_directory_uri ().
Styles de connexion
Les styles de WordPress sont connectés à l'aide de la fonction wp_enqueue_style dans le titre du site. En principe, il est correct, la fonction n'a donc aucun paramètre pour modifier l'emplacement de la connexion. Mais si vous avez vraiment besoin de styles pour vous connecter au sous-sol du site, vous pouvez le faire:
/ * Pied de style * / Funection my_add_footer_styles () (wp_enqueue_style ("ID-style", get_template_directory_uri (). "/Cs/style.css", tableau (), "1.0");); add_action ("get_footer", "my_add_footer_styles");
Et avec l'aide de fonctions conditionnelles qui ont été utilisées légèrement au-dessus, définissez certains points de connexion.
Connecter la bibliothèque de jQuery
Par défaut, WordPress connecte la bibliothèque de son répertoire et dans le titre du site. Si nous devons changer la version de jQuery ou l'enregistrer au sous-sol, nous supprimons d'abord l'ancien à l'aide de la fonction WP_DEREGISTRISTER_Script et enregistrez-le immédiatement le vôtre.
/ * Enregistrement jQuery * / fonction jquery_script_mesthod () (wp_deregisterr_script ("jQuery"); wp_register_script ("jQuery", "https://code.jquerery.com/jquery-2.0.0.min.js", false, , faux); wp_enqueue_script ("jQuery");) add_action ("wp_enqueue_scripts", "jquery_script_mesthod");
Éteignez les styles de plugins
De nombreux plugins relient leurs styles dans l'en-tête du site, où même la première charge du téléchargement peut aller. Ce n'est pas tout à fait raison, surtout si elles ne sont pas prioritaires. Vous pouvez le faire: Trouvez des styles de branchement enfichables.
Exemple de WP-Pagenavi
Wpor_enqueue_style ("wp-pagenavi", $ css_file, false, "2.70");
La copie de son identifiant unique est WP-Pagenavi et une fois que le fichier Funks.PHP est inséré par ce code:
Add_ction ("wp_print_styles", "my_deregister_styles", 100); Fonction my_deregister_styles () (wp_deregisterr_style ("wp-pagenavi");)
Donc, tous ne sont plus, uniquement dans ce cas, vous devez déplacer ce style de plug-in, bien sûr, si nécessaire.
Transférer tous les scripts au pied de page
Il y a un si petit plugin que l'auteur de Vladimir Prelovac a écrit. Il transfère toutes les connexions, même ceux qui n'ont pas besoin, au bas du site. Utiliser à votre discrétion.
Fonction Foote_Enqueue_scripts () (Supprimer_action ("wp_head", "wp_print_scripts"); retirer_action ("wp_head_scripts", "wp_print_head_scripts", 9); remove_action ("wp_enqueue_scripts", 1); add_print_scripts "," WP_PRINT_SCRIPTS ", 5); add_action (" wp_footer "," wp_enqueue_scripts ", 5); add_action (" wp_footer "," wp_print_head_scripts ", 5);) add_action (" Feather_enqueue_scripts ");
Utilisez un cache de navigateur
Dans ce paragraphe, le service Google recommande d'utiliser une mise en cache de navigateur, ce qui réduira la charge sur le serveur. Tout cela est le cas, mais tout n'a pas besoin d'être mis en cache, en particulier, des statistiques de Yandex ou de Google même. Plus précisément, ils sont déjà mis en cache, mais seulement pendant une courte période. Un tel avertissement peut ignorer en toute sécurité pour la simple raison que ce sont des scripts externes et que vous ne leur avez pas accès.
Est-ce sous la forme d'exceptions, si le désir d'atteindre une évaluation maximale nécessite. Il y a quelques options: refuser de les utiliser, déplacez les scripts sur votre site. Pour Google Analytics, il existe un plugin spécial qui vous permet de télécharger la bibliothèque localement.
Quant à Yandex, il est un peu plus compliqué, car il n'y a pas de plugins similaires pour lui. Vous ne pouvez dépenser une expérience que: téléchargez le script métrique à l'adresse https://mc.yandex.ru/metrika/watch.js., enregistrez-le sur le site et, en relation avec modifier le chemin de script. Comment ça va fonctionner - je ne sais pas. Ceci n'est qu'une des options.
En attendant, allumez la mise en cache du navigateur. Pour ce faire, placez la liste ci-dessous soumise au fichier .htaccess.
NGINEX Server Code:
Emplacement ~ * \\. (JS | CSS | PNG | JPG | SVG | JPEG | GIF | ICO) $ (expire 2D; add_header cache-contrôle "public, sans transformation";)
Optimiser les images
Ce n'est pas une remarque banale, car il pouvait sembler à première vue, et un détail très important qui a une relation directe à l'amélioration de la charge du site. Plus la page sera longue de la page sera chargée. Personne ne dit que vous devez absolument abandonner les fichiers multimédias. Il suffit de devoir être optimisé avant d'ajouter sur le site.
Ils vont couper des fichiers à la volée.
Et la meilleure chose à prendre juste une copie de n'importe quel fichier, renommez-la, par exemple, script.min.js, mettre le code abrégé là-bas et vous connecter au lieu de ce qui était. Dans tous les cas, cela peut être fait avec ces fichiers que vous ne modifiez pratiquement jamais ou très rarement. Lorsque le service Pagespeed Insights est terminé, un lien pour télécharger tous les fichiers abrégés est donné.
Résultat. En fin de compte, un très bon site optimisé avec une estimation de pas moins de 80 points devrait être libéré. Pour toutes les questions, n'hésitez pas à contacter les commentaires, je vais certainement répondre.
Je continue, maintenant devant moi un autre article que Google m'a suggéré: Supprimer le code JavaScript et CSS du haut de la page, blocage d'affichage. Maintenant, je vais essayer de comprendre ce qui est superflu et comment éliminer l'excès de JavaScript et CSS?
Meilleur sujet Pour WordPress: Avis vidéo ...
Tests, je vous le rappelle, je fais ce service: où un conseil spécifique a été donné à JavaScript et CSS:
Comme vous pouvez le constater, j'ai ce problème le plus gros, 8 scripts chargés immédiatement et à cause de cela, le premier écran est chargé non aussi vite que je le souhaiterais. Il existe également 10 fichiers CSS qui ne sont également pas optimisés. Eh bien, nous résoudrons le problème!
Sur cette question, la demande est approximativement telle:
Supprimer le code JavaScript qui empêche l'affichage:
- https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver\u003d1.10.2
- https://prostolinux.ru/.../jquery/jquery-migrate.min.js?ver\u003d1.2.1
- https://prostolinux.ru/...Quisery-ui-1.8.10.Custom.min.js?ver\u003d1.8.10
- https://prostolinux.ru/...ial-textboxes/js/wstb.js.php?ver\u003d3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver\u003d1.6.1
Récemment trouvé solution intéressante: Dans fonction.php Vous devez insérer un code qui donnera la commande aux scripts que nous devons charger non immédiatement:
fonction jquery_in_footer () ('Tie-Tipsy', get_template_directory_uri (). '/Js/jquery.tipsy.js', tableau ('jQuery')); wp_register_script ("attache", get_template_directory_uri (). '/ JS / JS / jquery.asing.1.3.js ', tableau (' jQuery '));)
Dans l'exemple, deux scripts sont ajoutés, mais nous ajoutons autant que vous le souhaitez, et c'est ceux qui freinent le chargement de la page. J'ai essayé d'appliquer cette décision - cela n'a pas fonctionné pour moi, peut-être que quelque chose ne va pas?
Google lui-même conseille dans le script Insérer un attribut async.ce qui le ferait de la charge asynchrone. Mais cette solution ne convient que pour les scripts externes, par exemple, cet attribut Async peut être inséré dans la publicité de script Yandex Direct, si vous l'avez affiché dans le premier écran. Yandex a un code asynchrone, mais il m'a appelé des problèmes - si un bloc avec chargement asynchrone, et le second n'est pas, un seul d'entre eux sera affiché. Mais maintenant n'est pas à propos de ça ...
Il est difficile d'optimiser les plugins de cette manière, vous devez monter dans le code de chaque plugin et prescrire cet attribut, ou son alternative. Je ne suis pas un programmeur et je ne ferai donc pas. De plus, si vous mettez à jour constamment les plugins, toutes vos travaux disparaîtront après la mise à jour.
Étonnamment moi-même, j'ai trouvé un autre, très simple à résoudre ce problème - installé le plugin JavaScript asynchrone.. Après son installation, il a reçu le résultat:
Comme vous pouvez le constater, un seul script est resté, et c'est le plug-in lui-même. Après avoir installé personnellement, je n'ai pas eu de problèmes d'affichage du sujet du site, mais si vous avez eu une sorte de Cant, et il est nécessaire que certains types de script soient chargés immédiatement, dans les réglages du plug-in, vous pouvez ajouter à des exceptions:
C'est ainsi que le premier élément est juste en train d'être résolu, mais comme vous pouvez le voir - cela ne suffit toujours pas, vous devez optimiser CSS, comment le faire?
Comment optimiser le travail de CSS?
Permettez-moi de vous rappeler une liste des revendications:
Optimiser CSS dans les ressources suivantes:
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver\u003d3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.CSS
Idéalement, vous devez faire cela: Prenez toutes les données de ces fichiers CSS et déplacez-vous vers les principales. Les plugins elles-mêmes désactivent la demande. Mais comme vous comprenez - c'est une question de longue et fastidieuse, fondant avec de nombreux pièges. Peut-être que dans le futur, je ferai cela, mais jusqu'à présent, j'ai tellement de temps et d'expérience.
Vous pouvez résoudre la question de l'installation d'un plugin qui réunira tous les styles dans un seul fichier. Le plugin qui ne remplirait que cette fonction ne trouvait pas, je vais donc parler d'un plugin qui fait tout à la fois et supprime les scripts et optimise les CSS.
Comment optimiser tout à la fois?
J'ai décidé d'installer le plugin Autoptimiser.qui optimise et les scripts et CSS en même temps. Après avoir installé le plug-in, il vous suffit d'accéder aux paramètres et de mettre les cases à cocher au bon endroit:
Après cela, la vitesse de Google la donne:
Pas un script unique n'est chargé, seuls deux fichiers CSS comprenant tous les styles et tous les scripts se déplacent dans la zone de sous-sol. Si vous regardez maintenant la source Pages, alors il existe une bouillie optimisée dans laquelle sans bouteille ne comprend pas.
Au début, je pensais que ce plugin ne résoudrait pas mes problèmes complètement, mais comme il s'est avéré que c'était due au fait que je n'étais pas complètement mis en place! Après avoir défini la case à la case au bon endroit, j'ai eu Excellent résultat! Tous les problèmes ont disparu! 
De sorte qu'il est nécessaire de cliquer sur le bouton ci-dessus Afficher les paramètres avancés. Puis apparaissent paramètres additionnels. Il est nécessaire de résister à des tiques dans des points:
Optimiser le code HTML?
Optimiser le code JavaScript?
Rechercher des scripts seulement dans ? (Obsolète)
Optimiser le code CSS?
Inline Toutes CSS?
Enregistrer un script agrégé / CSS en tant que fichiers statiques
Après cela, la vérité, j'ai arrêté de travailler le plugin, ce qui corrige le widget, mais ce n'est pas un problème du tout, la vitesse de téléchargement du site est beaucoup plus importante. Et plus important encore, s'il vous plaît à l'oncle google ...
Je veux mentionner une nuance: j'ai sur ce site modèle adaptatifEt si vous l'utilisez, le plugin est affiché. version mobile Il ne peut pas éliminer tous les problèmes à la fin. Lorsque j'allume le plugin de version mobile, aucune erreur n'est restée. J'ai une fois de nouveau assuré que c'est mieux que conception adaptative.
Un autre plugin similaire est WP Minify Fix, il fait la même chose, mais je l'ai beaucoup aimé, et peut-être que je ne le comprends pas complètement.
Je comprends qu'il est parfaitement de tout faire sans plug-ins, manuellement, mais c'est très long et murotno et cela n'en vaut vraiment pas la peine, car même avoir atteint estimations 100. Vous n'apporterez pas le site au sommet - la vitesse de charge du site n'est que l'une des centaines de facteurs de classement, le chemin et très important. Mais faire tout ce que vous pouvez - vous avez besoin!
Supprimer JavaScript et CSS Google PagesPeed Code
Vous n'avez pas trouvé de réponse? Profitez du site
Le message est des recommandations de Google pour accélérer votre site. Un tel souhait d'optimiser la ressource peut être trouvé si vous vérifiez votre site sur la vitesse de téléchargement dans PagesPeed Tools.
Supprimer JavaScript et CSS Code qui bloque l'affichage du haut de la page. Qu'est-ce que ça veut dire
À sa ressource, Google analyse les sites et émet des recommandations de base - ce qu'un webmaster devrait apporter pour réduire le temps de chargement de la page, ce qui signifie que le résultat sera l'augmentation de la position du site dans la recherche d'extradition.
Si les autres recommandations, telles que: optimiser les images, optimisez le démarrage du contenu visible et similaires, ne faites pas de problèmes, puis "Supprimer le code JavaScript et CSS qui bloque l'affichage de la page supérieure"Quelle est l'une des actions les plus importantes, les propriétaires de Sites forces pour briser la tête - comment le réparer.
Je dirai tout de suite - je ne suis pas fort en programmation et sur mon Blog de WordPress Je préfère les scripts changement manuel Coda fichiers système. Se demanda comment remplir cette recommandation et j'ai découvert.
Autoptimize Plugin élimine ce problème
1) Installez le plugin Autoptimize.
2) Ajustez exactement comme je l'ai décrit dans.
3) Si PagesPeed Tools affiche toujours une erreur, regardez les scripts qu'il réagit et retirez-les de la ligne dans les paramètres de branchement Autoptimize (options JavaScript - exclude des scripts de Autoptimize). Cela signifie qu'ils seront optimisés.
4) Réjouir! PagesPeed Outils ne jure plus.
Je vous ai dit comment éliminer la recommandation supprimer JavaScript et CSS Code bloquant l'affichage de la page supérieure. Maintenant, la partie visible des pages a commencé à démarrer beaucoup plus rapidement, le site prend des postes plus élevés dans la recherche, les visiteurs sont devenus plus.
Au fait, voici une comparaison de l'évaluation de mon site avant de commencer avec optimisation (puis j'ai utilisé le concepteur Wix, puis après avoir passé une fois passé sur WordPress (ici, j'ai reçu une large gamme d'outils pour améliorer votre blog). Aujourd'hui est mon estimation de 96%. Et toi?
Publié le 05/05/2017:
Suppression de la webliste de Yandex (puisqu'il ralentit la vitesse de téléchargement) et modifié le code métrique sur le site. Maintenant, j'ai 98%.
L'article traitera d'une telle chose et de points à PagesPeed Insights comme "Supprimer le code JavaScript et CSS bloquant l'affichage de la page supérieure". Comment traiter avec lui et changer cet article ci-dessous ( wordPress uniquement).
Installation du plug-in JS & CSS Script Optimizer
J'ai un article sur le plugin Autoptimize, le célèbre et unique, mais il est devenu une position à prendre, de nombreux fichiers et demandes ont commencé à faire, alors que je me suis également avéré qu'il donne une culasse en défense.
Je cherchais un remplaçant, j'ai trouvé un cool, il définit la recherche standard dans le panneau d'administration. 
- Languette.
- Ajouter nouveau.
- Entrez la demande d'optimiseur de script JS & CSS.
- Installez et activez.
Éliminez le problème. Supprimez le code JavaScript et CSS bloquant l'affichage de la page supérieure.
Le plugin ne crée pas faiblement de fichiers, mais le haut-parleur est positif. En général, entrez dans les paramètres et voyez la capture d'écran, comment et quoi faire.
Première section: Activer le plug-in WordPress et masquer les scripts
Dans cette section, nous allons allumer complètement le plug-in et configurerons les scripts de minianisation et de masquage dans le sous-sol.
- Allumez le module.
- Répertoire sur l'hébergement où les styles de kérité et JavaScript seront situés.
- Activation du module de compression et de l'optimisation JavaScript.
- J'ai testé ces deux points, mais je n'ai trouvé aucune différence particulière, tout reste à ses lieux, choisissez quelqu'un ou un test.
- Ignorer les scripts externes, ne mettez pas une seule coche, sinon ils ne seront pas optimisés.
- La première case à cocher consiste à combiner tous les scripts dans deux fichiers et à les diviser, le premier ira à l'en-tête au sous-sol, je ne recommande pas de mettre, car il n'est pas clair ce que le principe est l'emplacement. La seconde est combinée avec un fichier et passez au sous-sol, mettez une tique.
- Exclure, si l'un des scripts a cessé de fonctionner, puis enregistrez son nom ici.
Deuxième section: comment fixer des styles
Le plug-in répond également à la question de savoir comment résoudre et compresser des fichiers vue externeRegardons les paramètres.
- Activez le module d'optimisation.
- Lorsque vous activez la coche ne sera pas optimisée.
- Combinez, allumez-le.
- La valeur par défaut est active.
- Ici, nous prescrivons des styles qui ont commencé à se disputer. Sur un site client, je devais m'inscrire.
- Nous enregistrons des modifications.
Sur ce paramètre est terminé, attendez dix minutes de sorte que le plugin agisse et se réjouit dans les résultats.
Production
JS & CSS Script Optimizer présente de nombreux avantages devant Autoptimize.
- Moins de litiges.
- Utilisation facile.
- Supprime de la zone supérieure non seulement des fichiers du WordPress et des thèmes, mais également des ressources tierces.
- Sécurité.
Il y a un moins, il ne sait pas comment utiliser le code HTML, qui est très mauvais, à la recherche d'une solution au problème, je vais écrire sur la décision de l'article. Maintenant, vous savez comment vous débarrasser de l'élément dans PagesPeed Insights: Supprimer le code JavaScript et CSS bloquant l'affichage du haut de la page, le succès.
P.s. Et en conclusion Super vidéo (pour expérimenté).
C'est l'un des problèmes les plus courants que je rencontre, analyser des sites Web. La solution à ce problème est l'un des moments les plus difficiles lors de l'optimisation de la vitesse de téléchargement de la page, car elle nécessite des connaissances techniques approfondies.
Je veux faire attention - chaque site est individuel. Et si pour un site, certaines solutions seront utiles, alors pour qu'un autre, il peut y avoir un impact négatif.
L'essence du problème
Cet avertissement est déclenché lors du code de document entre les balises
… Les références à des fichiers JavaScript et CSS externes sont trouvés. Et jusqu'à ce qu'ils soient chargés, le rendu supplémentaire de la page ne sera pas effectué. Ainsi, ils bloquent la sortie de contenu sur la page.Comment supprimer JavaScript empêchant le haut de la page
- Pour commencer, nous devons nous assurer que JavaScript ne participe pas à l'affichage de la page.
- Petits scripts que nous placons dans le contenu Pages HTML. Par example:
- " . file_get_contents($_SERVER["DOCUMENT_ROOT"] ."/smallscript.js") . ""; ?>
- Nous vérifions les scripts sur la dépendance et l'ordre de chargement. S'il n'en a pas d'autre, ajoutez-les "async" d'eux:
- Grâce à cet attribut, de tels scripts seront chargés de manière asynchrone.
Ce manuel ne peut pas être appliqué à la bibliothèque de JQuery, qui est utilisée dans la majorité écrasante des sites. Ensuite, considérez la bonne solution pour JQuery.
Si vous mettez JQuery.js en face de la balise de fermeture Ou essayez de le télécharger de manière asynchrone, alors les scripts dépendants arrêtent simplement de travailler et de nombreuses fonctions du site "seront écartées". La solution correcte dans ce cas peut être l'utilisation de l'événement surload:
Au CMS populaire, les plugins sont utilisés pour résoudre ces tâches. Leur principe est quelque peu différent de celui décrit ci-dessus ci-dessus. Considérez sur l'exemple d'autoptimisation de WordPress:
- Le plugin combine tous les scripts * .j .js et inline dans un seul fichier. Dans le même temps, l'ordre de charge est enregistré.
- Le fichier unique est connecté au sous-sol de la page avec l'attribut ASYNC.
Vous pouvez aussi utiliser cette méthode Pour les CMS auto-écrites ou les sites sur HTML propre:
Blocage CSS - Options de la solution
Pour le moment, la dernière façon de résoudre ce problème est d'utiliser la directive précharge normalisée. Il permet aux navigateurs d'obtenir de style.CSS sans blocage de rendu.
Le découvreur de cette méthode était Scott jehl. , Concepteur et développeur du groupe de filament.
Sans aucun doute, l'avenir de cette décision. Mais, malheureusement, tous les navigateurs ne soutiennent pas la précharge.
Par conséquent, nous ne discuterons pas de cette méthode maintenant plus en détail et envisagerons une manière conservatrice.
La signification de cette méthode consiste à mettre dans la section de tête les fragments de styles les plus importants (CSS critiques), qui sont nécessaires au dessin initial de la page. À son tour, les fichiers principaux du CSS seront chargés après la charge du contenu. La plupart des débutants permettent une erreur grave à ce stade et insérez tous les styles disponibles dans le document. Cela ne résout pas seulement la situation, mais aussi l'aggrave.
Solution correcte:
Pages de contenu
...
Une autre erreur commune est de créer un grand nombre de règles pour les CSS critiques. Il est typique des sites avec une grande quantité de contenu sur la page - une variété de curseurs, de widgets, etc. Si nous réduisons le nombre de règles, la page se contractera. Si vous augmentez - nous obtenons un avertissement "Optimiser le démarrage du contenu visible". Dans ce cas, je vous recommande de combiner tous les styles dans un seul fichier et de connecter la manière traditionnelle.
En conclusion, je veux ajouter que Google PagesPeed - bon outil Identifier les lieux en détresse de votre site. Mais lors de l'analyse, il ne prend pas en compte ses caractéristiques individuelles. Par conséquent, l'avis le plus important: viennent à l'accomplissement de ses recommandations!
