Website Initial Load time is too long

🙋Get Help
1

Hi, We just converted our WordPress site to frontity. But the initial load time is too long. Can anyone suggest that what I am doing wrong?

Here is the link - http://test.babacric.in/

2

Hi @santoshdevnath15

Welcome to the Community!

I recommend you to check the following things in your site:

  • Apply lazy loading on images through the <Link> component
  • Using a plugin like Simple Cache will allow you to cache your REST API
  • Using a CDN in front of your site it will also speed up your site (Vercel offers a cache layer by default)
  • Check your WordPress installation and remove all non-essentials plugins

Hope this helps

3

Thanks, @juanma, I will try it and will inform you. Can you please explain a little bit more, how we can use the Link component on images

4

Screenshot from 2021-05-10 12-18-10
Screenshot from 2021-05-10 12-18-101302×564 239 KB

As you can see in the picture the initial load time is almost 10 seconds while the page size is just 76k. Can you please try to look into this

5

Is your Frontity site deployed in a hosting w/ cache layer such as Vercel?

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions to technical issues with specific code

Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.

6

Hi @santoshdevnath15,

As @juanma noted a repo or CodeSandbox will help a lot with solving these kind of issues.

Looking at the transferred network size indeed, is around ~80kB but the actual document is 1MB in size. With a vanilla mars-theme the document size is 330kB, so that makes me think that there’s something going on your theme code, which is outputting more html than necessary.

Screenshot 2021-05-11 at 10.05.38
Screenshot 2021-05-11 at 10.05.38722×296 29.1 KB

Try it out with a vanilla mars-theme and see if the size changes.

7

Gracias @juanma y @cristianbote :blush:

  1. We are using Cloudflare for the cache layer

  2. As you mention above I have uploaded the code to the GitHub repository. Here is the link - GitHub - santosh3700/baba-frontity: converting babacric.in wordpress site to fronitty

8

Hi @santoshdevnath15,

Thank you so much for sharing the code with us. Took a quick look and tried some things out but the slow response that you are seeing is coming from these lines: baba-frontity/index.js at main · santosh3700/baba-frontity · GitHub. As soon as you comment out those, everything else speeds up. Can you talk a bit more about those fetches?

1 Like
9

@cristianbote I think those lines come from these similar lines is the following demo example

This demo was created to show how to add in the HomePage boxes displaying latest posts of some categories

Do you know a better approach (more performant) to do this?

1 Like
10

Thanks @cristianbote for knowing the error. but do you have any solutions for this

11

@juanma Really thanks for understanding the problem. Can you please suggest us how we can fetch latest post for few categories

12

@juanma and @cristianbote if I am trying to open a post page, where no categories widget is loading, that page is also taking too long time.

here is the link for the demo post page - https://test.babacric.in/news/shakib-will-not-play-in-the-remaining-psl-to-participate-in-dhaka-premier-league/

13

Thanks again @juanma and @cristianbote. Your idea worked. The speed has increased.

Can we fetch those categories using something like useEffect or any other?