It's all about the speed
There's nothing for horrifying to a user than going to a webpage and it taking forever to load. It's more important nowadays that your website is optimized for speed. There are some factors to account for and fortunately there's ways that we can monitor them.
1. Time To First Byte (TTFB)
This is the time that is takes for the web browser to receive the first byte of data from the web server. Whenever an HTTP request is made by the browser it has to establish a connection with the server. The time it takes for the server to respond with a small amount of data is called the time to first byte. The smaller the TTFB number, usually expressed in milliseconds (ms), the better. A value of 200ms is considered good, although the range of an ideal measurement is from 200 ~ 1000ms and anything over ~1000ms needs to be investigated.
2. Server Response Time
The server response time is the difference in time between the TTFB and the last byte received by the browser. The content included in this are all the images, javascript and css files. This measurement accounts for the time it also takes to download the files. As file sizes increase so does the server response time.
3. DOM Loading Time
The DOM (document object model) is the data representation of the structure of a webpage. It consists of the document, elements, nodes, a node list and attributes. The more DOM elements that a page has, the longer it is going to take for the browser to parse it.
- Reduce your DOM size by removing nested and unneeded document elements and nodes.
4. First Contentful Paint
First contentful paint is the time it takes for the browser to display the first available text, image, button or field on the page.
5. Time to Interactive
TTI is the time it takes for the resources to load in the browser and be able to respond to an event action.
Things you can do to improve TTI:
- minify your javascript files
- reduce the size of your javascript files and execution time
- avoid long request chains
6. Largest Contentful Paint
This is the time it takes for the largest piece of content on the page to load on the page. This is most likely an image or a video or even a very large piece of text. An ideal time for this metric is from 2 - 4 seconds. Any more than 4 seconds and it's time for some improvements to be made.
7. Cumulative Layout Shift
A layout shift is simply when an element on a page moves. You will see this when a user message that pops up. When this happens, it shifts the contents down. It's often unexpected to the user and also quite annoying. The cumulative layout shift is the sum of all the layout shift scores.
If you want to learn more and take advantage of what Lighthouse has to offer check out their GitHub page: Lighthouse
If you just want to run some of your own tests Lighthouse Web App
