¶ Common site speed issues
Here are some of the reasons that your site can perform poorly in speed tests:
- Large page size
- Pages contain large images
- Large numbers of small files included in each page
- Too many plugins
Here are the principal solutions used to fix sites that load slowly:
- Reduce the size of the images used in your site
- Install plugins that combine small CSS and JS files together
- Remove unimportant plugins
- Install caching plugin
- Use a content delivery network (CDN)
¶ LiteSpeed Cache plugin
The Litespeed Cache plugin brings these important functions:
- Caching of images, CSS and javascript
- Combining of CSS and javascript into a single file
- Minification of HTML, CSS and javascript
¶ LiteSpeed Cache settings
Here are our recommended settings for the LiteSpeed Cache plugin. You must enable the "Advanced View" in order to access the settings for "Optimize" and "Tuning".
¶ Excludes
With certain themes, the shopping cart may be cached and will not accurately reflect products that have been added to the cart. To prevent caching of items in the cart, we need to configure LiteSpeed cache so that it does not cache certain cookies.
In your WordPress Admin, go to LiteSpeed Cache > Cache > Excludes.
In the Do Not Cache Cookies section, enter the 2 cookie names shown below then Save Changes:
woocommerce_items_in_cart
designer-saved-projects
If you’d like to verify that this is working, repeat steps 1-6 above. Unlike before, we should now see that the home page is still cached and the cart is properly updated.
¶ Optimize
LiteSpeed Cache Optimization settings allow you to reduce the number of files delivered by the server to the browser.
The screenshot below illustrates a set of settings that functions well with wp2print:
¶ Tuning
In the "Tuning CSS" tab of the LiteSpeed cache > Page Optimization page, we must configure LiteSpeed cache to exclude the following CSS files:
CSS Excludes:
woocommerce-smallscreen.css
In the "Tuning" tab of the LiteSpeed cache > Page Optimization page, we must configure LiteSpeed cache to exclude the following JS files:
JS Excludes:
single-product.min.js
jquery.flexslider.min.js
¶ Purging the cache
This video will demonstrate cache purging the LiteSpeed Cache. This is an easy and important process which will avoid the problem of your customers seeing old data that is stored in the cache.
¶ Perfmatters Plugin
Prevents your site from serving a number of items that are extraneous to an e-commerce site.
By default, WordPress contains a number of functions that are not useful to your customers and slow down the loading your site's pages. The Perfmatters plugin prevents unnecessary items that are built into WordPress from loading. Removing these items not only reduces the size of your site's pages, but it also improves the security of your site. The Perfmatters configuration setting are available via: Settings > Perfmatters
We recommend the following configuration for the Perfmatters plugin. When using the Kadence Slider, do not configure Perfmatters to Remove jQuery Migrate:
¶ Using a CDN
A content delivery network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where your customers are. CDNs cache content like web pages, images, CSS files and more in proxy servers located near to your physical location of your customers. This helps improve the loading time for your website in 2 different ways:
- Because the caching servers of the CDN are located physically closer to your customers than the server hosting your site is, the transmission time from the CDN caching server to your customer's computer is shorter than it would otherwise be.
- Because many of the elements for your site's page are served by the CDN caching servers, the server hosting your site works serves fewer page elements than it would without the CDN. Since the server hosting your site is working less hard, it can serve page elements faster.
There are a number of well established companies that offer CDN services:
- Cloudflare
- Amazon Web Services Cloudfront
- Quic.cloud
- Akamai
Of these services, the Quic.cloud CDN is specifically built to work with host servers using the LiteSpeed server and LiteSpeed cache. The Quic.cloud CDN can cache static files like images, CSS and JS files created by the LiteSpeed cache plugin as well as dynamic page content.
¶ Reducing size of images
As graphics arts professionals, we all have the habit of wanting to use large images with the highest resolution possible. Although it is possible to use large images in a web site, these large images can make the site slow to load, particularly for users browsing with their mobile phones.
When creating images for use in your website, you will usually want to reduce the size of the images prior to uploading then to the website. For banner images that will be displayed full-width on the website, you will want to reduce the image to a maximum width of 1200px and a maximum size of 100Kb. For images that are not displayed full-width, we would recommend a maximum width of 600px and a maximum size of 60Kb.
Fortunately, Photoshop has some easy-to-use methods to shrink images for use in websites. Here is a video that explains how to use Photoshop to reduce the size of images you will use in your website: https://www.youtube.com/watch?v=QSyb_6NRDeI