Page Load Speed - Long Idle Time Before First Render

Mycar
Participant
I'm working on improving first render speed for a hubspot website.
 

There seems to be almost 3s of idle time after all the resources have been loaded in before the first render is shown. To isolate the problem, I've created a webpage that has no external packages, and almost no CSS or content.

 

The page finishes loading all content in 2s but idles until 5s until the first render is displayed. How can I bump up the first render so something is visible on the screen (even if it's not fully loaded) as soon as possible? What's blocking the first render here?

 

Test page: https://www.myvisasource.com/-temporary-slug-759572f6-3eb0-4d19-b6fc-2c7b984d87f7?hs_preview=BEXRcjt...

Screenshot of Idle Time

Screenshot of Network Tab

 

Thanks

0 Upvotes
2 Replies 2
miljkovicmisa
Top Contributor | Gold Partner

Hello @Mycar , thanks for writing.
I see that you are using custom fonts that are preloaded, this is a serious hit in performance as you are downloading 5 font files before even showing the page.

here are the fort files  you are loading:

 

<!-- WEBFONTS -->
  <link rel="preload" as="font" href="https://www.myvisasource.com/hubfs/Fonts/Futura%20PT/FuturaPT-Bold.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="https://www.myvisasource.com/hubfs/Fonts/Futura%20PT/FuturaPT-Heavy.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="https://www.myvisasource.com/hubfs/Fonts/Futura%20PT/FuturaPT-Demi.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="https://www.myvisasource.com/hubfs/Fonts/Futura%20PT/FuturaPT-Medium.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="https://www.myvisasource.com/hubfs/Fonts/Futura%20PT/FuturaPT-Book.woff2" type="font/woff2" crossorigin="anonymous">
<!-- End of WEBFONTS -->

 


So I would suggest two things:
1. use less font files,
2. take on a differrent strategy for loading the fonts. you can find very good information right here in this link.

Note: This is a vast subject, I would love to help you more but really can't write everything in a single answer, so I suggest to take a look in the link I posted and see how to preceed from there.

If my answer was helpful please mark it as a solution.

webdew
Top Contributor | Diamond Partner

Hi @Mycar ,

you can minify the css and dont use heavy image, icon use svg formated and
dont use CDN file like third party, it will create problame when the page load.

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes