Checklist

How to Optimize Speed?
Our Checklist Has You Covered

Measurement

  • Measure regularly and for all entry pages: see the PageSpeed.cz tester.
  • Track Web Vitals metrics for users in Google Search Console and on PageSpeed.cz.
  • Keep your Web Vitals within the recommended range: LCP < 2.5 s; INP < 200 ms; CLS < 0.1

Production files of the website

  • Minify text files (HTML, CSS, JS…) before uploading to the web.
  • If possible, host frontend files on your own domain.

Images

  • Optimize data size using tools like MozJPEG, Kraken.io, or Squoosh for one-time optimizations.
  • Send smaller image sizes to mobile devices using srcset and sizes attributes in <img>.
  • Use the efficient WebP format, and consider AVIF as well.
  • Implement lazy loading using the attribute loading=“lazy“.
  • Do not apply lazy loading to images that are the main content of the page (LCP element).
  • Always add width/height attributes to <img> tags to prevent unwanted layout shifts.

Fonts

  • Use the font-display property in CSS for fast initial rendering.
  • Reduce webfont size by subsetting.
  • Utilize variable fonts.

JavaScript

  • If possible, insert your own JS as non-blocking before the </body> HTML tag.
  • Monitor the impact of third parties on Total Blocking Time using tools like Lighthouse.

Server

  • Keep server response time (TTFB metric) under 500 ms.
  • Enable OCSP stapling to speed up the TLS authentication process.
  • Check your text file compression settings with Gzip, and consider using the newer Brotli compression.
  • Set browser caching durations (max-age) for frontend files to one year and invalidate the cache by renaming the file.

Other

  • Keep the size of DOM elements ideally under 1,500 nodes.
  • Redesigning your website? Follow our recommendations from the case study for Donoci.
Check out the detailed checklist from Smashing Magazine that we've translated for you.