It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

I am Harry Roberts. Ask me anything.


What are a few of the simple, yet not very well known “front-end performance” tricks?

I love this question! I’m gonna focus on simple.

  1. Simply move your CSS’ link elements to as close to the top of the HTML document as you can. Seriously, it can make a difference. I did an audit for a company once and their CSS was linked on like line 81 of their HTML; this meant that touch icons, Facebook/Twitter card images, plugins’ JS, etc. were all being requested before their render-blocking CSS was. By moving the CSS up to line ~5 we managed to improve render time by a good half second.
  2. Don’t put scripts at the bottom any more: make use of async and defer attributes
  3. Make use of resource hints[1] to tell the browser to prioritise things out of regular order (or for subsequent navigation).

All of these are one-line (or less) fixes.


Reply to this…

(31 questions) Take me to the AMA