Optimizing web performance is a crucial aspect for building success-full and user-friendly websites. In today's world with fast growing digital pace, user wants a quick loading website as they result in low conversion and frustrated users. Users expect websites to load quickly and provide fast and smooth browsing experience. Web performance optimization is basically increasing the performance of a website. This work presents an overview of key strategies and techniques to enhance web performance. Strategies like optimizing codes and scripts, compressing images etc. Website loading, minification, web caching and con-tent delivery networks are techniques to improve web page performance. Using web diagnostics tools like Google Page speed Insight and GTmatrix, developers can analyze the performance of websites. The analysis of website performance offers valuable insights and actionable recommendations to enhance its overall user experience. In current work considering certain aspects that includes: Is it happening? Is it useful? Is it usable? Is it delightful? authors compared two websites (Flip-kart.com and meesho.com), the performance score is calculated by considering metrices which include the speed index, total blocking time, cumulative layout shift etc. the performance score and the time index help us know which is a better website. The LCP for Flipkart is 1.5ms and is better than meesho.com. Out of all the parameters for Flipkart.com TBT (Total Blocking Time) is very high 680 ms, which indicates that for so long a user cannot interact with the website. Comparing two websites using different diagnostic tools it is being analyzed that user experience for www.flipkart is found better than www.meesho.com..
Optimizing web performance involves a range of techniques and strategies aimed at
improving the speed, efficiency, and overall user experience of a website. By reducing page
load times, enhancing responsiveness, and minimizing network latency, web performance
optimization aims to create fast and reliable web experiences. Web page optimization is
used for several reasons like improving user experience, increasing conversation rates,
accessibility, and competitive advantage [
Improving page load times is key for providing a positive user experience. There are various strategies to achieve faster page load times: • Compress image- large images files can significantly slow down page load times. We can optimize images by reducing file sizes without even giving up its quality. • Optimize Code and scripts - Writing efficient and optimized codes can enhance page load times. Remove unnecessary code, place scripts at bottom of your web pages to prevent them from delaying page rendering. • Minimize HTTP requests- Reduce number of hypertext transfer protocol requests by combining CSS files into single file. •
Prioritize above-the -fold Content- The prioritization of above the fold content can be
achieved by optimizing the order of resource loading and using deferred loading techniques
for non-essential elements.
• Monitor and analyze performance- One can continuously monitor website performance
using tools like Google page speed insights or WebPageTest. These tools provide insights on
how to further optimize your page load times.
• Each website is unique, so it’s important to analyze specific situations and implement
strategies that best suit the needs [
ii. iii. iv.
Website loading speed- This refers to the time taken by a web page to fully load and display
its content in web browser, it is a critical factor that significantly impacts a website
performance. Fast loading speeds are essential because users expect quick access to
information. Factors that influence website loading speed include Server Performance,
Network and connection speed, File size and compression [
Minification- Minification is the process of reducing the size of computer programs source
code without changing its functionality. The minification process typically involves
removing unnecessary characters from the source code [
Responsive Designs- The goal of the responsive design approach to web development is to
build websites that can adjust and respond to various screen sizes and devices. Responsive
design, which primarily strives to enhance user exprience and make websites aesthetically
appealing across devices. Less versions are required thanks to responsive design, which
does away with the necessity for separate mobile-specific websites or several iterations of
the same website. As opposed to this, a single responsive website may modify its design
and content to accommodate different screen sizes and devices. Consolidation streamlines
development and boosts speed by reducing the complexity and maintenance work
required to maintain numerous versions of the website [
Image Optimization- Enhancing site performance through image optimization is essential.
Frequently, photographs make up the bulk of the file size of a webpage, and poorly
optimized graphics can dramatically slow down the page. To optimize image techniques
like Compression, Resizing, Format selection, Image sprites can be used [
Use tools like Google PageSpeed Insights, Lighthouse, or WebPageTest to continuously check the performance of your website. Check performance indicators like rendering speed, time to first byte (TTFB), and page load time often. You may spot performance bottlenecks and potential improvement areas with the use of monitoring.
Regular testing and improvement Check out your website on various platforms, browsers, and networks. Through user testing and analytics, pinpoint performance and usability concerns. Based on the comments and new information, continually improve and tweak your website. Remove unnecessary Plugins and Scripts: Evaluate and remove any unnecessary plugins, scripts, or tracking codes that can introduce additional overhead and negatively impact performance. Keep in mind that improving web performance is a continuous endeavor. To maintain a quick and easy user experience, regularly examine and optimize your website based on performance indica-tors, user feedback, and developing technologies [16][17].
These tools help us give valuable insights into the performance of a web-site, by using the results you can enhance your website
Below are the steps to use Google PageSpeed insights for analysing the performance of any weblink. In this case just for study we are evaluating performance of a web platform [19]. Figure 1 Represents the metrices used to check website performance.
Stepsi. go to Google Page Speed insights website.
ii. enter the URL of website you want to test. click “analyze” and wait for the analysis LCP – This reports the time of the largest image or text block visible when the page starts to load. LCP count less than 2.5 s is good.
FID- (First input delay) – this measures the time when the user first interacts with the page. FCP-(First contentful paint) - this measures the time when page starts loading till the time any part of page’s content is rendered on screen.
INP- (Interaction to Next Paint) – this assesses a page’s overall response to user interactions by observing the latency of all clicks as shown in figure.1.
TTFB- (4Time to First Byte)- TTFB is a measure duration of HTTP request to the first byte of the page being received by the client's browser [18].
Reduce initial server response- The first step towards better server response times is to define the fundamental conceptual activities that your server must execute in order to provide page content, and then time each of these processes. Once you've discovered the time-consuming tasks, look for methods to shorten them. There are several causes of sluggish server answers, and hence numerous approaches to improve: i. Optimize the application logic on the server to prepare pages quicker. If you utilize a server framework, the framework may provide suggestions on how to accomplish this. ii. Optimize your server's database queries, or switch to speedier database solutions. iii. iv.
Increase the RAM or CPU on your server hardware. To decrease network latency, use a CDN (content delivery network). This works especially well if the page can be cached at the CDN edge node.
Avoid enormous network payloads. Avoid an excessive DOM size -A huge DOM tree frequently has numerous nodes that are not visible when the user first opens the website, increasing data costs for your users and slowing download time. The browser must continually recompute the location and style of nodes when users and scripts interact with your website. A big DOM tree combined with complex style rules can significantly slow down rendering. If your JavaScript employs generic query selectors like document.querySelectorAll('li'), you may be accidentally keeping references to a huge number of nodes, which can overflow the memory capabilities of your users' devices.
Comparing the performance and accessibility of two shopping websites using Google Page speed Insights. First, we will test performance and accessibility of a shopping website https://www.meesho.com/.The results are as follows Figure 2
Out of all the parameter’s Total Blocking Time is very high in Figure 2. TBT is 680 ms which indicates that for so long a user cannot interact with the website. The main thread of the page we remain block for such duration. Cumulative layout shift that measures the user experience on website needs improvement. The cumulative layout shift for the site is (>.1), and it needs improvement.
The overall performance of site come out to be 68, as in Figure 3. The Performance is calculated using Lighthouse scoring calculator. Lighthouse performance scoring works by combining 6 different web performance metrics. Figure 4 show the weightage of each metric in calculation of performance. Total Blocking Time and Largest Contentful Paint account for almost half of the performance score. The overall composition has changed over time, but the table below shows the breakdown as of Lighthouse 9.6 (Jan 2023). Total Blocking Time and Largest Contentful Paint account for almost half of the performance score.
Now we will test the performance and accessibility of the second shopping website https://www.flipkart.com/. The results are in Figure. 5
As shown in Figure 5, Total Blocking time is 180ms for www.flipkart.com, breakdown of the score can be analyzed to check the area where performance can be improved. The overall performance of site come out to be 64, as in Figure 6. The Performance is calculated using Lighthouse scoring calculator. Hence using the tool Google Page speed Insights, we can easily compare two websites. Figure 6, show performance score and the first page which is seen when the www.flipkart.com is completely loaded tree map of site By the following analysis of two websites we can say that the performance score of the website flipkart is better than meesho Table 1. By comparing the first contentful paint or the time at which first image or text is painted of both websites we observe that the time taken by the first website is less than that of second one. Similarly, there is a difference in speed index of both the websites. These aspects help us know about the performance of a website.
GTmetrix is a tool to check the performance of web sites. It will analyze a site’s load time, size, and requests happening, and suggest corrective measures to improve the web performance. This tool can be used by businesses and developers to measure site’s performance and look for room for improvement. Comparing two performance score for both sites www.flipkart.com and www. meesho.com it is being analyzed that user experience for www. Flipkart.com is better than for www.meesho.com. Figure, 7 and 8
Server-side constraints: Your server infrastructure's capabilities and constraints may have an impact on the performance of your website. The entire page load times can be affected by elements including server response times, server processing power, and database performance. In such circumstances, performance may need to be improved by server-side optimizations or an increase of resources.
Network and latency: External variables, such as the user's network connection, location, and network congestion, can have an impact on how well a web page performs. Even if your website is optimized, slow or unstable network connections can cause greater latency and longer load times. Your web page has to be designed to smoothly manage changing network circumstances. Constraints on time and resources: Web development projects frequently face these limitations, and performance optimization may not always be the first priority. Within these limitations, it may be difficult to strike a balance between performance, design, and utility.When enhancing the speed of a web page, it's critical to recognize these constraints and make wise choices. Consider the particular environment and project restrictions when deciding which optimizations to prioritize based on their influence on your target audience. Maintaining and improving web page speed over time requires regular testing, monitoring, and iterative changes
In conclusion, optimizing web performance requires a holistic approach that encompasses including caching, compression, image optimization, code minification and etc. Developers may construct high performing websites that provide amazing user experience by adopting such techniques and tactics. It is critical for academics, developers, and webmasters to keep current on the newest trends and developing technologies in online performance optimization. Continuous research and implementation of best practices will help the continued development of web performance and user happiness in the digital world. By considering different aspects of website optimization, work compared two websites (Flipkart.com and meesho.com), the performance score is calculated by considering metrices which include the speed index, total blocking time, cumulative layout shift etc. the performance score and the time index help us know which is a better website. The LCP for Flipkart is 1.5ms and is better than meesho.com. Out of all the parameters for Flipkart.com TBT (Total Blocking Time) is very high 680 ms, which indicates that for so long a user cannot interact with the website.
Optimizing web performance is a crucial aspect for building success-full and user-friendly websites. In today’s world with fast growing digital pace, user wants a quick loading website as they result in low conversion and frustrated users. Users expect websites to load quickly and provide fast and smooth browsing experience. Web performance optimization is basically increasing the performance of a website. This work presents an overview of key strategies and techniques to enhance web performance. Strategies like optimizing codes and scripts, compressing images etc. Website loading, minification, web caching and con-tent delivery networks are techniques to improve web page performance. Using web diagnostics tools like Google Page speed Insight and GTmatrix, developers can analyze the performance of websites. The analysis of website performance offers valuable insights and actionable recommendations to enhance its overall user experience. In current work considering certain aspects that includes: Is it happening? Is it useful? Is it usable? Is it delightful? authors compared two websites (Flipkart.com and meesho.com), the performance score is calculated by considering metrices which include the speed index, total blocking time, cumulative layout shift etc. the performance score and the time index help us know which is a better website. The LCP for Flipkart is 1.5ms and is better than meesho.com. Out of all the parameters for Flipkart.com TBT (Total Blocking Time) is very high 680 ms, which indicates that for so long a user cannot interact with the website. Comparing two websites using different diagnostic tools it is being analyzed that user experience for www.flipkart is found better than www.meesho.com. [14] Butkiewicz, M., Wang, D., Wu, Z., Madhyastha, H. V., & Sekar, V. (2015, May). Klotski: Reprioritizing Web Content to Improve User Experience on Mobile Devices. In NSDI (Vol. 1, No. 1, pp. 2-3). [15] Nägele, T., Hooman, J., Zigterman, R., & Brul, M. (2015). Client-side performance profiling of JavaScript for web applications (Doctoral dissertation, Master’s thesis. Radboud University Nijmegen, the Netherlands). [16] Verdú, J., & Pajuelo, A. (2016). Performance scalability analysis of javascript applications with web workers. IEEE Computer Architecture Letters, 15(2), 105-108. [17] Okamoto, S., & Kohana, M. (2011). Load distribution by using web workers for a real-time web application. International Journal of Web Information Systems, 7(4), 381-395. [18] https://web.dev/articles/user-centric-performance-metrics [19] https://www.wscubetech.com.