1. Optimize images
By optimizing your images you can often make very large gains due to the fact that many pages mostly consist of images nowadays.
By optimizing your images you can often make very large gains due to the fact that many pages mostly consist of images nowadays. If we take a look at the statistics it becomes clear that the average, modern day webpage is at least 2.5 megabytes of which nearly 65 percent (1.6 mb) consists of images.
To optimize images and offer them in the right format, we use ImageProcessor. This is package is part of Umbraco core functionality. It allows the user to set the desired aspect ratio and dimensions for each image. The actual cropping and optimizing takes place in the background. Combined with the HTML picture element, which allows us to declare which image to use under any given circumstance, we can optimize the image shown to the device used to view the image.
"Keep the amount of necessary resources required to show the content of the page as low as possible and offer them in the most optimal ways possible."
3. Turn compression on
4. Minifying HTML
5. Use browser-caching
This poses a slight problem for CSS however. You don't want your visitors to see a page devoid of styling before it's done loading do you? Well, we found the solution to this conundrum. Manually, or with a tool like Critical Path CSS Generator, determine which styles are essential for the part of your page above the fold. This is called the critical css.
You can place this critical css, within a <style>-tag in the head of your page and then load the rest seperatly (async). This way, the user will see a fully styled page. By the time he starts scrolling, the rest will have been downloaded with the user none the wiser.