Updated on Dec 4, 2024
Understanding how to avoid enormous network payloads on your website is essential for fast loading times and good page speed scores. Pages need to be under 1,600 KiB to render in a reasonable time.
Below, we explain how to optimize your website performance by reducing the data it needs to render. As you read through, you will discover actionable tips to make your site load quickly.
Before getting started, you must have a clear understanding of your website's current payload to determine what needs to change. Use PageSpeed Insights so that you can learn:
Using PageSpeed Insights straightforward. Enter your URL and get a detailed report showing the breakdown of all requests on the site.
The first item to focus on is images because they are usually the biggest contributer to large payloads and they are easy to fix.
These will have a profound impact on the network payload.
Another easy win is minification which removes unnecessary bytes from pages such as whitespace. No code changes are needed so it is a risk free change. The following tools can do it:
The majority of a webpage is below the fold, especially on mobile so there is no point loading images until users scroll down the page. Lazy loading only loads assets when they are scrolled into view.
This is extremely simple to do as Chrome supports lazy loading by default. Simply add loading=“lazy” to an image tag such as:
<img src="image.png" loading="lazy" alt="…" width="200" height=“200">This will ensure images are only called when they are needed.
GZIP or Brotoli compression will reduce the size of webpages which brings two benefits. Firstly they will be smaller so easier to transfer, meaning a faster page load and secondly, they will reduce the payload size so users see the content faster.
If you are using Laravel Forge, turning on GZIP compression is easy.
On most websites, the JavaScript and CSS contains legacy code that will never be used or excess code included as part of a framework or library. Unused code consumes precious bytes and can be identified by the coverage report in Chrome dev tools.
Be firm about what scripts are needed on the site, especially marketing tags. These can be added by marketing people through Google Tag Manager and become a bloat that drags you site down so check every script to ensure it is needed.
Look out for excessive bloat in the code particularly if you have repeating lists. One additional div might not seem like much but in a list where it is repeated 20 times, it soon adds up
The simplest technique of all to reduce page size is removing content from the page. A lot of websites produce long form content as at one time, that was seen as a strong SEO signal. Often this contains fluff and filler paragraphs that don’t add to the key points of the story so if you can, shorten your content down to the necessary details. Take away any images that are associated with the filler content and the size will be decreased further.
This will also reduce the HTML so is a double win.
You still need to have good content though so don’t get too extreme, The main thing is to only post what is needed and avoid content for the sake of it as it means more bytes to transfer
Fonts can be a sucker of resources and in particular external fonts. If you really need to use these, apply the following optimisation techniques
Cloudflare fonts offer a good solution to optimise their delivery so check that out if you have to use an external font.
These tips are easy to action and will help you Avoid Enormous Network Payloads which will improve your google page speed score. They will also make the page load faster which benefits users so there is no reason no to do them today.