- Miscellaneous
- Audits
- HTTP optimisation
- Caching
- Minification
- Perceived Performance
- Performance
- Backend optimisation
- Tip: Different profile / user in Chrome without extensions
- Use the proper
lang - Use a CDN
- Try to avoid redirects, these can impose high latency overhead
- The optimisation of the visual progress is terrible The website does not show any content till every content is loaded This problem leads up to a huge visual progress area
- Don’t include many (small) files: HTTP/1 can only deal with 6-8 files at a time
- Enable HTTP2 HTTP/2 is an new protocol that is introduced to increase the performance, specifically, end-user perceived latency, network and server resource usage. One major advantage is to allow the use of a single connection from browsers to a Web site.
- Make sure that all non-HTML files have a caching parameter specified more info
- Specify an expiration at least one week in the future for resources
- Compress images (such as with PageSpeed Image Optimizer or the techniques described by Google)
- Images with little detail and small colour pallet, are smaller with png format instead of jpg. If possible, use svg.
- Minify CSS
- Minify HTML
- Minify the JavaScript: either manually through
jscompress,minifier.org, or with something UglifyJS, potentially through Gulp
- Add a fallback font
- Use font subsetting
- Use a placeholder for background images (blurred/loading like) to indicate that here is and should be an image at that position
- Use newer image types (
.webp;.jxrjpg -> jxr) - Use inline images for the hero image instead of a background image
- Add
srcsets andsizes - Use
<picture>s - Use (inline)
svgwhen possible - Serve images in a proper size This will improve load time and save cellular data If you provide images larger than the user needs, you are just wasting bytes
- Use client hints
- SVG's are smaller but they do not render always faster than other formats. Especially when they are very complex. Render speed is also included with the load time of content.
- Add inline critical CSS (see Authoring Critical Above-the-Fold CSS)
- Remove unused CSS files
- Remove unused selectors (see unused-css)
- Reduce render-blocking stylesheets if it isn’t critical (such as with
loadCSS)
- Remove inline styles
- Use a minimal amount of classes
- Concatenate JavaScript files
- Load JavaScript and CSS later so they don’t block rendering
- Move script links in
<head>to bottom of document or adddeferandasyncif they are not necessary to render above-the-fold content - Remove jQuery
- Add small, single purpose scripts inline
- Use something like
font-display: swap
- Remove
overflow: hidden;from animating elements and their parent container asoverflow: hiddenmakes all children trigger Layout - Look out for Paint and Layout triggering effects
- Use
transform,clipandopacityfor high performing animations CSS Triggers - In JavaScript use
requestAnimationFrameinstead ofsetIntervalfor higher performance (MDN rAF) - Use
will-changewisely (MDN will-change)
- If you’re using templates (such as in wordpress), make sure they don’t include things you aren’t using