Above The Fold Speed Optimization

Published on 12 Aug 2014 at 10:00 pm.
Filed under Google,Informative,Mobile,Search Engine Optimization,Web Design.

“Users know to scroll. I don’t need to fit things above the fold”. Yes, but you need them to load fast.

I love what Google has done to simplify things for business like the new Google My Business solution.What I’m not happy with is the recent change to drop Google Authorship images from appearing in Google search. They claim that it will not affect click-through rate. This contradicts previous claims and the experience for those that supported Authorship.

What you can’t doubt is that search results appear more consistent and load faster without the images. Google has always worked to make things fast. Now they’re kicking things into high gear to suggest you do too. Especially with content that appears above the fold.

PageSpeed Insights

PageSpeed Insights is the name of a Google service that lets you submit any URL for Google to analyze. They will grade the way your site appears on desktops and a mobile device. They grade you for things like:

  • Server Response Time.
  • Load images, CSS, and JavaScript above the fold.
  • If your text files are minified to remove extra white space.
  • Gzip compression support.
  • Image file size optimizations.
  • Avoiding redirects.
  • Browser cache instructions.

They also grade the user experience for users on a mobile device. This grade is very important. Google now warns users if they believe your site will not work on their device. You need your site to work well on a mobile device.

Check out the PageSpeed Insights report for Brand Builder Websites. Presently we’re doing very well on the desktop layout.

PageSpeed Insights report showing above the fold content for Brand Builder Websites' desktop site.

PageSpeed Insights report showing above the fold content for Brand Builder Websites’ desktop site.

Unfortunately we cannot control Pinterest’s servers to improve caching for their files. We either lose 1-2 points in PageSpeed or lose the ability for users to easily pin images on our site. I’m okay with 1-2 points for that functionality. Your mileage may vary.

We’re still pretty good for speed on mobile. And we’ve got a great score for the mobile user experience.

PageSpeed Insights report for above the fold content for Brand Builder Websites' mobile site.

PageSpeed Insights report for above the fold content for Brand Builder Websites’ mobile site.

Above The Fold: Prioritize Visible Content

The above screenshots show that we lost some points for the Prioritize Visible Content rule. What this means is that we have images located above the fold. Now I don’t know about you, but I like our site to have some images. With images the browser sends another request to download the file to display it. This causes a slight delay which explains the change to Authorship I mentioned earlier.

So what can you do? You can convert your images to base64 notation and inline them in the page. This brings up a few concerns:

  • The base64 notation for images larger than 2 KB are larger than the original size of the image and the HTTP headers. This means they’re downloading more content and slowing down page load.
  • Base64 notation is not supported by IE 7 and below. Hopefully this is not much of a concern for most sites.
  • Changing an image means that you must re-encode the file instead of uploading the new file.

You could alter the image tags to use a different src attribute and use JavaScript to reset the attribute when the image moves in to view. This process removes many optimizations inside web browsers for parsing resources. It also means that users without JavaScript cannot see anything on your site. Those users will already have a hard time and you’re just making it worse. Truthfully I don’t recommend this but it’s a valid option.

This doesn’t leave much else you can do. I wish I had good news with this. You need to decide for yourself if it’s worth including images above the fold. If you cannot base64 the images then you may want to move your social media buttons to the footer.

Above The Fold: Eliminate Render Blocking Resources

This rule is hard for most. Render blocking means that the browser will not stop drawing the page until it finishes executing the rules in the file. Basically Google wants you to move all display rules for above the fold content from your CSS files to inline content. You must move JavaScript inline or load it later.

Unless you’re hand-coding every page it’s unlikely you can move some CSS rules inline and load the rest below the fold. It’s also unlikely that your CMS is smart enough to parse your CSS files and do this for you automatically. This means you must inline everything or suffer some slowdown. Through trial and error I’ve found that it’s best to inline your minified but uncompressed files < =12400 bytes. Anything above this I recommend placing externally. I also recommend the same for JavaScript files.

JavaScript is even more extreme to your website than a CSS file. JavaScript could tell you to redirect to another page or reconstruct the page in other ways. This distinction is so critical that makes them parser blocking. Parser blocking means the browser will stop even working on everything to build the page until it finishes executing. If it doesn’t matter when the script runs you can add the async attribute to the external file. Doing so allows the file to download in the background, continue processing the page, and run when it can. This is a huge win for performance! …

… but you can do better. First remember that you don’t care when these files run so why not delay them from loading until you’re done constructing the page. Or maybe even after the page has finished downloading the pictures too. You can do this by adding an inline script creates a function to instruct the browser to download these files asynchronously. You then execute this file after the page has finished loading or called the DOMContentLoaded event. The DOMContentLoaded event is the time when the browser has knows about everything on the page, but isn’t done downloading external files like images. You might want to know what such a function might look like. Consider this:

<script type="text/javascript">
function downloadJS() {
	var el=document.createElement("script");
	el.async=true;
	el.src="foo.js";
	document.body.appendChild(el);
	var el2=document.createElement("script");
	el2.async=true;
	el2.src="bar.js";
	document.body.appendChild(el2);
}
if (window.addEventListener) {
	window.addEventListener("DOMContentLoaded", downloadJS, false);
} else if (window.attachEvent) {
	window.attachEvent("onload", downloadJS);
} else {
	window.onload = downloadJS;
}
</script>

This function loads the files “foo.js” and “bar.js” asynchronously starting at the DOMContentLoaded event in browsers that support that event, and then falls back to page load event for older browsers that do not support this event. This is the ideal solution for loading your content fast.

Now that you know the best ways to improve the speed of your above the fold content. Your users will appreciate these changes and you may see your site improve slightly in Google search. I’m sure anyone would be happy with that.

Thank you and keep building your brand.

This post was originally published as Above The Fold Speed Optimization for Brand Builder Websites.

Comments are closed.