Continuous Front End Website Performance Testing

User-Centric Website Performance Monitoring in a Continuous Workflow

Adam Henson
Jun 19, 2019 · 4 min read

Website performance should be analyzed from a “user-centric” perspective. Users typically look for visual feedback to reassure them everything is working as expected, otherwise they bail. In the past we viewed website performance from a pinhole. User experience design and development is vastly different nowadays as we accommodate a variety of devices and network conditions.

Load times vary dramatically from user to user, depending on their device capabilities and network conditions. Traditional performance metrics like load time or DOMContentLoaded time are extremely unreliable since when they occur may or may not correspond to when the user thinks the app is loaded.

Website Performance Metrics

The metrics below represent important points of the page load life cycle. Each answers questions about user experience.

  • First Contentful Paint: Is it happening? Did the navigation start successfully? Has the server responded?
  • First Meaningful Paint: Is it useful? Has enough content rendered that users can engage with it?
  • Time to Interactive: Is it usable? Can users interact with the page, or is it still busy loading?
  • Long Tasks (absence of): Is it delightful? Are the interactions smooth and natural, free of lag and jank?

is a tool used manually or programmatically to provide these type of user-centric metrics. Each metric is described elaborately in the Lighthouse documentation — take for example.

The Front End

That’s right front end engineers — your job just became even more difficult. Many performance metrics are impacted by the way we construct the DOM, optimize, bundle, and load resources.

Thanks?

Below are just a couple important examples we should consider as front end engineers. Lighthouse and its documentation of these metrics can provide a more comprehensive overview.

Imagery and Video

Lazy loading aside, we can improve website performance by simply optimizing and reformatting imagery. In my experience this culprit has shown the largest impact on websites suffering from poor performance. Consider .

Another heavy hitting impact can come from the way we load large resources like images and video. When possible lazy loading can be quite effective. Read .

Bundling JavaScript and CSS

Another major culprit I’ve seen as the cause of poor performance in many websites roots in the way assets are bundled and loaded. I’ve found the technique of bundling assets in smaller chunks to be quite effective in improving performance. If you can swing it, loading critical resources on page load while loading non-critical resources on demand can make a tremendous difference. By using modern build tools like for example, we can accomplish this with techniques such as and .

Website Performance Monitoring

By using , for example — you can performance test your website automatically over time. It provides a timeline view of important metrics like “First Meaningful Paint”, “First CPU Idle”, “First Contentful Paint”, “Speed Index”, “Time to Interactive”, and “Estimated Input Latency”. Below in the Twitter example — you can see how beneficial it could be to correlate a performance drift to a specific time and day. In this example we see Time to Interactive and First CPU Idle spike up in milliseconds (which is bad) around April 22nd at 10am.

Twitter Performance Drift

You can see . Adding pages to monitor performance is easy. See .

Monitoring Website Performance Automatically in a Continuous Workflow

Example Continuous Delivery Diagram from circleci

Using tools like Jenkins, circleci, or others, combined with Automated Lighthouse Check — you can add a post-deploy step in your pipeline to automatically test performance. Automated Lighthouse Check will trigger a performance audit, save it with a tag (typically a build number), and make it available to view in the timeline chart among any other performance tests triggered manually, automatically, or from a post-deploy step (an API call). To establish this performance regression testing step you would simply add a request to the Automated Lighthouse Check public API. For instructions on how to do this, you can .

Conclusion

Website performance has gained more importance in modern web development. Considering the diverse ways users view and interact with websites — we need to look at website performance from a user-centric perspective.

HackerNoon.com

how hackers start their afternoons.

Adam Henson

Written by

Software engineer in NYC

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade