Boost your website's speed with these five essential front-end optimization tips, including compressing files, using lazy loading, deferring media, leveraging caching, and image compression.
How to Optimize Web Performance? Here are five tips for front-end performance optimization to enhance website loading speed:
Compress and Combine Files: Compress HTML, CSS, and JavaScript files, then combine them to reduce HTTP requests.
Lazy Loading: Load content only when necessary.
Defer Loading: Load images and other media only when users scroll down the page.
Use Caching: Utilize browser caching to minimize resource loading time.
Compress Images: Use compressed image formats like JPEG to reduce file size, thereby speeding up loading times.
1. Compress and Combine Files
You can use tools and plugins (like Gulp, Grunt, Webpack, etc.) to automate the compression and combination of files.
HTML Compression Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML Compression Example</title> </head> <body> <h1>This is a heading</h1> <p>This is a piece of text</p> </body> </html>
CSS Compression Example:
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: #333;
font-size: 28px;
}
p {
color: #666;
font-size: 18px;
}JavaScript Compression Example:
(function() {
var message = "Hello World!";
console.log(message);
}());2. Lazy Loading
Lazy loading can be implemented using JavaScript.
<img data-src="image.jpg" alt="Image">
<script>
// Execute the script only after the page has fully loaded
window.onload = function() {
// Get all image tags
var images = document.querySelectorAll('img[data-src]');
// Iterate through the image tags
Array.prototype.forEach.call(images, function(image) {
// Set the src attribute
image.setAttribute('src', image.getAttribute('data-src'));
});
};
</script>3. Defer Loading
Defer loading can be implemented using JavaScript and plugins. Here, we use the jQuery plugin for lazy loading.
<img data-src="image.jpg" alt="Image">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script>
$(function() {
$("img").lazyload({
effect: "fadeIn",
threshold: 200
});
});
</script>4. Use Caching
You can use HTTP caching to cache resources and reduce loading times.
Server-Side Cache Settings Example:
<?php
$expires = 60 * 60 * 24 * 30; // 30 days
header("Cache-Control: max-age={$expires}, public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $expires) . " GMT");
?>Client-Side Cache Settings Example:
<img src="image.jpg" alt="Image" width="300" height="200" />
<script>
if ('caches' in window && 'fetch' in window) { // Check if cache and fetch API are supported
caches.match('image.jpg').then(function(response) {
if (response) { // Load image from cache
var img = document.querySelector('img');
img.src = response.url;
} else { // Fetch the image and cache it
fetch('image.jpg').then(function(response) {
return caches.open('my-cache-name').then(function(cache) {
cache.put('image.jpg', response.clone());
var img = document.querySelector('img');
img.src = response.url;
});
});
}
});
}
</script>5. Compress Images
You can use tools and online services to compress images, such as TinyPNG, Kraken, etc.
<img src="image.jpg" alt="Image" width="300" height="200" />
