{"id":6624,"date":"2021-08-25T12:27:52","date_gmt":"2021-08-25T12:27:52","guid":{"rendered":"https:\/\/chemicloud.com\/kb\/?post_type=ht_kb&p=6624"},"modified":"2024-10-16T09:20:07","modified_gmt":"2024-10-16T09:20:07","slug":"generate-unique-css-in-litespeed-cache-for-wordpress","status":"publish","type":"ht_kb","link":"https:\/\/chemicloud.com\/kb\/article\/generate-unique-css-in-litespeed-cache-for-wordpress\/","title":{"rendered":"How to Generate Unique CSS in LiteSpeed Cache for WordPress"},"content":{"rendered":"

You probably take a lot of pride in the appearance of your website. Maybe you’ve spent a lot of time (and\/or money) on customizing your website to give it a unique look. Unless you’ve been working with the code directly, you may not know this, but your website’s appearance is owed to a series of CSS files that are loaded each time a page is requested by a client’s browser. What you also may not know is that not every page needs to load every style in the library, and server resources are often wasted parsing code that isn’t relevant to the requested page.<\/p>\n

The new Unique CSS feature, now available in the LSCache for WordPress Plugin, allows users to discard this code and load only the necessary CSS to make the page display properly.<\/p>\n

What is Unique CSS?<\/h2>\n

If you’ve ever examined the CSS files that are included with your chosen WordPress theme and plugins, you may have noticed — they’re very large. Why is this?<\/p>\n

Well, they must contain every CSS definition for every variant of every page on your site.<\/p>\n

Let’s say you open your site in your browser and are looking at your About page. If you open up the code, most of the code being loaded for that page isn’t relevant to the page. This means your browser has to request all this code, then sift through it and show only the relevant bits. This takes time, even for a super-fast PC on a lighting fast internet connection.<\/p>\n

With Unique CSS, a separate and single CSS file is created for each page on your site, where the only defined styles used are the ones required to load the content on the page being requested, thus lowering the amount of code the browser has to sift through, therefore lowering the load time.<\/p>\n

Exciting News: Introducing Our fastest <\/b>WordPress Hosting<\/b><\/a> stack <\/b>\ud83d\ude80<\/span> Ready for speed? Try it for just $1!<\/b><\/p>\n

How to Enable Unique CSS in LiteSpeed Cache<\/h2>\n

Enabling Unique CSS is pretty easy, however, you do need a domain key from Quic.Cloud to use the Unique CSS feature of the plugin. Don’t worry, this is super easy to do and it doesn’t mean you need to change anything on your site or CDN.<\/p>\n

Step 1:<\/strong> Login to your \/wp-admin and in the menu on the left, hover over the LiteSpeed Cache option. Then, in the little menu that pops out, click General.<\/p>\n

\"\"<\/a><\/p>\n

Step 2:<\/strong> When the General Settings page opens, look for the Domain Key Section.<\/p>\n

Click Request Domain Key.<\/p>\n

\"\"<\/a><\/p>\n

After clicking Request Domain Key, your page will reload and you will see this message at the top of the page:<\/p>\n

\"\"<\/a><\/p>\n

If you wait about a minute, maybe two, then refresh the page again, you’ll note the Domain Key field is filled with ***. This means you have a domain key from Quic.Cloud!<\/p>\n

Your domain key field will look like this when your key has been issued:<\/p>\n

\"\"<\/a><\/p>\n

Step 3:<\/strong> Now, to enable Unique CSS, return to the menu on the left and look for LiteSpeed Cache > Page Optimization.<\/p>\n

\"\"<\/a><\/p>\n

Step 4:<\/strong> Once the Page Optimization settings have loaded, look for the Generate UCSS option and click the On Setting.<\/p>\n

Then click Save Changes in the top right corner.<\/p>\n

\"\"<\/a><\/p>\n

Step 5:<\/strong> Now you need to enable Cache Mobile because CSS for mobile views is different than the desktop views. To do this, navigate to the Cache option in the LiteSpeed menu on the left.<\/p>\n

\"\"<\/a><\/p>\n

Step 6:<\/strong> Once the Cache Settings page has opened, look for the Cache Mobile option. Click On to enable the feature, then click Save Changes in the top right corner.<\/p>\n

\"\"<\/a><\/p>\n

Step 7:<\/strong> Now you need to Purge your existing Caches. To do this, hover over the LiteSpeed icon in the top menu and choose Purge All.<\/p>\n

\"\"<\/a><\/p>\n

From this moment forward, anytime someone visits your site, the Unique CSS for that page will be served. If the UCSS hasn’t been calculated, it will be added to a queue to be generated via Cron later on.<\/p>\n

Congrats!<\/p>\n","protected":false},"excerpt":{"rendered":"

You probably take a lot of pride in the appearance of your website. Maybe you’ve spent a lot of time (and\/or money) on customizing your website to give it a unique look. Unless you’ve been working with the code directly, you may not know this, but your website’s appearance is…<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"ht-kb-category":[191],"ht-kb-tag":[],"class_list":["post-6624","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-website-speed"],"_links":{"self":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/6624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/comments?post=6624"}],"version-history":[{"count":6,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/6624\/revisions"}],"predecessor-version":[{"id":8468,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/6624\/revisions\/8468"}],"wp:attachment":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/media?parent=6624"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=6624"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=6624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}