- This topic has 9 replies, 4 voices, and was last updated 3 years, 8 months ago by Tom.
May 16, 2019 at 2:33 am #901174Sebastien
I’m using GP because I want using the most speed optimized theme.
In this optical, I try to reduce any extra request/delay of my page load.
I meet a strange thing with Favicon request. In fact, this request is always called at the end of the request list (as you can see at the bottom of the Pingdom rapport I’ve attached at this post).
Also, although this request is “fast” (<10ms), there is a “long” delay between the others request and this one (around 0.15s).
My favicon is a .ico’s file and was added directly into the theme customization, as it should.
I don’t understand if it is a normal situation?
For information, I’ve also tried to :
-> add file.svg or file.png (as icon) into the theme but it makes 2 request
-> add .ico into the FTP root
-> use RealFaviconGeneration as plugin
-> use RealFaviconGeneration cloud to generate files and put them at the root + insert header html request as suggested.
I’ve checked into my .htaccess that .ico are well cached and they are :
<FilesMatch "\.(.....|ico|jpg|jpeg|jpe|json|png |.....)$">
Is there anything that I can do to improve/optimize the loading time for Favicon ? I would have be able to place the Favicon request at the begin of the request loading list OR to reduce the delay GAP between Favicon request and others.
To save some precious 0.xx s
thanks for any suggestion.May 16, 2019 at 6:53 am #901549DavidStaffCustomer Support
favicons are generally always requested and loaded last to stop render blocking.
The delay you are seeing isn’t actually related to that request but the time of the previous requests. What pingdom is bad at is showing the actual time for the lazyload images to be downloaded – as it just show time to first interaction not fully loaded page. You can see the reality by using the browser tools network performance like here:May 16, 2019 at 1:49 pm #901961Sebastien
thanks for this explanation.
Can I ask you which method do you recommand (in quest of speed performance) to integer the Favicon ?
1) Using the theme customization ? if yes, which format? .svg ? .png? .ico? ==> I’ve noticed that .png & .svg are lighter but make 2 request but .ico is heavier but makes only 1 request.
2) Put .ico file at the root of the website?
3) Put all files from RealFaviconGeneration + writing all html call in the header to be sure (as suggested by RealFavicon) but it generates many request…
My plan is to reach 100/100 Page speed, so I’m working on every point I can.
An expert point of view would help me a lot.
thanksMay 17, 2019 at 3:16 am #902354DavidStaffCustomer Support
Generally i just use #1 with a .png keeping the file as small as possible.
Never measured if theres any performance difference between methods. And i don’t think improving it would have any impact on your pagespeed rating.
Page Speed ratings are a guideline and you reach 100 by a combination of fast loading times, minimal requests and mainly by achieving all of the recommendations they make. Other than that its a vanity metric and whats most important is it loads fast.May 17, 2019 at 4:50 am #902431Sebastien
thanks for this informations, it ables me to save a lot of time !
=)May 17, 2019 at 4:55 am #902438DavidStaffCustomer Support
You’re welcomeOctober 12, 2019 at 10:06 am #1032929Nick
Hey — wanted to open this back up.
It’s very important to me that my speed test shows the fastest results possible.
Is there any method you can imagine to make it so that the favicon gets pushed up the waterfall instead of “loading” after things like analytics which is a solid 1 second later than the real world first contentful paint?
I’m already loading the same file as the favicon earlier in the page so when it ‘loads’ the favicon it’s loading with 0 bytes and takes between 0-15ms.
If I can nail this down the first contentful paint will drop by a full second on average.October 12, 2019 at 8:15 pm #1033219TomLead DeveloperLead Developer
Maybe this will help?: https://stackoverflow.com/a/10800880October 12, 2019 at 9:41 pm #1033241Nick
Awesome that looks promising — where on the page/what hook would you recommend putting this? Favicons are such a PITA to clear from cache would rather not have to do too much experimenting haha..
Cheers for the late night reply btw 🙂October 13, 2019 at 10:16 am #1033616TomLead DeveloperLead Developer
<link>element would go in the
<head>section of your website. If you’re using Elements, it would be in the
- You must be logged in to reply to this topic.