I recently came across a user who asked me if it was possible to optimize WordPress CSS Delivery easily – the short answer is YES. For a long time I wanted to get back into the tech-writing so this will be my starting point.
CSS के लिए संक्षिप्त परिचय
वर्डप्रेस या आम तौर पर किसी भी अन्य वेबसाइट में सीएसएस फाइलें वेबसाइट के दृश्य स्वरूपण और शैली को नियंत्रित करती हैं। यदि आपका CSS बेहतर तरीके से वितरित नहीं किया गया है, तो यह सुनिश्चित करने के लिए आपकी वेबसाइट को धीमा कर देगा।
इस लेख में (लिंक्डइन पर मेरा पहला लेख) मैं आपको दिखाऊंगा कि वर्डप्रेस वेबसाइटों पर सीएसएस डिलीवरी को आसानी से कैसे अनुकूलित किया जाए।
How slow delivery of CSS files affects the performance of your WordPress website
CSS files are used to define how the visuals of a website are showing up on your visitor’s device. Your WordPress theme contains a CSS stylesheet file and some of your plugins might also use CSS stylesheets if they are showing content in the frontend.
CSS is necessary for modern websites. Most of your visitors don’t think about them and they have also become a central part of almost every website on the internet. The bad side of CSS files is that they can potentially slow down your website (depending on how they are set up).
Even small delays on a website give the user a bad experience and it may also affect your rankings in search engines like Google, Bing, etc…
One of the primary reasons that a CSS file wills low down your WordPress website is due to the way they are loaded. If the CSS file needs to be loaded before the page, your visitors would just see a blank page until the CSS has loaded. This is also known as render-blocking CSS.
Another common problem is that the CSS file contains a lot of “garbage” (code that is not needed to display the current page). Extra code = Extra loading time for your visitor = bad experience, which may lead to a lost lead.
The good news for those with a slow site due to CSS delivery issues is that you can change the way how your CSS is delivered for the user.
The way you can accomplish this is by identifying the minimum CSS code needed to display the very first part of your website. In a technical talk, this is known as “Critical CSS“. The critical CSS can be added inline to the page’s HTML, instead of adding it to the CSS files. The result is a page rendered without the need to load the CSS file before the content.
While the page has been loaded, you can continue to load the rest of the CSS for the user. In a technical talk, this would be known as “Deferred Loading“. In the tutorial below I will show you how to accomplish this using two plugins for WordPress.
WP Rocket – My preferred Cache Plugin for WordPress
My opinion is that WP Rocket is by far the best WordPress Caching Plugin on the WordPress Plugin market. It gives you a simple, nice, and easy way to optimize WordPress. The CSS part is as easy as checking a box – Done…
WP Rocket is a premium plugin. The price is $49 for 1 year of support and updates – that’s only around $0,14 each day for running a perfectly optimized WordPress website – what’s not to like?!
The first thing you have to do is install WP Rocket in WordPress. Buy a subscription, download the plugin and activate it. Once activated, navigate to Settings » WP Rocket and click the tab “File Optimization” and finish up by clicking Save.
Scroll to the CSS file section. Here you have to check the box “Optimize CSS Delivery” to optimize the CSS delivery on your website. This will as I mentioned earlier stop render-blocking of CSS in return for faster loading on your WordPress website.
WP Rocket will take care of the rest. Lean back and watch how intelligently WP Rocket will identify Critical CSS that your visitors will see as the first part of your website. Once the Critical CSS has been generated, try and load your website in a browser that has no user signed into the WordPress admin area.
WP Rocket will automatically clear the cache on your website so that you new visitors will see an optimized version instead of the old unoptimized version of your website. Once you explore WP Rocket you will find out that there are plenty of other ways that WP Rocket can help you improve the performance of your website.
Autoptimize (FREE) – How to optimize CSS Delivery
Autoptimize is a free WordPress plugin developed by Frank Goossens to improve the performance of your WordPress website by optimizing CSS and JS files.
While it’s a free option to improve performance, Autoptimze lacks a lot of the features WP Rocket offers and takes some more time up for the configuration.
It’s not able to automatically identify the critical CSS parts as you saw in WP Rocket. Instead, you need to buy this from a third-party developer, which of course comes with an additional cost.
However, Autoptimize is a good choice if your budget is tight and you don’t need all the many features WP Rocket offers to speed up the website.
Go ahead and install Autoptimize in WordPress and activate it. Once activated, go to Settings » Autoptimize to configure the plugin. Once at the page for configuration of Autoptimize, scroll to the CSS section and do the following:
- Check Optimize CSS Code?
- Uncheck Aggregate CSS-files?
- Check Eliminate render-blocking CSS?
Scroll to the bottom and click Save Changes and Empty Cache. This will store your newly selected settings.
Autoptimize won’t work properly before you sign up for a subscription at https://criticalcss.com/ – this will give you access to the generation of Critical CSS. To get access to this service, you can navigate to the Critical CSS tab in the settings for Autoptimize. Here you will find all the necessary details to get started.
Once you register and get access to your API key, scroll to the API Key section in Autoptimze and paste it into the text box. After that, click the button Save Changes.
Autoptimze now got all the details it needs to add critical CSS inline and help you defer loading the stylesheets until the website has been fully rendered. The result = A WordPress website that loads more quickly.
