There are a lot of possibilities to decrease loading time of the site.
1. Reduce the amount of HTTP requests
2. Reduce the amount and file size of loaded resources (images, script files, etc)
3. Check for server/hardware performance as well as webserver/database/module configuration to optimize
As mentioned already, you can put a bunch of images into a single sprite image (this will reduce the HTTP requests) and definitely reduce file size at all.
Using Fontawesome for icons is disputed! Because you load a big font file with hundreds of icons whereof a couple of icons are used at all.
If you wanna go easy to reduce images, to reduce file sizes, to reduce HTTP requests, then try using inline SVG images!
Just an example to convince:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ANY_CSS_CLASS" style="height: 1em; width: 1em; /* ... */"><path fill="currentColor" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288z"></path></svg>
(This vector code represents a speech bubble)
Inline SVG advantages:
- Mini-mini-minimized (usually SVG is less in size than any physical image file)
- No more HTTP request for this resource
- Resolution independent with no loss of quality
- Customizable via CSS (style="" or class)
- Most browsers supprt SVG
Enjoy using inline SVG
One more important matter:
Do not forget to determine the "Time To First Response"!
How much time does you webserver need to generate the source code sent to the browser - so when is the browser receiving the first response?
You can use browser's inbuilt developer tools to check that. If the TTFR is high, investigate in hardware performance; if TTFR is low, then consider tuning in code, file sizes and requests.
[ExiTuS]