Frontend Performance
Comprehensive list of essential practices to optimize your frontend performance.
High priorities
Minimize number of iframes
Minified CSS – Remove comments, whitespaces etc.
CSS files are non-blocking
Inline the Critical CSS (above the fold CSS)
Avoid the embedded / inline CSS
Analyse stylesheets complexity
Compress your images / keep the image count low
Choose your image format appropriately
Minify your JavaScript
Non-Blocking JavaScript: Use async / defer
Use HTTPs on your website
Keep your page weight < 1500 KB (ideally < 500 KB)
Keep your page load time < 3 seconds
Keep the Time To First Byte < 1.3 seconds
Minimize HTTP Requests
Serve files from the same protocol
Avoid requesting unreachable files (404)
Set HTTP cache headers properly
GZIP / Brotli compression is enabled
Medium priorities
Minified HTML – Remove comments and whitespaces
Use Content Delivery Network
Prefer using vector image rather than bitmap images
Set width and height attributes on images (aspect ratio)
Avoid using Base64 images
Offscreen images are loaded lazily
Ensure to serve images that are close to your display size
Avoid multiple inline JavaScript snippets <script>
Keep your dependencies up to date
Check for performance problems in your JavaScript files
Service Workers for caching / performing heavy tasks
Cookie size should be less than 4096 bytes
Keep the cookie count less than 20
Low priorities
Pre-load URLs where possible
Concatenate CSS into a single file
Remove unused CSS
Use WOFF2 font format
Use preconnect to load your fonts faster
Keep the web font size under 300kb
Prevent Flash or Invisible Text
Keep an eye on the size of dependencies