How To Load Any Page in Half a Second
by Ethan Glover, Tue, Dec 22, 2015 - (Edited) Thu, Oct 13, 2016
As Monday Note points out, the web is getting slower. News sites are especially guilty, but so many websites have lost sight of the importance of speed. Google has made more than one attempt to remedy this.
I've always been a speed freak. This site is static just to avoid the speed pitfalls of CMS' like WordPress. I've optimized this site in every way I know how.
That's why, as an experiment, I built this page. Granted, if you follow that link it's not too functional. Try to scroll and you'll get that familiar stuck in the sand feeling you get when visiting just about any link from the Google News homepage. But here's why that page is unique. It loads in half a second.
20 animated gifs, 20 videos from YouTube and Vine, 20 high-res images (most of them 4k), in three columns, and the page loads in 500 milliseconds? Your personal experience may be a bit different than that. But I want to use that page to compare something.
Here are the test results for the top page on Google News at the time of this writing.
Here are the results of my page linked above.
Are you seeing the difference? A is 6MB and loads in 3 seconds. B is 43MB in loads in half a second. If that news page were to use some basic speed rules, users wouldn't have so much trouble.
When you visit this site, while it is void of ads and pop-ups, it loads almost instantly. Here's why.
1. CDN - Almost every website uses a CDN, if they're not using one, they're missing out on one of the greatest, easiest fixes for site load time. My site is low traffic and survives fine on CloudFlare's free plan. That CDN is the difference between a 1-2 second load time and the current. When implementing a CDN is as simple as copy/pasting your home URL and a couple of name servers, especially when it's free, there's no excuse not to do it.
2. Google Pagespeed Module - Most people would look at Pagespeed Module and think any decent WordPress plugin can do the same thing. They'd be wrong. Wordpress plugins, even if built to give you speed, add a lot of work to your users bandwidth and browser. There's a lot of back-end nonsense going on in real time that just isn't worth it. Pagespeed modules do this work server side and add nothing extra. There's no real-time processing going on when someone loads your site, it's already done.
Tell me some WordPress plugins can do that as efficiently as a server side script and I'll show you a liar.
3. Google AMP Project - While AMP stands for 'accelerated mobile pages,' there's no reason not to use AMP with desktop sites. I don't bother with separate mobile URL's, what you see here is the same thing you get on mobile. Resize your browser and you'll be fine.
AMP has provided an excellent CDN for a few selected scripts to efficiently load almost every element you can add to a page. I'm using AMP on all recent images, YouTube embeds, and even to deter font loading.
4. Base-64 Encoding - Search engines won't index images encoded into a base-64 URI. But you don't have to do this with all your images. Just the ones you don't need indexed. My header image, the social buttons at the top, the RSS images on the homepage, the creative commons logo at the bottom. All encoded in base-64. All have a load time of precisely 0ms. Don't waste bandwidth on images you downloaded or embedded from somewhere else. Link your originals, encode everything else.
No, I didn't encode any of the external images on that example page. That's because I wanted to showcase Google AMP's lazy loading. With that much content, encoding it all would have increased the file size a great deal and may render encoding ineffective. If that's a problem for you, maybe you need more original stuff on your site.
5. Conditionally Load Scripts - I wrote a tutorial on how to load scripts permanently in your head file, only when you need them. I made that tutorial with static sites in mind. If you're using WordPress; first, I'm sorry, second, find a way to have full control over your head file. You need to be able to edit it yourself and use variables to do this. Most of the time, if you add MathJax or Google Code Prettify to your site with a plugin, they're loading on every page whether you use them or not. Don't do that. Fix it.
6. Inline all CSS - I don't have stylesheets on this site. Sure, I mentioned that I used Google Pagespeed Module to inline CSS, but only for awhile. The link to the stylesheet still remained. I want to make sure the browser is making as few resource requests as possible when loading a page. My head file is in a simple PHP document, and within that is all my CSS rules. I inline any exceptions or special cases within the site content itself. No need to load a stylesheet file when you've already got to load a head file anyway. Put it all in one.
7. GZIP and Browser Caching - GTMetrix gives great simple guides to compressing and caching your site. They'll help you reduce site size, and have browsers cache elements on your site. Both reduce load time significantly.
8. Outsource Comments - This one is going to be a little controversial. But social comment systems like Disqus and LiveFyre add load time. Sure, they're asynchronous, but that's not a magic cure all. The fact is, those scripts are still linked, loaded, and pull a lot of tracking and information from external servers. Social network comment plugins from sites like Facebook and Google+ are even worse. You know what? Just publish your page, share it, and link to those posts. Let people follow the link and comment on their favorite social network where they'll receive notifications that are better organized and easier to manage.
No, they won't get the emails that get them to come back to your site, but what a cheap way to get clicks anyway. Keep your users active on your social pages and you'll get better engagement benefits than some "new replies to..." email clicks.
9. Simplify Share Buttons - Do you really need everyone to know how many shares each page has? What do you think the benefit to that is? To show off? Go back to 1998 with the rest of the visitor counters. Your share buttons should be simple links within a CSS sprite. To make it simple, I recommend Share42.
There you go. Nine simple steps that could help that ridiculous news site load like a site in 2015 should. We can stream HD video without issue, but still have to wait for an article for 3 seconds before trying to scroll and getting surprised by a dumb pop-up?
I can hear the objections now. "But my advertisers..." Use AMP, sponsored posts and linking. Apply your ads to the principles above.
"My site has high traffic..." Get a better CDN and server.
"My site doesn't have a simple design like yours." Design isn't a factor.
"My third-party scripts!" If you can't speed them up right, find something better. Download the script for local use if you have to, or write your own. Just say no to bad experiences for your user. No cool script with great promises is worth making your site a crawling piece of garbage.
Discussion: Inbound - Reddit - Facebook - Google+ - Twitter