10 proven steps to make our new Elementor website loads faster


Userlevel 3
Badge +2

Hi, folks. Sorry if the title is a bit confident. But this is only coming from personal preference based on my team experience. I know that many of you have much experience in speed like @Nigel Hancock @Thangjam Kishorchand and other Elementor frends. (I learn from them too). But I hope what I want to share is useful for other Elementor users. Especially for beginners to have a ‘Performance’ mindset when building a new Elementor website.

So, here is our steps:

  1. Choose lightweight WordPress theme with header & footer feature
  2. Install only lightweight & necessary plugins
  3. Resize & compress all images before upload
  4. Use optimized SVG icons & logo
  5. Host custom fonts locally
  6. Elementor ‘A Must Do’ Setting
  7. Build any single page with speed and performance mindset (CRUCIAL)
  8. Add custom optimization scripts (BOOSTER)
  9. Optimize your site with our recommended optimization plugins & setting
  10. Use fast hosting server

I wrote the details on our blog https://thinkweb.dev/how-to/create-a-new-elementor-website-loads-faster/. I also provide some snippets you can use also. I hope this is useful.

There is a story behind why I wrote this article. First, on my last personal business, I have a web developer who helps me building websites using Elementor for my clients. His background is a web programmer who knows how to code a website using Html, JS and CSS. His coding skills is better than me. But every time the website is ready to optimize for speed, it was very hard to do.

Second, on our new business (ThinkWeb / TW), we had some websites to optimize for an web agency in Germany. All the websites are slow and heavy on database.

The issue from the first and second story is same. They don’t build the website with a performance mindset. For instance, they uploaded images without compressed, using too many plugins (and some plugins actually are no used), they don’t optimize the fonts, they use unnecessary inner sections and many more. Because of that, I want to share my experience with the help of my partner in TW on this article.

If you have some topics to discuss, I’m glad to have some discussion here or in other posts related topics. 

 

Cheers,

Clement Yo

 


16 replies

Userlevel 6
Badge +3

Hi @clementyo thank you for this other article that i’ve saved both to other shared by @Thangjam Kishorchand on his reply 

 

Userlevel 6
Badge +6

@clementyo nice share. It is great to have you in our community helping people who struggle with page speed.

Userlevel 3
Badge +2

Hi @clementyo thank you for this other article that i’ve saved both to other shared by @Thangjam Kishorchand on his reply 

 

Thanks Mario. Hope this is useful ^^

Userlevel 3
Badge +2

@clementyo nice share. It is great to have you in our community helping people who struggle with page speed.

Thanks bro Strahinja ^^ I love to be in the community and help each other. :grin:

Userlevel 6
Badge +3

Hi @clementyo thank you for this other article that i’ve saved both to other shared by @Thangjam Kishorchand on his reply 

 

Thanks Mario. Hope this is useful ^^

Surely

Userlevel 6
Badge +3

@clementyo Just a comment on the use of SVG.  Some SVG’s can become massive - for example, you mention logos but, if you just somehow convert a jpg to SVG all you are, in effect, doing is putting the jpg in an SVG wrapper which means the original raster image is still part of the load.

Also, locally hosted fonts are not always a good idea.  On a fast host, there can be improvements but on a slow host, it’ll be faster fetching them from Google or Adobe.

Userlevel 3
Badge

@clementyo Just a comment on the use of SVG.  Some SVG’s can become massive - for example, you mention logos but, if you just somehow convert a jpg to SVG all you are, in effect, doing is putting the jpg in an SVG wrapper which means the original raster image is still part of the load.

Also, locally hosted fonts are not always a good idea.  On a fast host, there can be improvements but on a slow host, it’ll be faster fetching them from Google or Adobe.


And when fetching from Google or Adobe- one can consider using the Prefetch load method to help improve load times.

Ultimately the issue for most users is that they are using too many font variations. So regardless if they are locally hosted or being fetched externally, the performance gains from both combined are often less than simply reducing the number of variations to begin with- but as always, test test test as every environment is different.

Userlevel 6
Badge +3

Welcome to the hub @CharlesTheCoder! We are graced with optimisation royalty ;)

Userlevel 3
Badge

Welcome to the hub @CharlesTheCoder! We are graced with optimisation royalty ;)

Looking forward to assisting Elementor users with performance issues on here! I only joined because all my friends were already on here… and I heard rumors that there is a special badge that once unlocked, will grant free beer from Elementor HQ. :grin:

Userlevel 6
Badge +3

That’s very true. It’s a lot like a Dungeons & Dragons puzzle but, the beer can be found ;)

Userlevel 3
Badge

@clementyo - Love this list! #7- Performance Mindset when building is a BIG ONE!

Userlevel 3
Badge +2

@clementyo Just a comment on the use of SVG.  Some SVG’s can become massive - for example, you mention logos but, if you just somehow convert a jpg to SVG all you are, in effect, doing is putting the jpg in an SVG wrapper which means the original raster image is still part of the load.

Also, locally hosted fonts are not always a good idea.  On a fast host, there can be improvements but on a slow host, it’ll be faster fetching them from Google or Adobe.

Hi, @Nigel Hancock Thanks for the feedback ^^ Ah yes, I agree. It depends to the logo design itself. Usually, for vector logo (single color), I prefer to use an SVG file because it looks great on mobile. But for rasterized logo, I will use a PNG transparent color. 

For locally hosted fonts, I usually did some research before buying a hosting package for personal or client’s project. So, a fast host is already my standard stack ^^ Fast hosts not always international host like Siteground, Cloudways, WP Engine, AWS or other famous hosts. For local market, I already filtered some local hosts that are good in performance. So, unfortunately, I don’t have experience using a slow host at this moment. But thanks, your info is valuable man ^^

Talking about Font Optimization, our team is preparing this topic for the coming article. There is a way how to fetch Google Font faster from Google CDN. But still my favorite at this moment is host fonts locally ^^ 

Once again thanks for your feedback ^^ 

Userlevel 3
Badge +2

@clementyo Just a comment on the use of SVG.  Some SVG’s can become massive - for example, you mention logos but, if you just somehow convert a jpg to SVG all you are, in effect, doing is putting the jpg in an SVG wrapper which means the original raster image is still part of the load.

Also, locally hosted fonts are not always a good idea.  On a fast host, there can be improvements but on a slow host, it’ll be faster fetching them from Google or Adobe.


And when fetching from Google or Adobe- one can consider using the Prefetch load method to help improve load times.

Ultimately the issue for most users is that they are using too many font variations. So regardless if they are locally hosted or being fetched externally, the performance gains from both combined are often less than simply reducing the number of variations to begin with- but as always, test test test as every environment is different.

Hi, bro @CharlesTheCoder I’m really glad to see you here. Since you’re commenting about fonts, next article is about Font Optimization ^^ When it launches, I also need your and other friends feedback ^^

 

And I saw one your post on Fb that you’re working something about Lazy Load Background. Wow, it’s a huge help man ^^

Userlevel 3
Badge +2

Welcome to the hub @CharlesTheCoder! We are graced with optimisation royalty ;)

Looking forward to assisting Elementor users with performance issues on here! I only joined because all my friends were already on here… and I heard rumors that there is a special badge that once unlocked, will grant free beer from Elementor HQ. :grin:

Ah, about the badge, actually this is a big question too for me. How to get the badge? ^^ LOL I can’t find any resources here how to get them. Let me know when you get it and share the tips ^^

@clementyo i’ve read your blog, it’s nice and thorough.

You’ve suggesting theme like GP Premium & Kadence.

And i’ve read several other blog make some research about theme speed. Most of theme put (other than hello) Astra as top ranking.

But i also read several comment on local elementor community, that kadence beat astra in terms of speed.

Have you make some research between 3 theme (GP, Astra, Kadence) ?

So far All of my client using hello or Astra.

Many thanks.

Userlevel 3
Badge +2

@clementyoi’ve read your blog, it’s nice and thorough.

You’ve suggesting theme like GP Premium & Kadence.

And i’ve read several other blog make some research about theme speed. Most of theme put (other than hello) Astra as top ranking.

But i also read several comment on local elementor community, that kadence beat astra in terms of speed.

Have you make some research between 3 theme (GP, Astra, Kadence) ?

So far All of my client using hello or Astra.

Many thanks.

Hello, mas Ringgie. I’m very glad to see you on this forum ^^

Actually, I have not done any research on themes. I & my partner only shared based on our experience. At my starting point doing website business, I used Astra theme and then Hello theme. But as time passed and I was in some communities (Facebook & Telegram), I found Generatepress is a favorite theme among speed enthusiast in general (WordPress). Sometime, my old clients got some issues when there is Astra update. So, for me, I think I’m not click with Astra ^^

I use GP theme especially for header menu. The theme has their in built svg icons for dropdown, toggle (hamburger) & close icons. Elementor Nav Menu is using Font Awesome icons. It calls FA script. At this moment, there is no feature yet to upload custom icons on the Elementor Nav Menu.

 

I have not used Kadence at this time ^^ Maybe I will try it later.

 

Glad to have you in this community ^^ Don’t forget to join Jakarta Virtual Meetup

Reply