Vous essayez d’éliminer les JavaScript et CSS qui bloquent le rendu dans WordPress ?
Si vous testez votre site sur Google PageSpeed insights, alors vous verrez probablement une suggestion d’éliminer les scripts et CSS bloquant le rendu. Cependant, il ne fournit pas de détails sur la façon de le faire sur votre site WordPress.
Dans cet article, nous allons vous afficher comment corriger facilement les JavaScript et CSS bloquant le rendu dans WordPress afin d’améliorer votre score Google PageSpeed.
Qu’est-ce que le JavaScript et le CSS qui bloquent le rendu ?
Les fichiers JavaScript et CSS bloquant le rendu sont des fichiers qui empêchent un site web d’afficher une page web avant le chargement de ces fichiers.
Chaque site WordPress possède un thème et des extensions qui ajoutent des fichiers JavaScript et CSS à l’interface publique de votre site.
Ces scripts peuvent augmenter le temps de chargement des pages de votre site, et ils peuvent également bloquer le rendu de la page.
Le navigateur de l’utilisateur devra charger ces scripts et CSS avant de charger le reste du HTML de la page. Cela signifie que les utilisateurs/utilisatrices ayant une connexion plus lente devront attendre quelques millisecondes de plus pour voir la page.
Ces scripts et feuilles de style sont appelés JavaScript et CSS bloquant le rendu.
Les propriétaires desites WordPress qui tentent d’obtenir un score Google PageSpeed de 100 devront corriger ce problème pour atteindre ce score parfait.
Qu’est-ce que la note Google PageSpeed ?
Google PageSpeed Insights est un outil de test de la vitesse des sites web créé par Google pour aider les propriétaires de sites web à optimiser et à tester leurs sites. Cet outil teste votre site par rapport aux directives de Google en matière de vitesse et propose des suggestions pour améliorer le temps de chargement de votre page.
Il vous affiche un score basé sur le nombre d’audits que votre site a passé avec succès. La plupart des sites obtiennent un score compris entre 50 et 70. Toutefois, certains propriétaires de sites se sentent obligés d’atteindre 100 (le score le plus élevé qu’une page puisse obtenir).
Avez-vous vraiment besoin de la note parfaite de « 100 » de Google PageSpeed ?
L’objectif de Google PageSpeed insights est de vous fournir des indications pour améliorer la vitesse et les performances de votre site. Vous n’êtes pas nécessaire de suivre ces règles à la lettre.
N’oubliez pas que la vitesse est uniquement l’une des nombreuses métriques d’optimisation pour les moteurs de recherche (SEO) qui aident Google à déterminer le classement de votre site. Si la vitesse est si importante, c’est parce qu’elle améliore l’expérience des utilisateurs/utilisatrices sur votre site.
Une meilleure expérience utilisateur nécessite bien plus que de la vitesse. Vous devez également proposer des informations utiles, une meilleure interface utilisateur et un contenu attrayant avec du texte, des images et des vidéos.
Votre objectif doit être de créer un site rapide qui offre une excellente expérience à l’utilisateur.
Nous vous recommandons d’utiliser les règles Google PageSpeed comme des suggestions. Si vous pouvez les mettre en œuvre facilement sans ruiner l’expérience des utilisateurs/utilisatrices, c’est parfait. Dans le cas contraire, essayez d’en faire le plus possible et ne vous préoccupez pas du reste.
Ceci étant dit, voyons ce que vous pouvez faire pour corriger les JavaScript et CSS bloquant le rendu dans WordPress.
Nous allons aborder deux méthodes qui permettent d’éliminer les ressources bloquant le rendu dans WordPress. Vous pouvez choisir celle qui fonctionne le mieux pour votre site :
Méthode 1 : Corriger les scripts et CSS bloquant le rendu avec WP Rocket
Pour cette méthode, nous allons utiliser l’extension WP Rocket. C’est la meilleure extension de mise en cache et d’amélioration WordPress du marché qui vous permet d’améliorer rapidement les performances de votre site sans aucune compétence technique ni configuration compliquée.
Tout d’abord, vous devez installer et activer l’extension WP Rocket. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
WP Rocket fonctionne dès sa sortie de la boîte, et il activera la mise en cache avec des réglages optimaux pour votre site. Vous pouvez en savoir plus dans notre guide terminé sur la façon d’installer et de configurer correctement WP Rocket dans WordPress.
Par défaut, il n’active pas les options d’optimisation JavaScript et CSS. Ces optimisations peuvent potentiellement affecter l’apparence de votre site ou certaines fonctionnalités, c’est pourquoi l’extension vous permet d’activer ces réglages de manière facultative.
Pour ce faire, vous devez vous rendre sur la page Réglages » WP Rocket, puis basculer sur l’onglet » Optimisation des fichiers « .
Défilez ensuite jusqu’à la section Fichiers CSS et cochez les cases situées à côté de « Minify CSS », « Combine CSS Files » et « Optimize CSS Delivery ».
Pour le paramètre ‘Optimize CSS Delivery’, WP Rocket recommande de choisir la méthode‘Remove Unused CSS‘.
En plus d’offrir les meilleures performances, il peut contribuer à réduire la taille des pages et les requêtes HTTP.
Note : Le plugin de cache WP Rocket tentera de minifier tous vos fichiers CSS, de les combiner et de ne charger que les CSS nécessaires à la partie visible de votre site web.
Cela peut affecter l’apparence de votre site web, c’est pourquoi vous devez tester minutieusement votre site web sur plusieurs appareils et tailles d’écran.
Ensuite, vous devez défiler jusqu’à la section Fichiers JavaScript. À partir de là, vous pouvez cocher toutes les options pour une amélioration maximale des performances.
Vous pouvez minifier et combiner des fichiers JavaScript comme vous l’avez fait pour CSS.
Vous pouvez également empêcher WordPress de charger le fichier jQuery Migrate. Il s’agit d’un script que WordPress charge pour assurer la compatibilité des extensions et des thèmes utilisant d’anciennes versions de jQuery.
La plupart des sites web n’ont pas besoin de ce fichier, mais vous devrez tout de même vérifier votre site pour vous assurer que le fait de le retirer n’affecte pas votre thème ou vos extensions.
Ensuite, défilez un peu plus bas et cochez les cases situées à côté des options « Load JavaScript Defered » et « Safe Mode for jQuery ».
Ces options retardent le chargement des JavaScripts non essentiels, et le mode sécurisé jQuery vous permet de charger jQuery pour les thèmes susceptibles de l’utiliser en ligne. Vous pouvez ne pas cocher cette option si vous êtes certain que votre thème n’utilise pas de jQuery en ligne.
N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.
Après cela, vous pouvez également vouloir vider le cache dans WP Rocket avant de tester à nouveau votre site avec Google PageSpeed Insights.
Sur notre site de test, nous avons pu obtenir un score de 100 % sur les appareils de bureau, et le problème de blocage du rendu a été résolu dans les scores mobiles et de bureau.
Méthode 2 : Corrigez les scripts et CSS bloquant le rendu avec Autoptimize
Pour cette méthode, nous utiliserons une extension distincte conçue spécifiquement pour améliorer la distribution des fichiers CSS et JS de votre site. Bien que cette extension fasse le travail, elle n’a pas les autres fonctionnalités puissantes dont dispose WP Rocket.
La première chose à faire est d’installer et d’activer Autoptimize, une extension gratuite pour accélérer les performances du site. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devez vous rendre sur la page Réglages » Autoptimiser pour configurer les paramètres de l’extension.
Tout d’abord, vous devez cocher la case située à côté de « Optimiser le code JavaScript » dans le bloc des options JavaScript. Confirmez que l’option « Agréger les fichiers JS » n’est pas cochée.
Ensuite, défilez vers le bas jusqu’à la boîte d’options CSS et cochez l’option « Optimiser le code CSS ».
Confirmez que l’option « Agréger les fichiers CSS » n’est pas cochée.
Vous pouvez maintenant cliquer sur le bouton « Enregistrer les modifications et vider le cache » pour stocker vos réglages.
Allez-y et testez votre site avec l’outil PageSpeed Insights. Sur notre site de démonstration, nous avons pu corriger le problème de blocage du rendu avec ces réglages de base.
Si des scripts bloquent encore le rendu, vous pouvez revenir à la page des paramètres du plugin et revoir les paramètres des options JavaScript et CSS.
Par exemple, vous pouvez autoriser l’extension à inclure des JS en ligne et retirer les scripts qui sont exclus par défaut, comme seal.js ou jquery.js. Ensuite, il vous suffit de cliquer sur le bouton » Enregistrer les modifications et vider le cache » pour enregistrer vos modifications et vider le cache de l’extension.
Une fois que vous avez terminé, allez-y et vérifiez à nouveau votre site avec l’outil PageSpeed Insights.
Comment fonctionne Autoptimize ?
Autoptimize regroupe tous les fichiers JavaScript et CSS en file d’attente. Ensuite, il crée des fichiers CSS et JavaScript minifiés et sert les copies mises en cache à votre site en mode asynchrone ou différé.
Cela vous permet de corriger le problème des scripts et des styles bloquant le rendu. Veuillez toutefois garder à l’esprit qu’elle peut également affecter les performances ou l’apparence de votre site.
Que faire si JavaScript et CSS bloquant le rendu existent toujours ?
Selon la manière dont les extensions et votre thème WordPress utilisent JavaScript et CSS, il peut être difficile de corriger complètement tous les problèmes de JavaScript et CSS bloquant le rendu.
Bien que les outils ci-dessus puissent vous aider, vos extensions peuvent avoir besoin de certains scripts à un niveau de priorité différent pour fonctionner correctement. Dans ce cas, les solutions ci-dessus peuvent briser la fonctionnalité de ces extensions, ou elles pourraient se comporter de manière inattendue.
Au lieu d’essayer d’éliminer complètement les problèmes de blocage du rendu, nous vous recommandons d’adopter d’autres approches pour accélérer votre site web. Par exemple, vous pouvez utiliser un service CDN pour servir vos fichiers JavaScript et CSS statiques et réduire le temps de chargement.
Vous pouvez lire notre guide ultime pour améliorer la vitesse et les performances de WordPress pour plus d’informations.
Nous espérons que cet article vous a aidé à apprendre comment réparer les JavaScript et CSS bloquant le rendu dans WordPress. Vous pouvez également consulter notre article sur la façon dont WPBeginner augmente la vitesse de chargement des pages avec 6 astuces et notre comparaison des meilleurs hébergeurs WordPress infogérés.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Lu
Great info as always!
I’m with Siteground so have SG Optimizer on my site. I’ve gone through the settings as much as I understand, but still getting the Eliminate render-blocking resources.
Can I use Autoptimize as well, or will it clash with SG? Thanks
WPBeginner Support
You should be able to use Autoptimize with SG Optimizer but if you have any concerns if you reach out to the plugin’s support they should be able to let you know if there are currently any conflicts between the two
Administrateur
subin
how can i Fix Render-Blocking JavaScript and CSS in WordPress without a plugin.
WPBeginner Support
You would need to manually go through the code and set the CSS and JS files to load after the content is added to the page.
Administrateur
Ben
Thank you for this! Autoptimize just helped me get a better page score!
Ben
WPBeginner Support
You’re welcome, glad our recommendation could help
Administrateur
MoneyManch
Hi WP Beginner Team,
Thanks a lot for sharing such a useful article. Autoptimize is an awesome plugin.
I was looking for a plugin to boost the speed of my wp blog. After reading this post, I installed and activated « Autoptimize » on my blog. And to my surprise it increased the speed of my blog from 39 to 61 for mobile and 76 to 95 for desktop checked on PageSpeed Insights.
Thank once again for guiding new bloggers like me.
WPBeginner Support
Glad our recommendation could be helpful
Administrateur
sachin
How to identify the script URL and CSS URL?
WPBeginner Support
If you use Google Page insights then there is a dropdown arrow which will show you the URLs that are causing the problem with a learn more link for how to find the url without their tool.
Administrateur
Raksh
The new google page speed insights doesn’t showing the link what should I do.
WPBeginner Support
There should be a dropdown arrow and when you click that it should show the links to the files
Administrateur
Monika
I am not sure how many times this website has helped me!!! Thank you SOOO MUCH!
Mr Jatt Poonam
how can i Optimize images, which i had been add in my website in the past?
Love Goel
Thanks dude, Really appreciate your tutorial. I used Autoptimize Plugin and worked for me really well.
Deeksha
When I use all these plugins suddenly my website go slow down & it shows inappropriate content…
What Can I Do ?? Please Help
WPBeginner Support
Hi Deeksha,
Both plugins are quite safe. If you are seeing inappropriate content on your website, then please make sure that your website is not hacked. You can disable both plugins at any time.
Administrateur
sumit kumar gupta
Sir When we install Autoptimize plugin in our WordPress blog then our blog is not opening it says this page is not working. What should I do Sir?
Sir I would like to know when we add javascript link to eliminate render blocking code following by your steps then any affect is occuring on my blog ranking. please help
Tim Helmer
Sumit:
The plugin is not working so you need to rename the plugin folder to turn it off. You need ftp or a file manager plugin. Can you access the dashboard via your wp-login.php location? Like domain/wp-login.php
Henry Ramirez
I use wordpress.com, any plugin to do the same thing here on wordpress.com since this plugins are no supported here? Thanks
ben
Autoptimize works for me. it nicely condenses my scripts, bit I do still see the render-blocking script warning
Ismail
Hello,
Currently I am using WP Rocket, is it possible to use Autoptimize plugin together? Thanks for sharing this valuable information.
Gaurav Areng Chakraverti
Hi there. I’ve tried the W3 method and as soon as I turn on Minify (using Disk) I get this:
Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0
How does one fix that?
Great tutorial though overall! Thanks for this.
Gaurav Areng Chakraverti
EDIT: This problem goes away when I deactivate Autoptimize, however, so does the rest of the site. Only the bare bones remain with no actual content.
David
The settings for Autoptimize has changed. The only JavaScript Options available is Optimise JavaScript Code? The rest of the options in your screenshot is not available, at least not on the one I have. Last time I tried W3 Total Cache, nobody could access the site. I am still looking for a way of solving the load time of the page, which for some reason stand at anything from 10 – 17 seconds.
Chris
David, try Gmetrix web speed tool. On the results list there is a waterfall chart showing how the site loads and what the largest files and scripts slowing the page load.
I find the slowest scripts are googles cdn scripts like google fonts! The very same company insisting, forcing users to their demands have to scripts taking an age to load. You couldn’t make it up.
Divij
Can you use minify on w3 total cache simultaneously with cloudflare? We are using minify in cloudflare and left it disabled in w3cache. But we still keep getting the message- Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Thanks!
Rana Jayant
The plugin 23 cache UI has been changed and it doesn’t have any option where we can put our .js URL for optmization.
I am talking about « Now head over to your WordPress admin area and go to Performance » Minify page. »
MATTY
Great tutorial. However is W3 Total cache safe to use now due to an issue earlier in the year? I’ve stopped using it since but it was the best plugin out there.
Mohamed
Thanks for sharing this article but you said (please keep in mind that it can also affect the performance or appearance of your website)
Please clarify if this effect will be good or bad for the website google ranking?
WPBeginner Support
Hi Mohamed,
A faster website is certainly good for SEO rankings. However, when fixing render blocking issues you may end up changing appearance of your theme or get even a lower page speed score than before.
Administrateur
Angie
Ha, funny.
I was looking for help here.
then I did the google speed tool for YOUR post here.
Google result
mobile Poor
54 / 100
desktop
Needs Work
66 / 100
Do you have any clue at all?
WPBeginner Support
Hi Angie,
Often people obsess about getting a perfect 100 with Google PageSpeed which is nearly impossible for most functional websites. If you have any sort of social media buttons, retargeting scripts, or ads, then your site will never get a perfect score.
Chances are that you’ll be far from it. But that’s why you have other tools like Pingdom to verify your speed results.
For example: WPBeginner.com homepage loads in 508 ms (which is insanely fast) –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot1.png
But has a Google Pagespeed score of 74 on desktop (which those who don’t know any better will consider it to be bad). –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot2.png
If you look through all popular websites like ESPN, NYTimes, TechCrunch, etc you’d notice that none of them have a perfect score .. actually far from it.
Here’s an example of ESPN score – 62 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot3.png
Here’s an example of NYTimes – 68 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot4.png
Here’s an example of TechCrunch – 49 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot5.png
Our advice is to focus on making your website as fast as possible by following our guide on how to speed up WordPress and use tools like Pingdom as a reference point for what your users will see when they load your website.
Administrateur
Kat
This has actually made my render blocking worse. How do we remove it?
Chris Daly
Every single time I use Autoptimize or W# Total Cache my site explodes. The mobile web view gets trashed into an html menu list and parts of the site stop working. I have tried each of these on 4 different sites and dropped both of them.
Chris
Chris I suggest you read and adhere to the W3 Cache warning on the minify section. Minify html and css only and again be wary not all css should be mini-fied due to the reasons stated in the post above.
I use W3 Cache selectively, tinyjpg for image optimisation, and set OpCache in the .htaccess file. Templaters love to use Sliders…but they bloat the page with images screen width at 1920pxs. Ditch the sliders, smaller images (with a modal box if greater detail required) and icons instead.
Mary Cahalane
I just installed and it broke my homepage. All the images are gone.
Any idea how to fix this?
Bruno Ayres Martinez
Hey guys! I’ve loved the W3 tutorial. There’s just one information missing: The Embed Location for the JS File Management.
Is it « Embed before Body »? Or « embed in Head »? Or « Embed after Body »?
Dev thapa
I am new to Blogging, however, I have been following Wpbeginner.com for quite sometime and whatever they are writing I found them very useful and don’t hesitate to say that, today if my blog page is Live…30% credit goes to Wpbeginner.com team and Sayed Balkhi for creating such a wonderful and useful webpage.
I am thankful to Wpbeginner.
Keep it up, all the best.
WPBeginner Support
Hi Dev,
Thanks you for the kind words. We are glad you find WPBeginner helpful
Administrateur
steve
I just put this site in google page-speed test and only got 66 for mobile and 77 for desktop!?
Digember
Plugins increase loads on our website which makes our site slow. At wpbeginner, I haven’t seen a single method of speed optimization without the use of plugins. Teach us something useful, these methods don’t work for everyone.
Patricia Lynn
Great detailed information on using Autoptimize plugin dealing with Java-scrip, CSS and plugin w3 Total Cashe to fix render blocking while enhancing website speed performance
Sumit yadav
Thanks a lot for this information. Earlier my page loading load time speed was 63 and after installing Autoptimize plugin it increases to 81.
Yoseph
I am not very sure what happen, I installed autoptimize in one of my site, then the page size increase from 2.8mb to 4mb
Shaye
YIKES! This made the performance of my site drop drastically! Help!
Erez Elias
Thanks for sharing.
Overall the speed of the site increased by very little. But the issue with render blocking is not resolved.
Comment if you have other suggestions.
thanks.
almbrouk idris
I trying to reach 100% but impossible
John Bolhano
I am trying to get 70+ but still nowhere near.
Mayank
Haha, great, google sucks but after all i am at 80+
David
I got 3 new websites down to almost 500 ms, faster than 96% of sites on Pingdom. Similar for other speed testers.
Thought great, till Google brought me back down to earth with their page insights. Mainly low score for mobile, but thought these modern themes are meant to be responsive? Obviously not!
I squeezed every image down to next to nothing before uploading as well, so it is frustrating.
Also, none of the apps work for me with Browser Cache, etc.
I’d say the same three problems I have – once the basics are done – are:
1. Render blocking Javascript.
2. Browser caching.
3. Images wrong size for mobile.
Muthukrishnan
I have used all the plugins..But still the page speed is bad.
Michael
I’m a bit confused. I just ran a Google speed test on wpbeginner and if didn’t score well at at all. What am I missing?
Yasser
My Website is an RTL one after i saved the settings of the « Autoptimize » plugin my website turn into LTR !
Manohar Rao
Both Autoptimize and W3 Total cache plugins have damaged my website. These plugins works with certain themes only. One has to be very careful to use these two plugins.
Toby Forage
When I installed Autoptimize, as suggested in this article, it completely screwed up my website. Maybe I set it up wrong, but after removing it entirely, I reached a Google PageSpeed score of 92 for desktop. Mobile is at 67, so I’m working on improving that, but won’t be using Autoptimize again, that’s for sure!
Nik
Thanks. It works for my blog.
Fued
Hi WP beginner,
Very helpful article!
Thank you!
Just a random question?
Can I set it back minified mode from manual to auto and delete the minified files without harm? And what do you recommend: manual or auto?
Cheers
Mayank
Just do it auto
Nirmal Kumar
Both these methods did not work. Is there any other better way to do this?
ibraheem Warriach
Hi i Liked article butt em not getting option to add scripts in W3 Total cache plugin kindly let me know how to get that?
MASI
Thank you very much for your great article, it’s really helped me.
Just i have an small problem, i’m confused now!
I added all .js and .css manually on W3TC, but still one .css has problem on google page checker:
Consider Fixing:
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
26952.default.include.c9d602.css is available currently on .css list, but i see this error. How can i fix this problem?
Christian
I don’t see the option to « Add a stylesheet », any ideas why?
Cindy P
Ok I did the steps and installed W3 & went thru the total beginners guide. I also added the edge on W3 although it is in beta and went back and changed from embed the JS before the /body to embed the JS in the head. I now have my desktop speed at 75 (was at 69). And mobile is at 50 (was at 38). Google speed is still saying I need to minify, etc etc. Any other hints or tips or plugins?? Thanks for the help so far
WPBeginner Support
Hey Cindy,
Please take a look at our guide on how to minify CSS / JavaScript Files in WordPress.
Administrateur
djbaxter
Using the Autoptimize plugin (I use WP Super Cache rather than W3 Total Cache) really didn’t work on my site. If anything, it made my Google load speed score slightly worse.
JASSIM
Thanks for this topic. i need it too much.
but you didn’t point out about embed section location for scripts to be added for JS and CSS in the W3 total cache plugin ..
in the image in this topic it shown to be selected « before »..
thanks
Rajan
Hi WP beginner
I have a trouble shooting while fixing this issue. In my W 3 Total cache, I am not able to see the option js section.
My screenshot attached in the above link
Suggest me a method to solve it.
WPBeginner Support
Hey Rajan,
You need to first enable minification and click on the save all settings button. After that you need to go to Performance > Minify page. This is where you will find the manual JS minify settings.
Administrateur
pavan
where can I found the minification setting.
Lenny
Thanks for the tips.
Do plugins like jet pack for wordpress or WP rocket do the same thing? And do they conflict at all with the plugins you recommend here?