[Resolved] Favicon load time optimization

Home Forums Support Favicon load time optimization

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #901174
    Sebastien

    Hi,

    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.

    #901549
    David
    Staff
    Customer Support

    Hi there,

    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:

    Network

    #901961
    Sebastien

    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.
    thanks

    #902354
    David
    Staff
    Customer 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.

    #902431
    Sebastien

    thanks for this informations, it ables me to save a lot of time !
    =)

    #902438
    David
    Staff
    Customer Support
    #1032929
    Nick

    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.

    #1033219
    Tom
    Lead Developer
    Lead Developer
    #1033241
    Nick

    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 🙂

    #1033616
    Tom
    Lead Developer
    Lead Developer

    The <link> element would go in the <head> section of your website. If you’re using Elements, it would be in the wp_head hook.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.