10 Ways to Improve Your Website Loading Speed

Did you know a 1-second delay in website loading can reduce conversions by 7%? And if your site takes over 3 seconds to load, nearly 40% of users might leave. Improving your website's loading speed is crucial for better user experience, higher search rankings, and increased conversions.

Here’s how you can make your website faster:

• Compress and resize images: Use tools like TinyPNG or ShortPixel to optimise images.
• Enable browser caching: Store static files locally for quicker repeat visits.
• Minify code: Use tools like CSSNano or UglifyJS to shrink CSS, JavaScript, and HTML files.
• Use a CDN: Deliver content faster by routing through servers closer to users.
• Enable lazy loading: Load below-the-fold images only when needed.
• Reduce HTTP requests: Combine files and eliminate unnecessary requests.
• Optimise server response time: Choose faster hosting and enable server-side caching.
• Remove unnecessary redirects: Avoid redirect chains to improve load times.
• Meet Core Web Vitals standards: Focus on metrics like LCP, FID, and CLS.
• Test and monitor regularly: Use tools like Google PageSpeed Insights or GTmetrix to track performance.

Google PageSpeed Insights: Step-by-Step Guide to Boost Site Speed

1. Compress and Resize Images

Large, unoptimised images can significantly slow down your website. According to GTmetrix, optimising images can cut the total page load size by up to 80%. That’s a big win for faster load times.

To optimise images, focus on two things: compressing and resizing.

Compression Options

• Lossy: Reduces file size by removing some image data. Best for photos.
• Lossless: Shrinks file size without sacrificing quality. Ideal for logos and graphics.

Here’s a quick guide to match image types with the right format and compression method:

Image Type	Recommended Format	Compression Type	Best Use Case
Photos	JPEG	Lossy (60-80%)	Blog posts, hero images
Graphics	PNG	Lossless	Logos, icons
Simple Images	WebP	Either	General web use
Animations	GIF/WebP	Lossy	Short animations

Tools for Optimisation

You can automate the process with plugins like ShortPixel or WP Rocket. If you prefer manual control, tools like TinyPNG are great for fine-tuning.

Resizing Images

Always resize images to fit their display dimensions. For example, if your content area is 800px wide, upload an image that’s 800px wide instead of 2000px. This avoids unnecessary overhead.

For responsive designs, use the srcset attribute to serve images optimised for different screen sizes:

<img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w" 
     sizes="(max-width: 320px) 300px, (max-width: 640px) 600px, 900px" 
     src="large.jpg" 
     alt="Responsive image">

Enable Lazy Loading

To improve initial page load times, enable lazy loading for images that appear below the fold. Modern browsers support the loading="lazy" attribute, which makes setup simple - no JavaScript required.

2. Set Up Browser Caching

Browser caching helps speed up load times for returning visitors by letting browsers store static files like images, CSS, and JavaScript locally. This way, the browser doesn’t have to repeatedly fetch these files from the server on every visit.

Configure Cache-Control Headers

One way to enable browser caching is by setting up Cache-Control headers in your .htaccess file. Here's an example configuration:

<FilesMatch "\.(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

This tells browsers how long to cache specific file types, such as images or scripts.

Set Cache Durations Based on File Types

Different types of files require different caching durations. Adjust caching times based on how often assets are updated:

File Type	Cache Duration	Why?
Images & Icons	1 year	Rarely updated, long-term safe
CSS & JavaScript	1 month	Updated less often than content
HTML	Short or none	Content changes frequently
Dynamic Content	No cache	Must always stay up-to-date

WordPress Users: Use Plugins

If you're using WordPress, caching plugins like WP Rocket can handle browser caching for you. These tools simplify the process, requiring minimal manual setup.

Combine with a CDN

Pairing browser caching with a Content Delivery Network (CDN), such as Cloudflare or Akamai, can improve performance even further. CDNs automatically manage cache headers and deliver content from servers closer to your users.

Monitor and Update Cache Settings

Use tools like Google PageSpeed Insights to test your caching setup. Look for recommendations on optimising static asset caching. To ensure users always see the latest updates, you can add version numbers to your file URLs. For example:

<link rel="stylesheet" href="styles.css?v=1.1">

This approach ensures that browsers fetch the updated file when changes are made.

Now that caching is covered, the next step is to shrink your code for even faster load times.

3. Reduce Code Size

Speeding up your website often involves tackling code bloat, which can significantly slow down page loads. By trimming unnecessary code, you can deliver a faster, smoother experience for your users.

Use Minification Tools

Minification reduces file sizes without altering functionality. Tools like CSSNano can shrink CSS files by removing extra spaces, combining similar rules, and simplifying colour values. For example, a CSS file originally 100KB can be reduced to just 20KB with effective minification.

Here’s how different file types can benefit from minification:

File Type	Average Size Reduction	Recommended Tool	Benefits
CSS	60-80%	CSSNano	Combines rules, removes duplicates
JavaScript	30-50%	UglifyJS	Shortens variable names, removes comments
HTML	20-30%	HTMLMinifier	Removes whitespace, optimises attributes

Once you’ve minified your files, you can take it a step further by enabling compression.

Enable Gzip Compression

Gzip compression complements minification by further reducing file sizes. You can enable it by editing your server's .htaccess file. Here's an example:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript
</IfModule>

This simple adjustment can make a noticeable difference in load times.

Eliminate Unused Code

Over time, unused code can pile up, adding unnecessary bulk. Removing this "dead code" ensures your site loads only what’s needed. Use these tools to identify and clean up unused code:

• Chrome DevTools Coverage tab: Pinpoints unused JavaScript and CSS.
• PurgeCSS: Strips out unused CSS selectors.
• Tree Shaking: Built into modern JavaScript bundlers to remove unused exports.

Regularly cleaning up unused code keeps your site lean and efficient.

4. Cut Down HTTP Requests

After optimising images and setting up caching, the next step to improve load times is reducing HTTP requests.

Combine and Optimise Files

Merge your JavaScript and CSS files into a single file whenever possible. Tools like Webpack, CSSNano, or UglifyJS can help you consolidate and optimise these files, reducing the number of HTTP requests.

Enable Lazy Loading

For images and videos that aren't immediately visible (below-the-fold content), use lazy loading. Add the loading='lazy' attribute to your HTML code like this:

<img src="image.jpg" loading="lazy" alt="Description">

This ensures these assets load only when needed, saving bandwidth and speeding up the initial page load.

Use Image Sprites for Small Graphics

If your site uses multiple small images, such as icons, combine them into a single sprite sheet. This reduces HTTP requests while maintaining image quality. It’s a simple way to streamline resource management.

Review Third-Party Scripts

Third-party scripts - like tracking pixels, social media widgets, or outdated analytics tools - can slow down your site by adding extra HTTP requests. Use tools like Chrome DevTools to regularly review these scripts and remove anything unnecessary. A tag management system, such as Google Tag Manager, can also help you control how and when scripts load.

Next, we’ll explore ways to improve server response times.

5. Use CDNs for Faster Delivery

A CDN (Content Delivery Network) helps speed up your website by delivering static files from servers closer to your users. Here's how it works and how you can set one up.

How CDNs Improve Speed

A CDN reduces the time it takes for data to travel by routing user requests to the nearest edge server. For instance, if your site is hosted in New York and someone visits from Tokyo, the CDN serves the content from a nearby server in Asia instead of sending it all the way from New York.

Setting Up a CDN

Providers like Cloudflare, MaxCDN, and Amazon CloudFront offer various plans and features. Many hosting companies also bundle CDN services into their packages.

To set up a CDN:

• Pick a provider with a strong global network.
• Adjust your DNS settings to direct traffic through the CDN.
• Set caching rules to control how content is stored and delivered.

Make the Most of Your CDN

Use your CDN to handle files like images, videos, CSS, JavaScript, fonts, and documents. This ensures your site runs smoothly and loads quickly.

Keeping Content Updated

Use techniques like URL versioning or fingerprinting to ensure cached files are updated whenever you make changes.

Added Security Features

Many CDNs also enhance security by offering:

• Protection against DDoS attacks
• SSL/TLS encryption for safer browsing
• Web application firewalls to block malicious traffic

Track your CDN's performance with tools like Google PageSpeed Insights or GTmetrix. Regular checks can help you identify and fix any issues that might slow down your site.

6. Speed Up Server Response

Your server's response time plays a key role in how quickly your website loads. Even with other tweaks in place, a sluggish server can slow everything down.

Pick the Right Hosting Provider

We exclusively use Sitehost to provide our Craft CMS hosting. They are consistently ranked as one of NZ’s fastest and most reliable hosting providers.

Use Server-Side Caching

Server-side caching helps by storing frequently accessed data in memory, cutting down on database queries and processing time. Here are a few options:

Caching Solution	Best For	Key Features
Memcached	High-traffic websites	Quick performance with minimal memory use
Redis	Complex applications	Offers data persistence and supports multiple data types
Blitz	Craft CMS Plugin	Improves User Experience significantly on image-heavy sites.

Improve Database Efficiency

Slow database queries can drag down your server. Regular maintenance - like removing unused tables, indexing important columns, and keeping structures optimised - can make a big difference. Pair this with caching to maintain a speedy server.

Keep an Eye on Performance

Tools like Google PageSpeed Insights and GTmetrix can help you monitor your server's Time to First Byte (TTFB). Aim for a TTFB under 200ms and check regularly to catch any issues early.

Fine-Tune Server Settings

Adjusting your server settings can also improve response times. Here’s how:

• Enable HTTP/2 for faster, simultaneous connections
• Switch to high-performance servers like Nginx or Lighttpd instead of Apache
• Turn on keep-alive connections to reduce overhead
• Use load balancing to handle high traffic efficiently

These adjustments, combined with earlier techniques, ensure your website runs smoothly and quickly.

7. Load Scripts Asynchronously

Loading scripts synchronously can slow down your website by processing files one at a time. Asynchronous loading allows multiple scripts to load at the same time, ensuring your core content displays quickly.

At MOCA, this is a key consideration and something we always consider in development and check when hosting websites we have not built.

Know Which Scripts to Keep Synchronous

Some scripts are better left synchronous to avoid functionality issues. Examples include:

• Payment processing scripts
• Key user interface elements
• Core functionality scripts

Track Performance Improvements

Tools like Google PageSpeed Insights and Core Web Vitals can help you measure performance gains. Pay attention to metrics such as content rendering speed and interactivity to confirm the impact of asynchronous script loading.

Manage Script Dependencies

For scripts that rely on each other, maintain the correct loading order. Modern JavaScript module systems, such as ES6 modules, can simplify this process:

import { criticalFunction } from './critical.js';

Next, let’s explore how to eliminate unnecessary redirects to further boost your site’s performance.

8. Remove Unnecessary Redirects

Redirects can slow down your website by adding extra steps in the loading process. Every redirect adds an HTTP request-response cycle, which means more waiting for your users.

Why Redirects Matter

Redirect chains are a common issue. They happen when one redirect leads to another, creating a sequence that delays the page from loading. For example:

example.com → www.example.com → m.example.com → m.example.com/home

This kind of chain can frustrate users and hurt your site's performance.

How to Spot Redirect Problems

The right tools can help you identify redirect issues quickly. Here are a few options:

Tool	What It Does	Key Metrics It Tracks
Google PageSpeed Insights	Analyses site performance	Server response time, redirect delays
Semrush Site Audit	Scans for redirect issues	Redirect chains, broken redirects
Pingdom Speed Test	Monitors site speed in real time	Time spent on redirects

Fixing Redirect Issues

To improve performance, ensure your URLs point directly to their final destination. For instance, instead of:

example.com → www.example.com → m.example.com → m.example.com/home

Make sure example.com points straight to m.example.com/home.

Key Problems to Address:

• Domain Changes: Update internal links to reflect your current domain.
• Mobile Redirects: Use responsive design so users don’t need separate mobile-specific URLs.

Smart Redirect Management

Follow these tips to keep redirects under control:

• Use 301 redirects for permanent URL changes.
• Avoid 302 redirects, as they’re meant for temporary use.
• Audit your website’s URLs regularly to catch issues early.
• Track your redirects’ performance using Core Web Vitals data.

Stay Ahead with Regular Monitoring

Make it a habit to check your site with tools like Google PageSpeed Insights. This helps you spot and fix new redirect chains before they become a problem.

9. Meet Core Web Vitals Standards

Improving these metrics can help your site rank better and create a smoother experience for users.

The Three Core Metrics Explained

Metric	Target	What It Measures
Largest Contentful Paint (LCP)	< 2.5 seconds	Time taken to load the main content
First Input Delay (FID)	< 100ms	Time for the site to respond to user interaction
Cumulative Layout Shift (CLS)	< 0.1	How stable the visual layout is

How to Boost LCP Performance

The largest content on your page - often an image or a block of text - needs to load as fast as possible. To achieve this, focus on reducing server response times, optimising how resources are loaded, compressing images, and using effective caching.

Practical tips to improve LCP:

• Use modern image formats like WebP
• Implement responsive images to adjust to screen sizes
• Streamline the critical rendering path
• Remove unnecessary JavaScript and CSS

Enhancing FID Scores

Heavy JavaScript can slow down your site by blocking the main thread, leading to delayed interactions.

How to fix this:

• Break your JavaScript into smaller, manageable chunks (code splitting)
• Use async or defer attributes for non-essential scripts

Once interactivity is addressed, shift focus to improving visual stability.

Reducing CLS Problems

A stable layout ensures users aren't frustrated by unexpected shifts in content. Sites with better CLS scores see fewer users abandoning their pages.

Steps to maintain stability:

• Define fixed dimensions for images and embeds
• Reserve space for dynamic elements
• Avoid inserting new content that pushes existing elements around

Tools for Measuring Performance

Use Google's tools to track and improve your Core Web Vitals:

• PageSpeed Insights: Provides detailed performance data
• Search Console: Offers site-wide insights into Core Web Vitals
• Lighthouse: Allows local testing during development

Research from Moz shows that improving LCP by just one second can increase conversions by up to 7%, proving these metrics aren't just technical - they directly impact your bottom line.

Stay on Top of Performance

Check your metrics regularly using Google Analytics and Search Console. If you notice any dips, act quickly to resolve the issues.

10. Track and Test Speed Regularly

Once you've optimised your site's performance, it's crucial to keep an eye on it to ensure those improvements stick. Website speed isn't a one-and-done task - it needs regular checks to maintain top performance.

Useful Tools for Speed Testing

Tool Name	What It Does
Google PageSpeed Insights	Analyses performance and gives actionable tips
GTmetrix	Provides detailed speed metrics and waterfall data
Pingdom Website Speed Test	Monitors speed in real-time from various locations
Semrush Site Audit	Flags technical SEO and performance issues

Setting Up a Testing Routine

Automate speed tests for your most-visited pages at consistent intervals. Focus on these metrics:

• Page load time: How quickly your entire page loads.
• Server response time (Time to First Byte): How fast your server starts sending data.
• HTTP requests: The number of requests your page makes to load all its resources.

Understanding Test Results

Pay attention to any sudden dips or patterns in performance. These could signal potential problems that need addressing.

Fixing Performance Issues

When test results show issues, tackle them in this order:

1. Server response delays: Address server-side problems first.
2. Resource optimisation: Compress images, minify CSS/JavaScript, etc.
3. Caching issues: Ensure caching is properly configured.
4. Inefficient code: Review and streamline your codebase.

Testing Before Deployment

Always test any changes in a staging environment before rolling them out live. This helps catch issues early without risking your site's functionality.

Keeping Track of Changes

Use version control to document all optimisations. This not only helps you measure their impact but also serves as a roadmap for future updates. Consistent documentation ensures your site's performance stays on track over time.

Conclusion

Website speed plays a key role in online success. Strategies like compressing images and loading scripts asynchronously all contribute to creating a faster, more responsive site.

Techniques such as browser caching and using CDNs help cut down server requests and improve load times by reducing the Time to First Byte. Core Web Vitals, which impact both user experience and search rankings, demand careful attention to speed improvements, from image compression to streamlining code.

Keep in mind, improving speed isn’t a one-and-done task. Regular checks with tools like Google PageSpeed Insights and GTmetrix ensure your site stays optimised. Techniques like reducing HTTP requests and cleaning up code are essential for maintaining consistent performance. A routine testing schedule helps you catch and fix issues quickly.

By applying these methods step by step, you can build a faster website that enhances user experience and supports your business objectives. Faster sites lead to better engagement, higher conversions, and improved search rankings - key factors for staying competitive in the digital space.

While it’s tempting to chase perfect scores on speed tests, the real goal is to offer visitors a smooth, fast browsing experience that keeps them coming back. Focus on what truly matters: the experience you deliver to your users.

FAQs

How do I optimise website performance?

At MOCA, we are all about website performance so you don’t have to worry about this stuff. That said, these are the things we look at as part of our auditing and maintenance processes to ensure your site is always performing at its best.

To improve your website's performance, focus on a few key areas: compressing images, caching files, minimising code, and using content delivery networks (CDNs). These methods work together to speed up load times and enhance user experience.

• Image Compression: Tools like TinyPNG can shrink file sizes by up to 80%, making your pages faster without sacrificing quality.
• Caching: Plugins such as Blitz store static resources in visitors' browsers, so they don't need to download them again on repeat visits.
• Minifying Code: Tools like CSSNano and UglifyJS clean up your CSS and JavaScript files. We can combine files and delay non-essential scripts, ensuring important content loads first.
• CDNs: Content delivery networks serve your website's content from servers closer to your users. Many hosting providers now include CDN options to reduce Time to First Byte (TTFB) and boost page speed.

Once you've implemented these steps, test your site's performance regularly. Tools like Google PageSpeed Insights can help you monitor Core Web Vitals - such as Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift - which are essential for both user experience and search rankings. For more details, revisit earlier sections on testing and optimisation strategies.

Related Blog Posts

• 5 Signs Your Website Needs a Professional Redesign