I Love ReactJS

Front-end performance optimization: 5 tips for improving website loading speed

Aaron

how to optimize the performance of web pages? For front-end performance optimization, here are five tips for improving website loading speed:

  1. compress and merge files: compress HTML, CSS, JavaScript, and then merge them to reduce HTTP requests.
  2. Latency loading: loads content only when needed.
  3. lazy loading: images and other media are loaded only when the user scrolls the page.
  4. use caching: use browser caching to reduce resource loading time.
  5. compressed images: use compressed image formats, such as JPEG, to reduce file size and speed up loading.

1. Compress and merge files

you can use tools and plug-ins (such as Gulp, Grunt, Webpack, and so on) to automatically compress and merge files.

HTML compression: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML compression exampl</title>
</head>
<body>
    <h1>This is the title.</h1>
    <p>This is a passage.</p>
</body>
</html>

CSS compression: 

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: 

(function() {
    var message = "Hello World!";
    console.log(message);
}());

2. Delayed loading

delayed loading can be achieved using JavaScript. 

<img data-src="image.jpg" alt="Picture">
<script>
    // wait for the page to be fully loaded before executing the script
    window.onload = function() {
        // get all picture tags
        var images = document.querySelectorAll('img[data-src]');
        // traversing the picture tag
        Array.prototype.forEach.call(images, function(image) {
            // modify src
            image.setAttribute('src', image.getAttribute('data-src'));
        });
    };
</script>

3. Lazy load

lazy loading can be implemented using JavaScript and plug-ins. Here we use the jQuery plug-in to implement lazy loading. 

<img data-src="image.jpg" alt="Picture">
<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 to reduce load time.

Server-side setting cache: 

<?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 setting cache: 

<img src="image.jpg" alt="Picture" width="300" height="200" />
<script>
    if ('caches' in window && 'fetch' in window) { // determine whether caching and fetch API are supported
        caches.match('image.jpg').then(function(response) {
            if (response) { // load pictures from cache
                var img = document.querySelector('img');
                img.src = response.url;
            } else { // request the picture 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. Compressed image

you can use tools and online sites to compress images, such as TinyPNG, Kraken, and so on. 

<img src="image.jpg" alt="Picture" width="300" height="200" />
Exit mobile version