Faster Websites in 60 Seconds with preload and prefetch

Are efficient developers lazy or are lazy developers efficient? Ask this open ended question at your next interview and you will have an interesting conversation. While the goal is to improve performance, if we can do it in a lazy fashion (60 seconds or less) it's a win-win! This performance tip is rarely applied in our industry and we're all missing out! According to the 2019 State of the Web Report, only 14% of desktop site are using preload and about 1% are using prefetch.

preload

Preloading assets tells the browser to load critical assets earlier in the page loading lifecycle and as a result improves page load performance. Critical assets are the resources (JavaScript, CSS, images, fonts, etc) that are required to render the initial page or the displayable screen above the fold. For examples of preloading assets refer to Listing 1. It's very important to include the as attribute when preloading assets because it sets the content-type header, accept header, loading priority, and helps cache the asset for future requests. A complete listing of the content types that can be preloaded are listed here.

// Without preloading
<link rel="stylesheet" href="fancybox.css">
<script src="fancybox.js"></script>

// With preloading
<link rel="preload" href="preloaded-image.jpg" as="image">
<link rel="preload" href="fancybox.css" as="style">
<link rel="preload" href="fancybox.js" as="script">

Listing 1. Preload critical assets

prefetch

Prefetching assets tells the browser to load these non-critical assets in the background after the page loading lifecycle has completed. As a result, these assets will be cached for future page navigations which greatly improves page load performance. For examples of prefetching assets refer to Listing 2.

// Without prefetching
<link rel="stylesheet" href="fancybox.css">
<script src="fancybox.js"></script>

// With prefetching
<link rel="prefetch" href="preloaded-image.jpg" as="image">
<link rel="prefetch" href="fancybox.css" as="style">
<link rel="prefetch" href="fancybox.js" as="script">

Listing 2. Prefetch non-critical assets

Auditing Performance

How much can your site gain by preloading and prefetching assets? Find out using Lighthouse in Chrome's Dev Tools (see Figure 2). Check the "Performance" option and run the audit. Then refer to your estimated savings report to see your performance improvement opportunity (see Figure 3). A faster site will also boost your SEO score so this lazy technique has an additional benefit of boosting revenue!

Figure 2. Chrome's Performance Audit via Lighthouse

Figure 3. Performance savings report by preloading and prefetching

SEO Tips to Boost Revenue

How much can your company lose if your Search Engine Optimization (SEO) strategy is poorly designed? 87% in profit loss! That's right, Asos learned this lesson the hard way. Their root cause was attributed to a poor site redesign. Asos released 200 locale-specific versions of their site which negatively affected their search engine rankings and ultimately their profitability. How can we build an effective SEO strategy? Let's review a few basic and advanced techniques to keep our SEO and profits in the right direction.

SEO Fundamentals

• Title tag - The most important SEO element is the <title>My page title</title> tag. The title's description becomes the pages title as shown in the search engine response page (SERP). The title tag may be up to 50 characters in length.
• Meta description - The 2nd most important SEO element is the <meta name="description" content="My description text up to 155 characters..." > The meta content becomes your pages description as shown in the search engine response page (SERP).

Advanced SEO

We can now add structured data (JSON-LD) to our content which has multiple benefits: 1) It is an opportunity to show additional search engine response data. 2) It provides rich and meaningful information about our sites. For example, the new Software app component allows us to list our native mobile apps within our search results (see Figure 1).

Figure 1. Structured data for Software app listing (New)

The following are just a few of the structured data elements available today:

• Articles
• FAQ
• Local business listing
• Products
• Software app
• Reviews
• and more structured data components

Need help authoring and validating your structured data? Google has a Structured Data Markup Helper and Structured Data Testing Tool to help assert your data is correct.

Auditing SEO

Will your site pass an SEO audit? Let's find out using Lighthouse in Chrome's Dev Tools (see Figure 2). Check the "SEO" audit option, run the audit, fix any errors, and your profits will soar!

Figure 2. Chrome's SEO Audit via Lighthouse