Today, website loading speed and overall performance are crucial to excellent user experience and search engine ranking. Recently, Google announced that it will start measuring the core web life cycle, such as visual stability score and page loading time, to determine whether the website is eligible for ranking signal startup. In addition, pages with longer loading time have higher detachment rate and lower average time to stay on the page. This tutorial describes how to set up caching, optimize styles and scripts, and optimize media content to improve website performance. We will use the Litespeed cache plug-in, which is a multifunctional website acceleration solution with many tools and functions to quickly create websites.
For testing purposes, use the WordPress catalog site, which has several extensions, including hivepress and the default listing hive theme. However, if the website is not built with the hivepress plug-in, you can follow the same steps for other word press based websites. Now start installing Litespeed cache. The Litespeed cache plug-in must be installed before installing the Litespeed cache. Navigate to the plug ins > new section and easily complete it directly on the word press dashboard. Find and continue the installation through the search window. After installation, click the \
After installation and activation, you can start optimizing the website. First, let’s look at the default cache settings. To adjust the default cache settings for cache optimization, go to the Litespeed cache > cache page. This page contains only the most important settings. It is recommended that you disable caching of users logged in here and rest API requests. This is necessary for the hivepress plug-in to work properly. When you enable or disable the option, don’t forget to save your changes. After object caching, object caching will be enabled. Navigate to the objects section and make sure that the object cache on the site is available. The connection test must be displayed as \
If the website is based on openlitespeed server or the hosting provider supports object caching, there is no problem passing the connection test. The browser cache is finally moved to the browser cache section to ensure that it is active. This caches all static content of the user’s browser, such as styles, scripts, and images. The next step of page optimization is to go to the Litespeed cache > page optimization section to optimize the style, script and font. Let’s start with CSS optimization and CSS settings. It is recommended to open CSS collapse and CSS merge settings here.
CSS collapse – when this option is enabled, all additional white space characters, line breaks, and other unnecessary or duplicate data will be automatically removed from the CSS file without affecting the site style. CSS merge – when this feature is enabled, all individual CSS files are merged into a single CSS file. In this way, the browser reduces the number of HTTP requests by sending a single file request, rather than requesting each CSS file separately. When using Google fonts in font optimization websites, there are several options for optimizing font loading. You can scroll down in the same CSS settings section to set the font display optimization option to replace, so the replacement font will be used to display text until the custom font is fully ed.
Swap
After setting the options, in order to load Google fonts in the background during page rendering, navigate to the optimization section in the same page and turn on the load Google fonts asynchronous option. JS optimization now go to the JS settings section to optimize JavaScript files. Here, it is recommended to follow the same steps as CSS settings. If the JS minimize and JS combine options are enabled, JS files will also be collapsed and merged into a single file. In fact, there is also the load JS deferred option to create differences. When on, the script loads in the background when the browser renders the page layout and style. Because scripts are usually \
Some scripts may need to be loaded before the page is rendered, so select this option and make sure the front end of the site is not damaged. Finally, optimize the media content. Images often account for about half of the size of web content, so converting all images to webp format (30% smaller than other formats on average) can greatly improve the page loading speed. You can convert website images to webp format by enabling webp version creation and image replacement settings in the Litespeed cache > Image Optimization > Settings section.
After selecting these options, go to the image optimization summary section, obtain the domain key, and click the \
The following is a screenshot of Google pagespeed results on mobile and desktop devices after optimizing website performance according to the steps in this tutorial. That’s all! If you use hivepress (or other word press based solution) to build a catalog or market place website, you can follow the same steps to set up caching, optimize styles, scripts and fonts, and optimize media content, such as images or embedding. As a result, you can get high scores on Google pagespeed (thus improving your SEO ranking) and improve the overall user experience of your website.
In addition, please read the following articles freely: Mistakes in creating a WordPress catalog theme WordPress list site with the best WordPress catalog plug-in
