How to answer on performance optimisation 🚀 question in a frontend interview?

I personally involved in conducting and appearing in React Frontend Interview many times in recent years.

I observed that most of the time interviewer should ask about sharing your experience on performance optimisation.

Majority of time people do mistake in just saying about the code based performance optimisation but which is not the only thing that interviewer is expecting from you as they are looking for your overall experience as a web developer.

Consider this as system design round question and answer as much as you know as a web developer not a react or framework developer.

I'll attempt to give you the best possible response based on my expertise so you can respond. if this has been questioned of you. I assure you that if you deliver the following response, your interviewer will perceive you as a genuine contender 🎯 for front-end or web development.

We should break down this answer in 6 segments

• 👨🏻‍💻 Code performance optimisation
• 🌎 N/W /API layer performance optimisation
• 🌐⛁ Caching / CDN
• 🗄️ Server optimisation
• 🛠️ Tool to be used
• 📊 Metrics to be followed

Code performance optimisation

• Here We can discuss on the coding techniques which can improve performance.

for eg: hooks like useCallback , useMemo , React.memo which can provide good caching mechanism but on the other side we have to make sure that we should not use it everywhere. because it can start impacting performance negatively.

• Techniques like React.Lazy and suspense can definitely improve the performance by reducing the size of main chunk. which will

• lazy loading of the images in web page will helps the HTML to load faster on the browser.

• pagination can also reduce the page size which can increase the performance.

• use of webpack/vite bundle analyser which can useful for identifying a heavy JS files. so that you can reduce the file size on initial load. more details

---

N/W / API layer performance optimisation

Whenever you navigate through the code during those time you can identify

• which API is costly / heavy ie. response is more than 9 -10 MB. That API needs to be consider for optimisation.
• Which API is slow where you can add caching on server like redis or memcached to get the response quicker.

For eg: your product API response it too big that it is delaying loading of product that is unacceptable during which you can try to reduce the response size by having a pagination or lazy loading of the images. [Dummy API response has been provided below 👇]

• having a product_id is enough to mark product as favourite in favourites API rather than sending entire product data with all the properties. This is how we can reduce the response size

• GraphQL could be a good alternative to adjust the response size whenever and wherever it is needed.

---

Caching using CDN

• Majority of the time as a frontend developer we are serving a assets like CSS, images , audio or video to the website pages which is increasing HTML page size and increase network time to retrieve the assets from the server.
• Rather than getting assets directly from server it is always beneficial to retrieve the assets via CDN [content distribution network] which can be provided by AWS , GCP and many other players in market.

---

Server level optimisation

• React renders the pages on client side ie. on browser using the client machine resources like CPU , processor , network etc. for the desktop users this may not be more problematic but imagine for the mobile users which has less computation resources or low network connectivity in the devices so to increase the performance of the webpage we can use Server side rendering where major computation like fetching a data , creating HTML page etc. will be done on server side so that browser do not have to wait for the JS file to get loaded first and then HTML can render.
• other techniques like database optimisation and Applying ASG [Auto scaling group] policy on servers using load balancer during the peek hours to distribute the load on servers that can increase web performance

---

Tools can be used

• lighthouse
• Sitespeed
• Pagespeed insights
• Webpage test

Above tools can generate report on which you can act to enhance performance score of your website.

Please make sure you should not miss out the point as each point has its own weightage to highlight your experience.

---

📊 Metrics to be followed

• FCP = First contentful paint
• LCP = Largest Contentful paint
• CLS = Cumulative layout shift

Please specify that LCP, CLS and TBT are heavy weightage so we should target that metrics first to eliminate performance bottleneck from site.

Largest Contentful Paint 25%
Total Blocking Time 30%
Cumulative Layout Shift 25%

---

sample product response

[
    {
        "id": 141637678,
        "url": "https://www.olx.bg/d/ad/iphone-15-pro-128gb-blue-CID632-ID9AiqG.html",
        "title": "iPhone 15 Pro 128GB blue",
        "last_refresh_time": "2024-10-19T15:44:39+03:00",
        "created_time": "2024-10-15T15:39:02+03:00",
        "valid_to_time": "2024-11-14T14:39:03+02:00",
        "pushup_time": "2024-10-19T15:44:39+03:00",
        "omnibus_pushup_time": "2024-10-19T15:44:39+03:00",
        "description": "",
        "promotion": {
            "highlighted": true,
            "urgent": false,
            "top_ad": true,
            "options": [
                "bundle_optimum"
            ],
            "b2c_ad_page": false,
            "premium_ad_page": false
        },
        "params": [
            {
                "key": "price",           
                "value": {
                    "value": 1000,                    
                }
            },
        ],
        "key_params": [],
        "business": false,
        "user": {
        },
        "status": "active",
        "contact": {},
        "map": {
            "zoom": 10,
            "lat": 41.98494,
            "lon": 28.02986,
            "radius": 1,
            "show_detailed": false
        },
        "location": {
            "city": {
                "id": 7955,
            },
            "region": {
                "id": 2,
            }
        },
        "photos": [
            {
                "id": 1048297740,
                "filename": "6gyi0w28mku2-BG",
                "rotation": 0,
                "width": 750,
                "height": 1000,
                "link": ""
            },
        ],
        "partner": null,
        "category": {
            "id": 454,
            "type": "electronics"
        },
        "delivery": {},
        "safedeal": {},
        "shop": {
            "subdomain": null
        },
        "offer_type": "offer"
    }
];