Rendering

Hi there,
how can I make this (<div class=”top-bar-left”>) faster? This is taking 2 700 ms to load on mobile devices.
Text in the header top bar
Place here text you want to see in the header top bar. You can use shortocdes. Ex.: [social_buttons]

Best Regards,
Tuomo Nurkkala

I read that Font Awesome icons take a lot of time to load? Should I use instead SVG icons or?
How can I use SVG icons instead for example on the header?
Here is the header code:
<i class=”fa fa-truck” aria-hidden=”true”></i><span style=”margin-left: 10px;”>Ilmainen toimitus yli 70€ ostoissa Postin automaattiin.</span>

Hello,

Could you please send us a screenshot where you see 2700ms so we can better understand what you mean?

Kind Regards

Oh, I thought I sent the image in the first comment. I’m not sure why it didn’t come here. Here it is again.

Attachments:

You must be logged in to view attached files.

This image is a snapshot from PageSpeed Insights.

This report says that this element is LCP but it doesn’t mean that it takes 2700ms to load itself. It actually means that before this element is rendered, the browser needs 2700 to load all the resources. And 2700 is quite fast anyway.
Read more information in Google docs https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=lr

Okay, good to know! 🙂

[Author]

Posts