This is a thread with all links from my today’s HolyJS talk:

1) https://wpostats.com  — lots of case studies about web performance benefits

2) CDNs:
— Cloudflare: https://www.cloudflare.com 
— Fastly: https://www.fastly.com 
& a catalog of CDNs: https://www.cdnplanet.com 

3) Edge functions:
— Cloudflare Workers: https://workers.cloudflare.com 
— Lambda@Edge: https://aws.amazon.com/lambda/edge/ 
— Netlify functions: https://www.netlify.com/products/functions/

4) Code splitting:
— Google’s guide: https://web.dev/reduce-javascript-payloads-with-code-splitting/
— Webpack’s guide: https://webpack.js.org/guides/code-splitting/

5) Auditing the bundle:
— How to find & fix bundle duplicates (my thread): https://twitter.com/iamakulov/status/1262391881364897796
— Webpack bundle analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer

6) Critical CSS:
— Intro in Web Perf 101: https://3perf.com/talks/web-perf-101/#css-critical-1
— Tools:
critical → https://github.com/addyosmani/critical
critters → https://github.com/GoogleChromeLabs/critters
styled-components → https://github.com/styled-components/styled-components

7) Dropping React from the client:
— ReactDOMServer.renderToStaticMarkup(): https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
— gatsby-plugin-no-javascript: https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/
— gatsby-plugin-no-javascript-utils: https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript-utils/
— My experience: https://twitter.com/iamakulov/status/1244762505685225472 https://twitter.com/iamakulov/status/1244762508059193348

8) Preact:
— Differences from React: https://preactjs.com/guide/v10/differences-to-react
— Switching to Preact: https://preactjs.com/guide/v10/switching-to-preact

9) Typical image compression stuff:
CDNs:
— http://cloudinary.com 
— http://imgix.com 

Self-hosted:
— http://imgproxy.net 

Gatsby/Next:
— gatsby-image: https://www.gatsbyjs.com/plugins/gatsby-image/
— next/image: https://nextjs.org/docs/api-reference/next/image

Manual:
— http://Squoosh.app 

10) AVIF

Jake Archibald’s article: https://jakearchibald.com/2020/avif-has-landed/

11) Progressive JPEG

— Jeff Atwood’s 2005 intro: https://blog.codinghorror.com/progressive-image-rendering/
— Harry Roberts’ “JPEG vs web” tweet: https://twitter.com/csswizardry/status/1324440103792578562?s=21

12) Third parties

— How to talk with marketing about third parties (Harry Roberts’s talk): https://vimeo.com/302785171 
— How to optimize third parties (my thread): https://twitter.com/iamakulov/status/1313258115152912385?s=21

13) Partial hydration

— Ready-to-use libs: https://www.npmjs.com/package/@midudev/react-progressive-hydration + https://www.npmjs.com/package/@midudev/react-static-content
— Case study for Preact: https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5
— More links: https://midu.dev/holyjs-links/ 

14) Image dimensions

“Setting Height And Width On Images Is Important Again”: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/