Change dns-prefetch to preconnect

Home Forums Support Change dns-prefetch to preconnect

Home Forums Support Change dns-prefetch to preconnect

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #227014
    Logan

    Hi Tom! First, just wanted to tell you that I love the theme, and purchased the Premium package.

    I’m always looking to speed up my site. I already run on SSDs, using Nginx and PHP7 with OPcache, optimizing MySQL, etc… I’m running some tests on WebPageTest and noticed that I could dns-prefetch some domains. Digging deeper, I found this article on using preconnect instead of dns-prefetch. I implemented this using Hooks for the font that I had selected in customizer, as shown below.
    <link rel='preconnect' href='https://fonts.googleapis.com/css?family=Oxygen:300,regular,700' crossorigin>

    I saw similar results to the blog post. The woff2 file (from fonts.gstatic.com) was loaded at the same time as the initial connection to fonts.googleapis.com (instead of after it).
    preconnect

    Since you know for a fact that the font will be loaded, do you think it would make sense to preconnect the specific font, instead of just dns-prefect the domain?

    Let me know what you think. I was going to submit an issue on Github, but thought this would be more appropriate.

    Logan

    #227032
    Tom
    Lead Developer
    Lead Developer

    You had me at “speed” πŸ™‚

    Been looking at this while trying to do it with core WP functions.

    Looks like they added a function in WP 4.6 to help with this.

    However, I’m not seeing massive speed improvements.

    Can you try testing with this function?:

    if ( ! function_exists( 'generate_typography_resource_hints' ) ) :
    add_filter( 'wp_resource_hints', 'generate_typography_resource_hints', 10, 2 );
    function generate_typography_resource_hints( $hints, $relation_type ) {	
    	if ( 'preconnect' === $relation_type ) {
            $hints[] = '//fonts.gstatic.com';
        }
     
        return $hints;
    }
    endif;
    #227034
    Logan

    Do you want me to remove my Hooks entries before adding that function?

    #227036
    Tom
    Lead Developer
    Lead Developer

    Yea – technically that function should do it all for you.

    Interested to see if you get the same results.

    #227056
    Logan

    This is before (with no prefetch/preconnect)…
    https://www.webpagetest.org/result/160916_CM_2GCG/1/details/
    http://i.imgur.com/70vdPAL.png
    http://i.imgur.com/fTfIn3e.png

    and this is after…
    https://www.webpagetest.org/result/160916_HG_2GEH/1/details/
    http://i.imgur.com/noxr7jI.png
    http://i.imgur.com/4GBreEh.png

    Seems that some numbers are better, some are worse. However, I do see that it loaded the DNS for fonts.gstatic.com at the same time as the request to fonts.googleapis.com.

    EDIT:
    To compare, here is the results running the following lines in wp_head of Hooks.

    <link rel='preconnect' href='https://fonts.googleapis.com' crossorigin>
    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
    <link rel='preconnect' href='https://fonts.googleapis.com/css?family=Oxygen:300,regular,700' crossorigin>

    https://www.webpagetest.org/result/160916_9D_2H58/1/details/
    http://i.imgur.com/f7FZuDG.png
    http://i.imgur.com/HLPEzHW.png

    Interestingly, you can see using the preconnect in Hooks, that it loads the resources from fonts.gstatic.com and does the SSL connection right there, as opposed to waiting when using the function you provided.

    #227138
    Tom
    Lead Developer
    Lead Developer

    The third one in your wp_head hook shouldn’t do anything, as the first one should handle that.

    WordPress adds the first one by default with WP, but using dns-prefetch instead which is interesting.

    Can you test without the third entry and see if it makes a difference?

    If it does, I’ll try removing the dns-prefetch value WP adds and replace it with preconnect.

    Thanks! Will be sweet if we can make the theme even faster πŸ™‚

    #227676
    Logan

    Hey Tom,

    I ended up using some CSS (from my other post) to use a locally-installed version of a Google Font. It’s much faster, so there’s no need for me to reach out to hit any Google sites now.

    However, I’m not convinced that preconnect was “faster”, per se. I don’t think it sped up the page load time, I just think it connected to Google earlier, but still took the same time to load.

    Logan

    #227731
    Tom
    Lead Developer
    Lead Developer

    Locally hosted fonts are definitely faster – hope you’re getting awesome scores.

    Thanks for bringing this stuff to my attention, I’ll keep an eye on it as it develops πŸ™‚

    #251990
    Ramesh Srinivasan

    FYI, Twenty Twelve update 2.2 (released today) adds preconnect
    https://themes.trac.wordpress.org/changeset?old_path=twentytwelve/2.1&new_path=twentytwelve/2.2

    #252025
    Tom
    Lead Developer
    Lead Developer

    Added to GP 1.3.42 πŸ™‚

    #252148
    Ramesh Srinivasan

    Excellent πŸ™‚ Thanks Tom.

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