Improve web performance

Why is it necessary?

In the era of low attention span, it's difficult to make any user stay on the website. What happens if your site is slow in this era? You can imagine yourself.

So fast web performance is necessary. Below are some points explained about it.

• User Experience: Faster-loading pages offer a better user experience by reducing waiting times and frustration. This leads to increased user satisfaction and engagement.

• SEO Rankings: Page speed is a factor in search engine rankings. Faster websites tend to rank higher in search results, leading to improved visibility and organic traffic.

• Conversion Rates: Faster-loading pages are associated with higher conversion rates. Users are more likely to make purchases, fill out forms, or take desired actions on fast websites.

• Bounce Rate Reduction: Slow-loading pages often result in higher bounce rates, meaning users leave after viewing only one page. Fast-loading pages encourage users to explore further, reducing bounce rates.

• Competitive Advantage: A fast website can serve as a competitive advantage in the digital landscape. Users are more likely to choose and remain on websites that provide better performance and quicker access to content.

Tips for its optimization

• Reducing image size. (lower the image size, faster the loading speed)

• Use of Lazy loading so that only the elements/components/images load when it is required.

• Use of browser cache storage so that static files that are not changing often can be saved and loaded without calling for the request to the server.

• More file size means more computing time/storage for the server. So, always reduce the code files by removing extra spaces and lines.

• Use of best hosting services so that website can be loaded over 7 continents quickly.

• Reduce redirects on site cause this adds more load on the server which degrades the performance of websites.

• Use fewer numbers of fonts and only those that are focused on optimization.

Real-life example(ReactJS)

Before optimization:

const heavyTask = (largeJSONFile)=>{
                // some heavy data computation O(n) complexity
                return data.length;
}

const Component  = ()=>{
    const [change, setChange] = useState(false);
    const result = heavyTask(largeJSONFile);

    const handleChange = () => { 
        setChange(!change);
     };

    return (
    <>
        <div>Result= {result}</div>
        <div>Change= {change ? “true”: “false”}</div>
        <button onClick={handleChange}>Change Now</button>
    </>
)
}

export default Component

• In the above example, every time the button is clicked the page re-renders again and again which involves heavy task computation every time that degrades web performance.

• Instead, we can make use of useMemo to call heavy tasks only when some dependencies change like this.

  After optimization:

const heavyTask = (largeJSONFile)=>{
                // some heavy data computation O(n) complexity
                return data.length;
}

const Component = ()=>{
    const [change, setChange] = useState(false);
    const result = useMemo(()=>{
             return heavyTask(largeJSONFile);
     }, [])        

    const handleChange = () => { 
            setChange(!change);
     };

    return (
         <>
            <div>Result= {result}</div>
            <div>Change= {change ? “true”: “false”}</div>

            <button onClick={handleChange}>Change Now</button>
        </>
            )
}
export default Component

In this way, the use of useMemo limits the call of heavy task function every time the components reload and only calls if dependencies change.

By following the above points developers can improve web performance.