What makes a website successful?
A good design? Having well-defined content and making it responsive? defining our goals clearly and having a better call to action and navigation? YES! But all these significant factors will reach the user only when a webpage loads quickly. Here comes performance, one of the most important factors of a website.
Performance is generally based on how fast a page loads and involves no layout shifts(jumps) in elements while loading. In real-time, a website may consist of several web pages. So each page has to be improved to improve the performance of the whole website.
Let’s look at how we improved performance in an appointment scheduling software as an example. While improving its performance we faced many challenges. By analyzing the website using different performance analyzing tools, we got to know about the opportunities for improving them. All the changes were mostly based on the opportunities suggested in the Lighthouse tool. So let me explain with the help of it.
Lighthouse is a tool, which analyzes the performance of a webpage based on three core web vitals and some important factors. Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT) which is nearly equal to First Input Delay (FID), First Contentful Paint (FCP), and Time To Interactive(TTI). They are all measured by time except for CLS.
To open lighthouse: Press Cmd + Option + C (Mac) or Ctrl + Shift + C (Windows, Linux, Chrome OS) and go to lighthouse tab. Click on the “Generate Report” button to generate the lighthouse report.
Our goal is to make everything “GREEN”. To achieve that, the following good values need to be achieved in each metric.
LCP — Time taken to load the largest content above the fold. In our case, it’s mostly a hero image.
FID — Time taken between the first interaction with the webpage and the browser response to that interaction.
CLS — Layout shifts occur while loading resources. In our case loading images and fonts caused layout shifts by moving contents.
FCP — Time taken to paint the initial content of a webpage.
How to improve?
Compressed images (<150kb) with the help of “imagemin” plugin for gif, jpeg and SVG images. And the “imageminPngquant” plugin for png images.
Used responsive and nextgen images(Webp) using <picture> tag and sources.
Lazy loaded images below hero section adding lazy=“loading” and using lozad.js.
Added aspect ratio to hero images.
Preloaded hero images.
Caching added in all images.
Improvement: Compression reduces the size of images to be downloaded, thereby easily loaded even in slow network devices. And lazy loading will help in loading only above the fold content in the initial load. And adding aspect ratio avoids sudden layout shifts while loading. Preloading will download the image before it is needed. So all these reduce LCP, FCP, CLS values contributing to performance improvement.
Compressed CSS files and used Typekit fonts.
Loaded CSS separately for each category (Industry, features, integrations, etc.).
Removed font definition from stylesheet and defined as internal CSS.
Improvement: Compression and Typekit font reduce the file size of CSS and font size respectively for easy download in slow connections. Removing unused CSS will reduce the time taken to render styles while initial load. It in turn reduces main thread work. Font changes will download only required fonts from different sources specified in font-face. So above the fold content loads quickly. It contributes to LCP, FCP, TBT and overall performance.
Removed unused scripts.
Deferred all scripts including all third-party scripts.
Improvement: Compression reduces the js file size for easy download in slow connections. Deferring is lazy loading scripts after Html and CSS are loaded since they are not needed in initial loading. So initial content will load quickly. It contributes to LCP, TTI, FCP, TBT and overall performance.
Compressed all Html files.
Improvement: Compression reduces the Html file size for easy download in slow connections.
Now, let’s look at the results before and after making improvements on a webpage.
We can clearly see that the “opportunities” mentioned in the lighthouse have been removed after making these changes.
NOTE: Performance for each page is affected by different reasons. All pages are not the same. Some pages may have more scripts or more images thereby increasing HTTP requests, some pages may have more CSS than others causing a “remove unused CSS” warning. Therefore we can’t conclude that all pages are affected by a single particular reason. Each unique page has to be addressed differently.