{"id":6554,"date":"2021-08-17T08:39:01","date_gmt":"2021-08-17T08:39:01","guid":{"rendered":"https:\/\/chemicloud.com\/kb\/?post_type=ht_kb&#038;p=6554"},"modified":"2024-10-16T09:21:12","modified_gmt":"2024-10-16T09:21:12","slug":"litespeed-cache-page-optimization-settings-in-wordpress","status":"publish","type":"ht_kb","link":"https:\/\/chemicloud.com\/kb\/article\/litespeed-cache-page-optimization-settings-in-wordpress\/","title":{"rendered":"How to Configure the LiteSpeed Cache Page Optimization Settings in WordPress"},"content":{"rendered":"<p>When it comes to Page Caching, the LiteSpeed Cache plugin for WordPress has you covered! There are dozens of options you can tinker with to get your site up and running at the best performance possible with the plugin.<\/p>\n<p>But why tinker when you could just follow our knowledge base article where we&#8217;ll cover the best settings to enable to get the best out of the plugin?<\/p>\n<p>Follow along below to do just that. Let&#8217;s dive in!<\/p>\n<h2 id=\"how-to-configure-the-litespeed-cache-page-optimization-settings-in-wordpress\">How to Configure the LiteSpeed Cache Page Optimization Settings in WordPress<\/h2>\n<p><strong>Step 1:<\/strong> Login to your \/wp-admin and hover over the LiteSpeed Cache plugin in the menu on the left&#8230;. when the little menu pops out, click Page Optimization.<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6555\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9.png\" alt=\"\" width=\"354\" height=\"439\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9.png 952w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-242x300.png 242w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-632x783.png 632w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-768x952.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-40x50.png 40w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-48x60.png 48w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/1-9-81x100.png 81w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><strong>Step 2:<\/strong> When the Page Optimization settings load, you&#8217;ll see a few tabs at the top + a lot of different options for each tab.<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6556\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5.png\" alt=\"\" width=\"1732\" height=\"1203\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5.png 1732w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-300x208.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-783x544.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-768x533.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-50x35.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-1536x1067.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-60x42.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/08\/2-5-100x69.png 100w\" sizes=\"auto, (max-width: 1732px) 100vw, 1732px\" \/><\/a><\/p>\n<p>Let&#8217;s review these options so you can enable the right ones to maximize your optimization and get the best out of the LSCache for the WordPress plugin.<\/p>\n    \t\t<div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\r\n    \t\t\t<span class=\"hts-messages__title\">Pro-Tip:<\/span>    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tMost people will not need to minify or combine resources for a few reasons.\u00a0Minifying creates extra work for the server and can slow the initial page load. The feature can be super helpful if your page has tons of visitors, but if you&#8217;re getting that kind of traffic, you should be using a CDN like <a href=\"https:\/\/chemicloud.com\/kb\/article\/setup-quic-cloud-cdn-on-wordpress\/\" target=\"_blank\" rel=\"noopener\">QUIC.Cloud<\/a> or Cloudflare, where minification is already handled at the DNS Level. Also, if your site is pretty lean on code and runs on barebones, using minify or combine won&#8217;t have much of an effect anyway.\u00a0    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n<p><strong>First up are the CSS Settings.<\/strong><\/p>\n<ul>\n<li>With <strong>CSS Minify<\/strong>, as mentioned in the Pro-Tip above, you should leave this off.<\/li>\n<li>For <strong>CSS Combine<\/strong>, also as mentioned above, you should leave this off.<\/li>\n<li>You can leave the <strong>CSS HTTP\/2 Push<\/strong> setting off as well.<\/li>\n<li>Leave the <strong>Load CSS Asynchronously<\/strong> setting off or you can see some displeasing font issues on your website. Yes, having this on can help your website test scores, but it hurts your UX. Don&#8217;t make your visitors suffer from ugly FOUC\/FOUT issues!<\/li>\n<li>For <strong>Generate Critical CSS<\/strong>, leave this setting off. We don&#8217;t recommend using Critical CSS unless absolutely needed.<\/li>\n<li>Leave the <strong>Generate Critical CSS<\/strong> in Background option alone, as it&#8217;s dependent on the Generate Critical CSS option.<\/li>\n<li>With the <strong>Separate CCSS Cache Post Types<\/strong> option, if you are using Critical CSS, you should list here every post type that has it&#8217;s own page and CSS. Otherwise, leave this alone.\n<ul>\n<li>An example of this would be WooCommerce category and product pages, along with pricing tables, etc.<\/li>\n<\/ul>\n<\/li>\n<li>For <strong>Separate CCSS Cache URIs<\/strong>, this is similar to the above, Separate CCSS Cache Post Types and you should enter single URLs with CSS that is vastly different from other pages. Otherwise, leave this section alone.<\/li>\n<li>Leave the <strong>Inline CSS Async Lib<\/strong> off, or you will get weird font issues.<\/li>\n<li>And lastly, for <strong>Font Display Optimization<\/strong>, you should only use Default or Block. Don&#8217;t use Swap or Fallback as they can cause font issues, as well.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p><strong>Next, click JS Settings.\u00a0<\/strong><\/p>\n<ul>\n<li>As we mentioned for CSS Settings, leave the <strong>JS Minify<\/strong> option off. If you&#8217;re going to use minification, do it from your CDN.<\/li>\n<li>Do the same for <strong>JS Combine<\/strong>, leave it off.<\/li>\n<li>For <strong>JS HTTP\/2 Push<\/strong>, you can leave this off.<\/li>\n<li>With <strong>Load JS Deferred<\/strong>, the off setting is the safest setting.<\/li>\n<li>The Default setting for <strong>Load Inline JS<\/strong> is your best option. Deferred or delaying until after DOM load may improve page scores or help other JavaScript optimizations, but it also contributes to altered site design or function on page loads.<\/li>\n<li>Finally, set <strong>Exclude JQuery<\/strong> to the On Setting.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p><strong>Next, at the top of the page click the Optimization tab.\u00a0<\/strong><\/p>\n<ul>\n<li>The default setting for <strong>CSS\/JS Cache TTL<\/strong> is safe. You can use a lower TTL when you&#8217;re making a lot of development changes, if you want. Or you can use a higher TTL, if you aren&#8217;t changing site design as frequently.<\/li>\n<li>With <strong>HMTL Minify<\/strong>, leave this setting to off, as you have with the other Minify options.<\/li>\n<li>For <strong>Inline CSS Minify<\/strong>, you should also leave this setting off.<\/li>\n<li>Also, leave <strong>Inline JS Minify<\/strong> off.<\/li>\n<li>The <strong>DNS Prefetch<\/strong> field is useful if you want to preload the DNS queries for external assets on your website. You should list the URLs of each of those in the space provided.\n<ul>\n<li>If you aren&#8217;t sure what your external content URLs may be, you can find them by opening your website in a Chrome Incognito tab, then right-click on the page and choose Inspect from the context menu. Following that, the Developer Tools will open, and you should click the Sources tab. This will list all the external calls your website is making and their URLs.<\/li>\n<\/ul>\n<\/li>\n<li>For <strong>DNS Prefetch Control<\/strong>, you can set this to on if you aren&#8217;t using the option above where you&#8217;ve listed URLs manually.<\/li>\n<li>The <strong>Remove Query Strings<\/strong> option doesn&#8217;t typically offer a speed improvement since most caching can now handle query strings. We recommend leaving this set to Off.<\/li>\n<li>For <strong>Load Google Fonts Asynchronously<\/strong>, you can enable this if you want, but keep in mind most Google Fonts are already cached in the browser from other websites using them.<\/li>\n<li>You can enable the <strong>Remove WordPress Emoji<\/strong> setting. Most browsers can now natively render emojis and this only removes a small JavaScript call.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p class=\"p1\"><b>Exciting News: Introducing Our fastest <\/b><a href=\"https:\/\/chemicloud.com\/managed-wordpress-hosting?utm_source=blog&amp;utm_medium=article#60b65e4e63b58\"><b>WordPress Hosting<\/b><\/a><b> stack <\/b><span class=\"s1\">\ud83d\ude80<\/span><b> Ready for speed? Try it for just $1!<\/b><\/p>\n<p>Next, at the top of the page click the <strong>Media Settings<\/strong> tab.<\/p>\n<ul>\n<li>A lot of people like lazy load, I&#8217;m not really a fan and recommend leaving <strong>Lazy Load Images<\/strong> set to off. Having it enabled can improve page load times a teeny bit, but it&#8217;s bad for UX to use the feature under certain conditions.<\/li>\n<li>For <strong>Basic Image Placeholder<\/strong>, you can specify the base64 of an image to be used as a placeholder until your actual images load.\n<ul>\n<li>If you aren&#8217;t sure how to encode an existing image you want to use into base64, there&#8217;s a great web encoder tool you can use by <a href=\"https:\/\/www.base64-image.de\/\" target=\"_blank\" rel=\"noopener nofollow\">clicking here<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>If you are lazy loading images, we recommend setting <strong>Responsive Placeholder<\/strong> to on. Otherwise, you can leave this off. This option reserves the space on the page for images so that the layout doesn&#8217;t jump around when users scroll down.<\/li>\n<li>The prefilled text in <strong>Responsive Placeholder SVG<\/strong> should be fine for most sites, but you can customize the color using the {color} variable.<\/li>\n<li>For <strong>Responsive Placeholder Color<\/strong>, the default color is fine for most people, but if you select something, keep it grey-ish to be with the web standards.\n<ul>\n<li>If you choose to enable LQIP Cloud Generator, you will need to register and setup your site with QUIC.Cloud. We have a Knowledge Base article on how to do that which you can read by <a href=\"https:\/\/chemicloud.com\/kb\/article\/setup-quic-cloud-cdn-on-wordpress\/\">clicking here<\/a>.<\/li>\n<li>With this option, a very low-quality version of the image will appear during page load and will soon be replaced by a full-quality image. This is an excellent option for image-heavy websites as it gives them the appearance of loading quickly.<\/li>\n<li>A setting of 4 for LQIP Quality should suffice for most users, but you can test other settings and use what you feel works for you!<\/li>\n<\/ul>\n<\/li>\n<li>The <strong>Lazy Load Iframes<\/strong> option is helpful if you have iframes or video embeds on your page that aren&#8217;t used. Otherwise, you can leave this setting in the off position.<\/li>\n<li>Lastly, for <strong>Inline lazyLoad Images Library<\/strong>, you can leave this to off for better performance. If you turn it on, it will remove another HTTP Request which can improve page scores, if your site is super lean, however, most users will be okay with the setting to off.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p><strong>Next, at the top of the page click the Media Excludes tab.\u00a0<\/strong><\/p>\n<p>Each of the options in this section are blank by default. In these boxes you will enter URI or UIRLs, depending.<\/p>\n<ul>\n<li>For <strong>Lazy Load Images Excludes<\/strong>, enter the URL of any images you want to exclude from lazy-load. This is a good idea for ATF-images or ones on pages that are constantly skimmed by users.<\/li>\n<li>For <strong>Lazy Load Image Class Name Excludes<\/strong>, enter the CSS Class of any image you want to exclude.<\/li>\n<li>On <strong>Lazy Load Image Parent Class Name Excludes<\/strong>, you can enter the parent class of any images you want to exclude.<\/li>\n<li>For <strong>Lazy Load Iframe Class Name Excludes<\/strong>, this is a handy way of excluding certain videos from lazy load, such as the ones that are nearer to the top of your web pages, or those which take a while to load.<\/li>\n<li>With <strong>Lazy Load Iframe Parent Class Name Excludes<\/strong>, you can enter the parent class name to exclude any iframes that don&#8217;t have a CSS class assigned.<\/li>\n<li>Finally, for <strong>Lazy Load URI Excludes<\/strong>, you can list URIs in the box to disable lazy load functions on certain pages, such as a landing page where you want videos and images to load instantly.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p><strong>Next, at the top of the page click the Localization tab.<\/strong><\/p>\n<ul>\n<li>The <strong>Gravatar Cache<\/strong> option is a great feature if your site is busy with tons of comments, but not necessary if your site doesn&#8217;t have any comments or use comments at alll.<\/li>\n<li>If you have set the Gravatar Cache option to On, you should have the <strong>Gravatar Cache Cron<\/strong> enabled, as well.<\/li>\n<li>Lastly, with the <strong>Gravatar Cache TTL<\/strong>, the default setting is fine, but you can probably go a lot higher, nearer to 3-6 months. How often does one really update their Gravatar?<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p><strong>Lastly, at the top of the page click Tuning Settings.\u00a0<\/strong><\/p>\n<ul>\n<li>In the <strong>CSS Excludes<\/strong> box you should list all CSS files you don&#8217;t want to be minified or combined. You can enter their full string name, like elementor-builder.css, or a partial string, like elementor.<\/li>\n<li>For <strong>JS Excludes<\/strong>, list all the JavaScript files to be excluded from minification and combination.<\/li>\n<li>In <strong>Critical CSS<\/strong>, specifiy critical CSS rules for above the fold content. Use this only if you have Load CSS Asynchronously enabled.<\/li>\n<li>In <strong>JS Deferred Excludes<\/strong>, list JavaScript files or inline JavaScript code that will not be deferred on load.<\/li>\n<li>In the <strong>URI Excludes<\/strong> field, you can enter the URL of any pages where you won&#8217;t want the optimizations to apply.<\/li>\n<li>Finally, select <strong>Role Excludes<\/strong> if any roles should be excluded from optimizations.<\/li>\n<\/ul>\n<p>Once you&#8217;ve configured your settings, be sure to click Save Changes at the bottom of the page.<\/p>\n<p>The settings we&#8217;ve detailed above should be enough to get you going in no time with the LiteSpeed Cache Plugin for WordPress!<\/p>\n<p>\u25b6\ufe0f Please join us in the next tutorial, where we will walk you through the <a href=\"https:\/\/chemicloud.com\/kb\/article\/setup-quic-cloud-cdn-on-wordpress\/\">setup of QUIC.Cloud CDN<\/a> in order to speed up your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to Page Caching, the LiteSpeed Cache plugin for WordPress has you covered! There are dozens of options you can tinker with to get your site up and running at the best performance possible with the plugin. But why tinker when you could just follow our knowledge base&#8230;<\/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-6554","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\/6554","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=6554"}],"version-history":[{"count":8,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/6554\/revisions"}],"predecessor-version":[{"id":8470,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/6554\/revisions\/8470"}],"wp:attachment":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/media?parent=6554"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=6554"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=6554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}