Site speed has been important for a long time, much longer than it’s been important to Google. Google got interested in 2008 or so and made site speed one of the quality indicators in their algorithm in 2010. A fast site means users get the content they want as quickly as possible and are less likely to bounce while waiting for content to load.
There are lots of ways to make a site fast, including right-sizing images, HTML and CSS minification, caching, CDNs, etc. Years ago I discussed a technique of using multiple hostnames to call resources to speed a page – you can view that article here. That technique still applies actually, but it does come at a cost, which is additional DNS lookups.
DNS lookups happen whenever your computer connects to an external resource. (Not sure what DNS means? Check out our SEO Glossary.) When you arrived at SEOMike.com, your computer had to find out where our site lived and had to connect to our server to load the site, which means your computer had to contact a DNS server. Everything you do on the web starts with a DNS lookup. Many sites, including ours, have calls to multiple other sites within the code. These calls load things such as Google Analytics, icons from Font Awesome, etc. Every time our site makes your browser request something from a different site than our own, your browser has to make a DNS lookup, which takes time. Since these lookups can include fonts and CSS, your browser has to wait for the lookup to complete before it can fetch the resource. When those calls happen in the middle of the code, the entire site is slowed down while waiting for the responses.
The screenshot below shows a load of our homepage without using prefetches or preconnects. The arrows point to where the DNS lookups are happening to show you that resources have to wait for the lookups to finish and the connections to be established.
See how the requests are all spread out? Luckily the connects were pretty fast for this test, but sometimes I see them taking a long time which slows a site a lot. Now check out the image below which shows the DNS lookups and happening long before the resources is needed. The connections are made and kept open so the site can pull in what it needs when it needs it without delay.
Pretty sweet, right? You’re probably asking how to implement these things for yourself. The first step is to go to webpagetest.org and evaluate your site. Look for teal colored DNS lookups like I showed in my first screenshot and make a note of the host that’s being requested. Those are the hostnames you want to prefetch to have the connection ready when needed. Implementation depends on your site setup, but the calls should go as high in the HEAD section of your site as possible. You can do this by either editing your child theme’s header file or using a plugin like “Header and Footer Scripts” which is available at that link.
To speed up our site, I added the following code to the header.php file in my child theme:
<link href=’https://fonts.googleapis.com’ rel=’preconnect’ crossorigin>
<link href=’https://fonts.gstatic.com’ rel=’preconnect’ crossorigin>
<link href=’https://www.seomike.com/wp-content/themes/modality/fonts/fontawesome-webfont.woff2?v=4.7.0′ rel=’prefetch’>
<link href=’https://www.google-analytics.com’ rel=’preconnect’ crossorigin>
<link href=’https://stats.g.doubleclick.net’ rel=’preconnect’ crossorigin>
<link href=’https://www.google.com’ rel=’preconnect’ crossorigin>
<link href=’https://apis.google.com’ rel=’preconnect’ crossorigin>
<link href=’https://www.gstatic.com’ rel=’preconnect’ crossorigin>
<link href=’https://accounts.google.com’ rel=’preconnect’ crossorigin>
<link href=’https://ssl.gstatic.com’ rel=’preconnect’ crossorigin>
<link href=’https://content-partnersbadge-pa.googleapis.com’ rel=’preconnect’ crossorigin>
<link href=’https://www.gstatic.com/partners/badge/images/adwspec.png’ rel=’prefetch’ as=image>
<link href=’https://www.gstatic.com/partners/badge/images/mobile.png’ rel=’prefetch’ as=image>
<link href=’https://www.gstatic.com/partners/badge/images/display.png’ rel=’prefetch’ as=image>
<link href=’https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2′ rel=’prefetch’>
Note: don’t copy and paste my code, because it isn’t going to be a direct insert into your site. Use it as an example and come up with your own based on your speed test and the information you find here and here.
If you still need more speed for your site, you might consider using a CDN to help deliver content. The image below shows this site’s load time after implementing a CDN. You’ll notice that the number of things loaded dropped from 70 to 50 because the CDN is automatically consolidating my scripts.
