Eliminate render-blocking resources

Hello guys,

Please can you help me to solve these problems related to my site speed without using any plugin?

When I do some google search, I get a lot of explanations, but I don’t understand them very well because of some technical terms.

Frankly, I don’t know where to start, and I’m confused.

May I have any help please?

Without seeing your code, the best you’ll get is general suggestions. With that in mind…

  • Where (or when) are you loading your Javascript? Is it being loaded before the HTML body renders, or after?

  • What are the formats or sizes of your resources? Have you compressed your images and sized them appropriately?

  • If you are loading multiple icon images (or other small “sprite” style images), are you placing them each in separate files, or are they all being loaded in a single file one time and shared via CSS?

There are numerous tricks and hacks to optimize site load times, googling something like “how can I optimize initial site render?” might be a useful starting point.

2 Likes

Some JS will always be render-blocking because it needs to load before the page. I believe Google Analytics for example is placed right after the head element before the page content.

I will say the First Contentful Paint time is quite slow. But there may not be much you can do about it if it’s for example a WordPress site running on a shared hosting solution. I would look into caching and CDNs. But if it is a WordPress site that is mainly done through plugins (or whatever options your provider has).

As said, without seeing the site or knowing more about what type of site it is and where it is hosted we really can’t say much.

3 Likes

Thank you for these clarifications.

Hello,

Thank you for the help.

My site is working on a shared hosting solution from Namecheap.

Do you think this has an effect on the speed of my site?

It does, but how much depends on the amount of resources you are given and what type of site it is.

Is it a WordPress site? If so setting up a caching plugin might help. It is also possible that the theme you are using might be on the slower end.

2 Likes

Yes, it’s a WordPress site, and I actually use a caching plugin.

As for the theme, I just bought one from Themeforest, then I found out that it was too slow so I replaced it with a free theme.

At least this free theme works better than the paid theme that you have been using before.

Thank you for your interest in helping me with this issue :slightly_smiling_face:

It is what it is. Shared hosted WordPress sites are not known for their speed and WordPress themes are often not helping.

If you look in the dev tools network tab when loading the site what resources are taking the longest to load? If for example, images are taking a long time you can try doing some optimization.

Anyway, I can’t really recommend anything beyond the normal WP optimization and using a theme that isn’t slower than it has to be. You can search for ways of optimizing WP sites and see if you find anything useful. Just be careful what you signup for WP optimization is a very snake oily and spammy scene.

2 Likes

Yes, you are right, Lasjorg!

Honestly, I recently installed one of the plugins and it seems to be doing just fine.

But I still see one of the opportunities for improvement in the Lighthouse report, which is as follows:

“Ensure text remains visible during webfont load”

I googled and found many useful articles, like this one: Ensure text remains visible during webfont load | GTmetrix.

But despite the application of these tips did not solve this problem.

I may not have applied these tips properly.

It depends on what type of fonts it is and how they are loaded. Are they Google fonts or fonts added using @font-face?

For @font-face you need font-display: swap

For Google fonts you need to add the &display=swap to the URL, but the URL you get should have that already. I guess it depends how the fonts are added to the page (theme settings or whatnot).

1 Like