How to Improve Web Performance: Lazy Loading, Caching & More

How to Improve Web Performance: Lazy Loading, Caching & More

Enhancing the performance of websites is essential for SEO ranking, quicker load times, and improved user experience. Here are a few essential methods:
‍

1. Delayed loading: 

Non-essential resources (such as pictures and movies) are loaded later when they are required. This speeds up the initial page load.
‍

For images:

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload" alt="Example">

Use JavaScript to replace `data-src` with `src` when the image enters the viewport. Alternatively, use the `loading="lazy"` attribute:

<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">

For videos & iframes:

<iframe src="about:blank" data-src="video-url" class="lazyload"></iframe>

Use JavaScript to update `src` on demand.

2. Caching:

By storing frequently used resources on the user's device or CDN, caching helps minimize server requests.

• Browser Caching (via .htaccess in Apache)

<IfModule mod_expires.c>
 	ExpiresActive On
 	ExpiresByType text/html "access plus 1 day"
 	ExpiresByType image/jpeg "access plus 1 month"
 	ExpiresByType application/javascript "access plus 1 year"
 </IfModule>

‍

Utilize programs like PHP OpCache, Redis, or Memcached for server-side caching.

Client-side Caching: Keep frequently used information in IndexedDB or `localStorage`.

3.  Optimize Images

Large images slow down websites.

• Instead of using PNG/JPEG, use more recent formats like WebP and AVIF.
• Use TinyPNG, ImageOptim, or imagemin to automatically compress images.
• Use responsive images:

<picture>
  <source srcset="image.avif" type="image/avif">
  <sourcesrcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Responsive Image">
</picture>

4. Use a CDN (Content Delivery Network)

A CDN stores static resources across multiple servers worldwide to serve users from the nearest location, reducing latency. Popular CDNs:

• Cloudflare
• AWS CloudFront
• Fastly

5. Minify & Bundle Assets

• Minify CSS, JavaScript, and HTML using tools like Terser (for JS) and CSSNano (for CSS).
• Bundle multiple small files to reduce HTTP requests (Webpack, Parcel, or Rollup).

6. Reduce HTTP Requests

• Combine JS and CSS files to reduce the number of requests.
• For small icons, use inline SVG rather than image files.
• Remove any extraneous third-party fonts and scripts.

7. For JS, Asynchronous & Deferred Loading

• Async should be used for independent scripts.

<script src="script.js" async></script>

‍

• Use `defer` for scripts dependent on the DOM:

<script src="script.js" defer></script>

8. Reduce Unused CSS & JS

• Use PurgeCSS to remove unused styles.
• Remove unused JavaScript functions & libraries.

9. Monitor and Test Regularly

• Enable browser caching, minify CSS and JS, and optimize images.
• Track server uptime and response time using Pingdom or UptimeRobot.
• Tests of Function: Verify the functionality of payment gateways and third-party interfaces, test forms, login pages, and interactive components.
• Conduct responsiveness testing on mobile devices and many browsers.
• Check for vulnerabilities with Wordfence (if using WordPress) or Sucuri. Update software, themes, and plugins frequently and activate SSL/TLS and conduct penetration tests.

10. Database Optimization

• Index frequently queried columns.
• Use query caching in MySQL.
• Optimize database queries using tools like EXPLAIN.

11. Use HTTP/2 or HTTP/3

These newer protocols allow multiplexing, reducing latency by loading multiple resources simultaneously.

Implement these optimizations and monitor your website performance using tools like Lighthouse or PageSpeed Insights.

FAQs (Frequently Asked Questions)

What is lazy loading?

Lazy loading is a technique that delays the loading of non-essential resources, such as images and videos, until they are needed. This improves page speed and reduces initial load time.

How does caching improve performance?

Caching stores frequently accessed data on the user's device or a CDN to minimize server requests, leading to faster load times.

What is the best image format for web performance?

Modern formats like WebP and AVIF provide better compression and quality compared to PNG and JPEG, making them ideal for web performance.

How can I reduce HTTP requests?

You can reduce HTTP requests by combining CSS/JS files, using inline SVGs for small icons, and removing unnecessary third-party scripts.

Why should I use a CDN?

A CDN stores your static assets on multiple servers worldwide, delivering them from the closest server to the user, reducing latency and improving performance.

What is the difference between async and defer in JavaScript?

`async` loads scripts independently, while `defer` waits for the HTML to be fully parsed before executing scripts in order.