One of the best ways to level up your front end development career is choosing one or more areas to specialize in. Web performance can be directly tied to increases in conversion rates and revenue generated and is a great choice for front end developers looking for an area of specialty since it is so in demand.
By focusing on performance, a front-end engineer can help ensure that their projects are able to handle large amounts of traffic and provide a smooth and enjoyable user experience.
And as the web continues to evolve and new technologies emerge, front-end engineers who are experts in performance will be well-positioned to take advantage of these developments and stay ahead of the curve. They will be able to implement cutting-edge performance optimization techniques and stay up-to-date with the latest best practices in the field. This expertise can also lead to career advancement opportunities and help set a front-end engineer apart from their peers.
There's lots of information out there on web performance, but here are some tried and true docs, courses, books, libraries and tools to dive into if you ar a front end developer serious about getting into web performance.
Start here! Core Web Vitals are part of an initiative started by Google to provide high level metrics that act as quality measures of a website. They've picked metrics that represent how quickly your page is visible (First Contentful Paint), how much the layout shifts (Largest Contentful Paint, Cumulative Layout Shift), and how quickly the page is interactive (First Input Delay). These are particularly important because your scores on these metrics affect how your site ranks in Google search results.
This is a great introduction to the fundamentals of web performance: what makes a website (feel) fast or slow, how to measure performance, how to improve performance, and how to optimize specific metrics.
This a deep dive into understanding JavaScript performance. It includes a brief introduction to web performance, a deep dive into JavaScript performance, sections focused on rendering performance, load performance and tools. The rendering performance and load performance sections in particular are most relevant for front end developers looking to understand how to measure, diagnose, and improve performance on the client.
A video based course to develop, debug & performance audit your websites. Level-up your web development skills and create blazing fast experiences. Great hands-on practical guide to using dev tools to identify and fix performance issues.
A free course led by Scott Jehl that starts with the basics and assumes no prior knowledge of performance concepts.
Many front end libraries and frameworks provide the ability to generate HTML and CSS on the server to greatly speed up First Contentful Paint and then later have a "hyrdation" step where JavaScript is loaded, parsed, and the UI is made interactive. This article discusses the hydration pattern in more detail - an important concept when trying to decrease time to interactive.
Published in 2013, Ilya Grigorik's book on networking covers the foundations of how browsers work--great for becoming an expert in what's going on behind the scenes on every request to your website.
An introduction into using service workers to make your website resilient to network unreliability.
Lighthouse is an open source tool developed by Google that helps improve the quality of web pages by measuring performance, accessibility, SEO and progressive web apps. You can run Lighthouse tests from inside of Chrom DevTools, CI environments and as a node module.
Useful to see how individual metrics play into the larger lighthouse score. Shows you how each metric is weighted, how the weights have evolved over new versions of Lighthouse, and what benchmarks qualify as passing or failing.
PageSpeed Insights is a tool from Google that along with allowing you to run performance tests measuring Core Web Vitals, combines real world user experience data for users accessing your site, so you can see the real world performance data. PageSpeed Insights also can give you recommendations on where to focus your optimizations. This is a quick and easy way to run a Lighthouse test from on the web.
WebPage Test is a tool that lets your run several different kinds of tests: Core Web Vitals, Lighthouse, Visual Comparison between two pages and traceroute. You can also customize the device type, network speed, and location to match your users and get a sense of real world performance.
Calibre automates testing, reporting and alerting, so you don’t have to. You can set up automated testing of specific pages of any website, set up performance budgets to set targets and meet your goals and monitor progress over time.
Speedcurve has tools for measuring the performance of your site or app in a lab (also called Synthetic Monitoring) as well as Real User Monitoring, which collects field data from real users on your site to show how they experience the performance of your app. This lets you make targeted, strategic decisions for improving performance for your specific audience.
Webpack bundle analyzer is a tool that helps you visualize the output of your webpack config and see what actually made it into each of your JavaScript bundles.
Got other recommendations? Share them with us on twitter at @remotefrontend and we'll add them here!