Repo for the ATX Web Performance Meetup where we'll attempt to make a slow website fast on the fly. Here's the event page.
- Navigate to part-1 directory from the command line.
- Run
npm installto install the Node.js dependencies - Run
node server.jsto start the server. - Navigate to http://localhost:3000/ in your web browser.
- Lighthouse tested via incognito Chrome
- Simulated 4G slowdown
- Mobile
-
srcset - Image lazy loading
- Fallback UIs for images (same-aspect-ratio gray boxes)
- Improving time to first byte
- Moving JS out of the page
<head> - Removing excess DOM nodes
-
asyncordeferon scripts - Lazy loading iframes with
loading="lazy" - Using
font-display - Minification and concatenation
- Avoiding full libraries like lodash/moment/etc.
- Compression
- Minification
- HTTP2
- Optimize database queries, long tasks, etc.
- Caching
- CDN
- Server Hardware
- Code splitting
- Move scripts to bottom of page, or use
async/defer - Use performance tab of Chrome DevTools to optimize long tasks
- Make API calls lazily using
IntersectionObserver - Use ES6 modules to take advantage of tree-shaking
- Avoid using entire utility libraries like Moment or Lodash (just pull out the functions you need)
- Minification and concatenation
- Inline critical CSS
- Use code splitting to only load the styles needed for the current route
- Minification and concatenation
Here's a good read on all the different font-loading strategies. For now, we'll use Google Fonts as it's quite popular and easy to set up.
- Ensure you're using WOFF2 (or least WOFF)
- Ensure you're only loading the weights, styles and languages you need
- Use
font-displayproperties to help your visually complete score - Bonus: Use a JS library like Web Font Loader to make font-loading non-render blocking
- Bonus: Use variable fonts
We'll start with a few large stock photos from this website.
- Ensure they're compressed as much as possible
- Use
srcsetto provide multiple size options - Provide a same-aspect-ratio placeholder to prevent page reflow (see padding-bottom hack)
- Lazy load them, maybe with this library
- Bonus: Use WebP format
Here's an example of using the padding-bottom hack to create a placeholder to prevent reflow.
figure {
background-color: #DCDCDC;
margin: 50px 0;
position: relative;
padding-top: 66.67%;
}
figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}- Use
loading="lazy"on things like images, videos and<iframe>s(check browser support tables) - Take advantage of preconnecting, preloading and prefetching