Post by Rainforest » Wed Apr 15, 2020 8:46 am

Hello All,

I'm using OC 2.3.0.2 with Journal 2 theme.
I see in the default OC 2.3.0.2 that font-awesome comes with it.
Google page insights is flagging it for slowing down my site. It's about 1 second and I'm trying to see if there is something I can do.

The message from Google is:

Preload key requests
Consider using

Code: Select all

<link rel=preload> 
to prioritize fetching resources that are currently requested later in page load.

and it references the font awesome file:

Code: Select all

/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.4.0
Any ideas appreciated.
Thank you
Last edited by Rainforest on Sun Apr 19, 2020 8:00 pm, edited 2 times in total.

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

Post by IP_CAM » Wed Apr 15, 2020 4:05 pm

I put it in the Theme footer.tpl File, and made it cookiefree:
regular URL:

Code: Select all

http://www.velomech.ch

Code: Select all

</footer>
<link href="http://velomech.ch/shop/catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" prefetch prerender" />
</body>
</html>

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Rainforest » Wed Apr 15, 2020 7:21 pm

Thank you, Ernie.
I will give it a shot.
Stay safe out there.

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

Post by Rainforest » Thu Apr 16, 2020 7:08 am

IP_CAM wrote:
Wed Apr 15, 2020 4:05 pm
I put it in the Theme footer.tpl File, and made it cookiefree:
regular URL:

Code: Select all

http://www.velomech.ch

Code: Select all

</footer>
<link href="http://velomech.ch/shop/catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" prefetch prerender" />
</body>
</html>
Thanks again for your suggestion. I'm just now getting to trying it.

I'm guessing a put my URL (http) in the default /common/footer.tpl?
Anywhere in particulare?
And then also add the second code under it?

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

Post by IP_CAM » Thu Apr 16, 2020 8:13 am

Just check the Page Source of the Site, mentioned above, and switch to 'WRAP' Content Mode,
to see it all on the Page, then, you'll find out, where I placed all the linkings to the Styles and Scripts.

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Rainforest » Sun Apr 19, 2020 8:03 pm

IP_CAM wrote:
Thu Apr 16, 2020 8:13 am
Just check the Page Source of the Site, mentioned above, and switch to 'WRAP' Content Mode,
to see it all on the Page, then, you'll find out, where I placed all the linkings to the Styles and Scripts.
So, i added those lines and still see the preload key font awesome (almost 2 seconds) in page insights.
My site is HERE
The code is there in my footer when I view source

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

Post by IP_CAM » Sun Apr 19, 2020 11:28 pm

Well, I really don't want to make you feel bad, but with 2581 Lines of Code, to present
your Main Page, and 900+ Liner Cat- and Product- Page Source, and some of the Website
Testers even refused to work. Compared with 1-Liner Source Main + Cat Page Layouts,
and ~100 Liner Product Pages, like shown here, http://www.jacob.ch/shop/,
there is no Short-Cut Solution, except of, advising you, to overthink your Theme concept.
Ernie :-\
Last edited by IP_CAM on Mon Apr 20, 2020 11:50 pm, edited 2 times in total.

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Rainforest » Mon Apr 20, 2020 8:44 pm

IP_CAM wrote:
Sun Apr 19, 2020 11:28 pm
Well, I really don't want to make you feel bad, but with 2581 Lines of Code, to present
your Main Page, and 900+ Liner Cat- and Product- Page Source, and some of the Website
Testers even refused to work. Compared with 1-Liner Source Main + Cat Page Layouts,
and ~100 Liner Product Pages, like shown here, http://www.jacob.ch/shop/,
there is no Short-Cut Solution, except of, advising you, to overthink your Theme concept.
Ernie :-\
---

Yeah, it's a big shop and we do well compared to others in our category.
I am happy with my Google Page Insights score which is generally 90 desktop and 60 mobile.

Getting a 100 is not realistic for any busy eCommerce store. It's really about user experience in real life. If your site runs slow in real life, with real life testing, then sure, fix it.

Take bigger retailers and put their sites into GT Metrix, you get similiar (if not worse) scores. To focus on the those numbers is not reality.
Image

Anyway, I was just trying to solve this one thing with Font Awesome but your solution didn't work. I do however, again, appreciate the input.
I'll keep searching for solutions to the font awesome thing but won't lose any sleep. I guess it's quarantine boredom that has me taking a look at these non-crucial things. :laugh:

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

Post by IP_CAM » Tue Apr 21, 2020 8:35 am

Well, that's a 200-product special Page Test Result.
http://www.jacob.ch/shop/index.php?rout ... &limit=200
Realistic or not, it's all a matter of opinion ... :D
---
Image
---
Image

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by dt-1980 » Wed Oct 07, 2020 12:04 am

Prefetch is not ideal in this case, as he needs to speed up current page... Preload is proper.

I don't know about Journal 2 but in Journal 3 you can paste code in header by simply adding it into options: System > Settings > Custom Code...

Code should be smtg like this...

<link rel="preload" href="/fonts/fontawesome-webfont.woff2?v=4.4.0" as="font" type="font/woff2" crossorigin="anonymous">

Newbie

Posts

Joined
Tue Oct 06, 2020 11:59 pm

Post by CaptainHaddock » Fri Dec 11, 2020 6:11 am

FYI
On a fairly new OC3.03.6 install with Journal theme, Google pagespeed insights scores were good for most page types apart from mobile score for product page.
Score = 57, time to first paint = 5.9, top opportunity = preload key requests fontawesome 2.1s

So I pasted this in journal/system/settings/mysite/custom code/custom code header ( absolute url was necessary to make this work):
<link rel="preload" href="https://www.mysite.com/catalog/view/jav ... f2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">
Result:
Score = 51, time to first paint =7.3, top opportunity = elimate render blocking resources journal css and jscript 1.63s

Conclusion: preloading fontawesome does not improve google pagespeed score for mobile on OC3 with Journal

Would be interested to hear if anyone has managed to improve pagespeed score preloaing fontawesome.

Active Member

Posts

Joined
Tue Jul 02, 2013 7:01 am

Who is online

Users browsing this forum: No registered users and 3 guests