Eliminate Render Blocking

I Need Help
1

Can anyone please give me some advice on what I can do to correct this problem please.
In page Speed test Google, I am confronted with this being the main problem for me.

Eliminate render blocking is 1.66s at this moment but what it shows me is this.

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS online and deferring all non-critical JS/Styles.

Culprits seem to be shown as:
(I’m not typing the whole lines)
css/bootstrap
Style.css
css/all.min
css/ionions
css?family=

This has me a little lost regarding how to correct this? Does anyone know why this has happened?

2

There is no problem here and Google is not reporting a problem or an error.

You are miss-interpreting the report. Without those files your site would not work. Those times are calculated times required to download those files, all of which are necessary, on a slow internet connection.

Look elsewhere for performance increases. E.g. Subsett your fonts and only use woff2 versions. Make sure all images are sized no bigger than they need to be and select webP in Blocs5.

Use this to subsett Google fonts -google webfonts helper

1 Like
3

I would recommend using svg images instead of icons. They are faster loading. You could also combine all css and js into single files.

3 Likes
5

Thanks so much Web for your information.

6

Brilliant, thanks Norm. I didn’t understand what it really meant so everyone’s input really helps.

1 Like
7

Hi Jerry, thanks for that, it’s really appreciated. I didn’t know this and I’ll look into that also. Thanks!

8

Which should I use instead ?

10

Blocs offers other icons like Lincons or Ionicons.
Are they OK?

11

Personally, I would not use icon fonts (icon Bric) unless you are using many icons in your site. This justifies the additional weight icon fonts add to projects.

As the web has evolved, many have moved away from icon fonts (which Blocs still includes in the icon Manager) and started to use SVG directly which Blocs also supports. If you plan on adding say, 3 icons to your site, I would just add them as SVG images. If you have like 50 different ones, it’s likely a better solution would be to use an icon font (Icon Bric).

Heading into 2023, we plan on bringing even better support for SVG in Blocs 5 and Blocs for iPad.

3 Likes
12

I wrote this blog post about icons recently which covers several things to factor in when considering using icons.

Looking forward to that.

3 Likes