- Miscellaneous
- Audits
- HTTP optimisation
- Caching
- Minification
- Perceived Performance
- Performance
- Backend optimisation
- Tip: Different profile / user in Chrome without extensions
- Use the proper
lang. It’s currentlylang=en-US. - Add some more points here...
- Add some more points here...
- The optimalisation 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 visaul progress area.
- Add some more points here...
- Add some more points here...
- All files are being loaded by a HTTP1 request. This is not a big problem unless you are loading a lot of files separately. In the website there are a lot of css and js files being loaded. HTTP1 can only request a maximum of request at one time. This means this procces will take a lot longer.
- Add support for HTTP/2.
To do this you will need
ALPN. To get support for this you will need to check your version of apache/nginx and OpenSSL. - Add some more points here...
- Enable HTTP2
- Add some more points here...
- Specify an expiration at least one week in the future for resources
- Leverage browser caching.
- Add some more points here...
- Minify CSS, HTML and JavaScript
- Main HTML and CSS file should be minified. HTML has multiple line white-spaces and the CSS file is over 20000 lines long with white-space between every tag declaration
- Minify CSS
- Minify Javascript
- To use inline images for the hero image instead of a background image.
This way you can add more options such as file type (for
.jpg,.pngor.webp) or file size (for the image width or image density) when using something like<picture>or thesrcseton the<img>tag. - Change image extensions(web-p or JPEG XR)
- Change image file sizes
- Add some more points here...
- Optimise file-size of images
- Use (inline)
svgwhen possible. - Compress images
- Optimise image sizes
- Add some more points here...
- Make CSS files smaller
- Add some more points here...
- Add some more points here...
- Make all scripts tags in
<head>async so they don’t block the rendering of the DOM - Load scripts that are not used immediately, later
- Minify the Javascript: You could do this manually by going to js compress but you could use Gulp or any taskworker that can use UglifyJS. Minification removes unnecessary data and unnecessary spaces and misc. To improve the loadspeed and a small decrease in size.
- Parse JavaScript using Defer.
- Add some more points here...
- Make subsets of icon fonts
- Add a fallback font
- Add some more points here...
- Use a placeholder for the background image(blurred/loading like) to indicate that here is and should be an image at that position
- Add some more points here...
- Because this website is also focused on international student it's recommended to use a CDN. The load-time will decrease for users outside the NL — Source: CDN-REPORT
- Add some more points here...
- 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.
- Serve images as WebP. If they are encoded that way they will load much faster. WebP image formats have superior compression compared to JPG and JPEG.
- Compress main images
- Client hints
- Picture tag
- Images are not being serverd by WebP. This means all images that are being loaded on the website take up to 10.510 seconds (total of 1.8MB).
- Compress images
- Compress images
- Add some more points here...
- Remove unused CSS files
- Add some more points here...
- Add some more points here...
- Load JavaScript and CSS later so they don’t block rendering
- Combine javascript files > less server requests. Also, move script links in HTML head to bottom of document
- Add defer and async to all Javascript imports where the Jasavscript is not necesarry to render above-the-fold content
- Make use of
<script src="index-6a14b2.js" defer></script>to load your javascript after the DOM has been rendered. Load early, execute after the DOM is ready. You could do this conditionally via @filamentgroup
- Add some more points here...
- Content isn't being loaded because of the font. It takes a long time. After 29 seconds. You could use
font-display: swap;. But on CanIUse.com it's not really that supported. Best way todo this is probably store your font in the cookies. You load the fallback in first and when you stored the font in the Cookies you just swap the font to the main font. This is what this doesfont-display: swap;but the latter way is more supported.
- Add some more points here...
- There are multiple things being loaded and not used. Alot of the Woocommerce scripts are being loaded and it takes priority for some reason. But it isn't used. Google page speeds the examples are a cart.js alot of css etc.