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.
Resources for getting started
Core web vitals | web.dev
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.
Courses
Web Performance Fundamentals
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.
JavaScript Performance
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.
Modern Dev Tools
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.
Lightning-Fast Web Performance
A free course led by Scott Jehl that starts with the basics and assumes no prior knowledge of performance concepts.
Advanced Topics
Progressive Hydration
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.
Books
High Performance Browser Networking: What every web developer should know about networking and web performance
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.
Going offline
An introduction into using service workers to make your website resilient to network unreliability.
Tools
Lighthouse
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.
Lighthouse scoring calculator
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
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
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
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
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.
Popular libraries
Webpack Bundle Analyzer
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.
Other Resources
Got other recommendations? Share them with us on twitter at @remotefrontend and we'll add them here!
Oldest comments (0)