Speed up your website with caching and compression

A slow website costs you visitors, conversions and rankings in Google. The good news is that you can fix a lot yourself. You can speed up your website with caching, compression and image optimisation, and much of that is simply a matter of the right settings on your Plesk hosting. This article first explains what caching is and why it makes your site faster. After that, you get a practical, step-by-step plan you can apply straight away, plus tips for measuring your speed.

What is caching and why does it speed up your website?

Caching means keeping a ready-made copy of something that would otherwise have to be calculated or fetched again on every visit. Instead of redoing all the work each time, the server or the browser hands back the stored copy. That saves processing time, data traffic and waiting time, so your page loads faster.

Caching happens in roughly three places.

Browser cache (on the visitor's side)

Your visitor's browser stores static files such as images, stylesheets (CSS) and scripts (JavaScript) locally on their computer or phone. When someone returns or clicks through to another page, the browser takes those files from its own cache instead of downloading them again. With a few lines of code, you decide how long the browser may keep those files.

Server-side cache (on the server)

On the server itself, three layers play a role. It helps to keep them separate.

• Page cache: the server stores the fully built HTML of a page. The next visitor gets that ready-made page, so PHP and the database do not have to run again. This is mainly what WordPress cache plugins do.
• Opcode cache (OPcache): PHP keeps the compiled version of your code in memory, so the code does not have to be translated again on every request.
• Object cache: the results of heavy operations, such as database queries, are kept in memory (for example with Redis or Memcached). This mainly helps with dynamic pages that a page cache cannot store as static HTML.

CDN (content delivery network)

A CDN is a network of servers in different locations around the world. Those servers keep copies of your static files and deliver them from the location closest to your visitor. That way, the data travels a shorter distance, which lowers the load time and takes pressure off your own server. A CDN is optional and mostly useful if you have many visitors from different countries.

Measure your speed first: PageSpeed Insights and GTmetrix

Always start by measuring. That tells you where the gains are and whether a change really helps. Measure before and after every change so you can see the effect.

• PageSpeed Insights (pagespeed.web.dev) from Google uses the Lighthouse testing tool and combines that with real user data. The tool checks your page against the Core Web Vitals: LCP (load time, good is 2.5 seconds or faster), INP (responsiveness, good is 200 milliseconds or faster) and CLS (visual stability, good is 0.1 or lower). Google judges these scores at the 75th percentile: at least three quarters of your visitors should get a good experience. In March 2024, INP replaced the older metric FID.
• GTmetrix (gtmetrix.com) is also based on Lighthouse and gives you a clear grade plus a waterfall chart. In that chart, you can see exactly how much time each file costs, so you can spot the biggest culprits.

You can use both tools free of charge for one-off tests. Run a test, note your scores and then get started with the steps below.

Step 1: Set up browser caching via .htaccess

The file .htaccess is a settings file for the Apache web server, and it applies on a per-folder basis. On your Plesk hosting, you find it in the httpdocs folder via the File Manager, or you edit it over FTP. With a small block of code, you tell the browser how long it may keep files.

1. First, make a backup of your existing .htaccess.
2. Open the File Manager in Plesk and go to the httpdocs folder.
3. Open the .htaccess file, or create it if it does not exist yet.
4. Paste the block below at the top of the file and save.
5. Test your site and check with PageSpeed Insights whether the caching is being applied.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images: keep for a year
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Fonts: keep for a year
  ExpiresByType font/woff2 "access plus 1 year"

  # CSS and JavaScript: keep for a month
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # HTML: do not keep long, as content changes
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

The mod_expires module automatically sends both an Expires header and a Cache-Control: max-age header, so you do not need to set both separately. You can safely let static files be kept for a year, because WordPress and most systems add a new version number to the file name when something changes (for example style.css?ver=2.1). The browser then sees a new URL and fetches the new version. HTML, on the other hand, should be kept for a short time, so visitors see your changes quickly.

Step 2: Turn on compression with GZIP and Brotli

Compression shrinks text files such as HTML, CSS and JavaScript before they are sent to the browser. That often saves 60 to 80 per cent of data traffic. There are two methods: the well-known GZIP and the newer Brotli, which makes text roughly 15 to 20 per cent smaller than GZIP. You can enable both: the browser and server automatically choose the best option they both support.

# GZIP compression (mod_deflate)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml
  AddOutputFilterByType DEFLATE application/javascript application/json application/xml
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

# Brotli compression (mod_brotli, if available)
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css text/plain text/xml
  AddOutputFilterByType BROTLI_COMPRESS application/javascript application/json application/xml
  AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
</IfModule>

Only compress text files. Images (JPEG, PNG, WebP) and woff2 fonts are already compressed, so you skip those. Compression not working after saving? On Plesk, the switch is sometimes at server level. In that case, check the Apache and nginx settings for your domain, or ask support to enable the right modules.

Step 3: Optimise your images

Images are usually the heaviest part of a page, so this is often where the biggest speed gains can be made. Keep these points in mind.

• Right dimensions: do not load a 4000-pixel-wide image into a 400-pixel-wide box. Scale the image to the size at which it is actually shown.
• Modern formats: save images as WebP. That format is supported by nearly all browsers and is considerably smaller than JPEG or PNG. The even newer AVIF is sometimes smaller still, but WebP is the safe default choice.
• Compression: a JPEG quality of around 80 per cent gives a small file with no visible loss of quality. Also, remove unnecessary metadata.
• Lazy loading: with the loading="lazy" attribute, the browser only loads images when the visitor is about to scroll to them. Do not do this for the large image at the top of the page, because you want that one to load straight away.

In WordPress, the latest version already adds loading="lazy" automatically, and many image-optimisation plugins can resize your images and convert them to WebP for you. That way, you do not have to do this by hand.

Step 4: Speed up WordPress with a cache plugin

If you use WordPress, a cache plugin takes a lot of work off your hands. Such a plugin makes a static copy of your pages and often handles browser caching and compression for you as well. Important rule: keep only one page-cache plugin active at a time. Otherwise, they will work against each other.

• WP Super Cache is made by Automattic, the company behind WordPress.com. The plugin is simple to set up and creates static HTML pages, so most visitors are served a static page without PHP and the database having to run. This is a good choice if you want something simple that works.
• W3 Total Cache is more extensive and offers page cache, object cache, database cache, browser caching and the merging of files in one plugin. That power comes at a cost: the plugin has had more than one serious security vulnerability in recent years. If you use it, always keep it updated to the latest version and turn on automatic updates.

After installing, turn on page caching, test your site thoroughly and measure again. Combine the plugin with OPcache on the server (the next step) for the best result.

Step 5: Make the most of PHP OPcache

OPcache is a built-in part of PHP that keeps the compiled version of your code in memory. Without OPcache, PHP translates your code again on every request. With OPcache, that happens only once. For a PHP application like WordPress, that is one of the cheapest and biggest speed gains there is.

The good news: OPcache comes as standard in modern PHP versions and is usually already switched on. Because you run the latest PHP versions on LJPc web hosting, you benefit from this automatically. If you want to be sure, check it in Plesk under the PHP settings for your domain. While you are there, pick the newest PHP version: that is faster in itself than an older version.

Note: OPcache is not the same as an object cache such as Redis. OPcache speeds up the code, while an object cache stores data. They complement each other. OPcache is also set at server level, not via .htaccess.

Still slow? How to get more speed

Have you gone through all the steps and are you still seeing slow load times? Then check these common causes.

A valid SSL certificate helps too: browsers only use the faster HTTP/2 protocol over a secure HTTPS connection, and that loads many files more efficiently at once. If your website grows a lot and you run into the limits of shared hosting, more capacity, such as a dedicated server, gives you room to grow again. After that, measure once more so you know it made a difference.

With these steps, you can already gain a lot of speed on your own hosting. Work from top to bottom, measure the effect each time and adjust where needed. Can't work it out? Get in touch with support and we will take a look with you.