LochStudios  /  Help Centre  /  Getting Started  /  Speed up your website (caching, CDN, image optimisation)

Speed up your website (caching, CDN, image optimisation)

Essential techniques to improve website performance: caching, content delivery networks, image optimization, and best practices.

Updated

Website speed matters—slow sites lose visitors and rank lower in search engines. Here's how to speed yours up.

Why speed matters

Every second your site takes to load costs you:
- Visitors leave (bounce rate increases)
- Search rankings drop (Google prioritizes fast sites)
- Conversions fall (people abandon slow e-commerce)
- Mobile users suffer most (slower connections, slower devices)

Aim for a page load time under 3 seconds, ideally under 2.

1. Enable caching

Caching stores copies of your pages so returning visitors don't need to rebuild them from scratch.

Browser caching

Tell visitors' browsers to cache static files locally. In your hosting control panel:
- Find the Performance, Caching, or Browser Caching section
- Enable browser caching for static assets (images, CSS, JavaScript)
- Set expiration to 30 days or more

Or, add this to your .htaccess file (if using Apache):
CODE0

Server-side caching

If you're using WordPress or another CMS, install a caching plugin:
- WordPress: WP Super Cache, W3 Total Cache, or LiteSpeed Cache
- Drupal: Drupal's built-in page cache
- Joomla: JotCache or SP Page Builder caching

These plugins store rendered HTML so pages load instantly for repeat visitors.

Database query caching

Many CMSs have options to cache database queries. Enable this in your CMS settings—it dramatically reduces database load.

Tip: If your hosting provider offers Redis or Memcached, ask support to enable it. This speeds up CMS caching significantly.

2. Use a Content Delivery Network (CDN)

A CDN stores copies of your images, CSS, and JavaScript on servers around the world, so visitors download from a server near them instead of your main server.

How to set up a CDN

  1. Sign up for a CDN service (many offer free tiers: Cloudflare, jsDelivr, etc.)
  2. Point your domain's nameservers to the CDN (or add a CNAME record—follow their setup guide)
  3. Configure the CDN to cache your static assets
  4. Done—the CDN automatically serves your images and files worldwide

Expected improvement

  • Images and static files load 50–80% faster for distant visitors
  • Your main server gets less traffic
  • Cost is usually minimal (free tier or $10–50/month for larger sites)

Free CDN options

  • Cloudflare: Free tier includes CDN, DDoS protection, and SSL
  • jsDelivr: Free for open-source projects and public files
  • Bunny CDN: Affordable paid option with excellent performance

3. Optimize your images

Images are often the largest files on a website. Compress them ruthlessly.

Before uploading

- Resize images to the exact dimensions you'll display (don't upload a 4000×3000px image to show 800×600px on the page)
- Compress using a tool like:
- TinyPNG / TinyJPG (online, free, excellent quality)
- ImageOptim (Mac, free)
- FileOptimizer (Windows, free)
- Squoosh (Google's web tool, free)

Choose the right format

  • JPEG: Photos and complex images (smaller file size)
  • PNG: Graphics, logos, images that need transparency (slightly larger)
  • WebP: Modern format 25–35% smaller than JPEG/PNG (supported by most browsers)

Lazy loading

Tell your browser to only load images as users scroll to them:
- Add loading="lazy" to <img> tags in your HTML
- Or use a lazy-loading plugin (most CMSs have one)

This makes your initial page load much faster.

### Example:
CODE1

4. Minimize code (CSS and JavaScript)

Remove unnecessary characters from code files to reduce file size.

In your CMS

  • Most caching plugins have an option to "minify CSS/JavaScript"
  • Enable this option
  • Test your site after enabling to ensure nothing breaks

Defer non-critical JavaScript

JavaScript can block page rendering. In your .htaccess or via your control panel:
CODE2

The defer attribute tells the browser to load the script in the background after the page renders.

5. Use the right file types

  • Use SVG for logos and icons (scales perfectly, small file size)
  • Use CSS for simple shapes and animations instead of images
  • Embed small icons as data URIs or icon fonts instead of separate files

6. Reduce HTTP requests

Fewer files = faster load. Combine:
- Multiple CSS files into one
- Multiple JavaScript files into one (or use a bundler)
- Small images into CSS sprites or single icon fonts

Your CMS might have a "concatenate" or "combine assets" option—enable it.

Quick wins checklist

  • [ ] Enable browser caching in your control panel
  • [ ] Enable database query caching in your CMS
  • [ ] Set up a free CDN (Cloudflare is easiest)
  • [ ] Compress all images before uploading
  • [ ] Install a caching plugin (WordPress users)
  • [ ] Enable minification of CSS/JavaScript
  • [ ] Test your site's speed at Google PageSpeed Insights
  • [ ] Monitor improvements week-to-week

Test your speed

Use free tools to measure improvements:
- Google PageSpeed Insights: pagespeed.web.dev (enter your domain)
- GTmetrix: gtmetrix.com (detailed breakdown)
- WebPageTest: webpagetest.org (advanced analysis)

Aim for:
- Mobile: 3–4 seconds (First Contentful Paint)
- Desktop: 2–3 seconds
- Largest Contentful Paint: under 2.5 seconds

Long-term maintenance

Speed isn't a one-time fix:
- Review your site's speed monthly
- Update your CMS and plugins (newer versions are usually faster)
- Remove unused themes, plugins, and code
- Monitor for large new files that slow you down
- Keep images optimized as you add new content

Start with caching and image optimization—these two changes alone will speed up most sites by 40–60%. Add a CDN if you serve international visitors, and you'll be in the top tier for performance.


Was this article helpful?

← Back to Getting Started