Google’s PageSpeed Insights is a free tool offered by Google that helps you tell how fast your page is loading. Load times are critical for both the front end user experience, and the back end analytics that Google uses to rank your webpage. 

Why Do I Need a 100% Score?

Nobody likes a page that slowly emerges from the back of the screen like a car pulled out of the water, dripping with buffering and rendering images. Google knows this, and they’ll make slow-loaders take a rankings hit to optimize the search experience.

Turns out satisfying the searcher query also includes the concept of doing it quickly. If you want to rank, pump the gas on that Google PageSpeed Insights to 100.

Google’s recent analytics on mobile page loading shows that, as you might know from googling anything from your smartphone, webpages are not optimized for mobile loading.

Bounce probability (the number of users who leave after only viewing one page) increases incrementally with page load time, it increases 90% between a 1-3 second and 1-5 second load time, skyrocketing away from there. 

As load time decreases, more people stay on your site longer, especially on their smartphone. We’ve all frantically tapped the home button after navigating to a page that loads like molasses. Don’t let that be your page.

Fast Loading Page Optimization Tips

The tool is a wonderful starting place for testing your page speed, but it can be kind of technical, so let’s look at some of the things you might encounter. The way you’re going to score 100% is by completing the fixes that Google has for you, which will be specific to your page. But here are some more common things to look at:

Minify HTML/CSS

Minifying is the process of removing unnecessary and extraneous characters from the HTML to help it read quicker. Google’s developer page on minifying offers a few resources they recommend for the process, because I guarantee it is not something you want to be doing manually. The process of minification will vary depending on the solution, but will generally: 

• Remove unused code that may have slipped through the cracks in a rewrite
• Shorten code where it can, by renaming tags if it has to
• Remove comments
• Reformat the script by removing line breaks and unnecessary spaces that take longer to read and don’t contribute to your code

The less empty space and unnecessary characters that the website has to process, the quicker it will load. It was nice to have that paragraph length comment about what the <h1> tag should be, but now that the page is up and running, such code should get axed. It’s also nice to be able to write line by line HTML and have it optimized by removing the spaces. It can look clunky to write that way.

Optimize Resources

No matter how clean your HTML looks, you’ll still get slowed down by huge images and large audio files. Compress things with one of the many free compression tools on the internet to optimize load times while maintaining quality content.

Remove Render-Blocking Code

This will be a common one, and you’ll notice it’s the only place that Google PageSpeed Insights fails its own test. Render-blocking JavaScript is any instance of JS that has a script that blocks the rest of the render, especially external scripts. 

You can get around the external scripts by using inline content, but be warned that inline content is typically less powerful and also must be small to actually save load time.

Inline CSS cuts the HTTP requests and optimizes the order of load events. You won’t render quickly if the webpage has to reach out for external documents before beginning the layout. 

While inline CSS has some limitations, certainly, it can be a great option to optimize the load speed and order of your page. Note that this might only be actually beneficial for smaller projects. Anything too big, and it will bog down your HTML and it would’ve been quicker to use internal or external CSS calls.

“Kill Your Darlings”

There’s a great (or infamous) piece of hackneyed advice in writing that says you often need to be willing to “kill your darlings.” When you create something, like a book or a website, the thing often takes on an emotional life in your head. We become attached to a scene or an image that really should be removed to help the plot or loading time, but we can’t bring ourselves to do it.

Your webpage might have a graphic mock-up, bit of text, fancy plugin, or (hopefully not) clunky auto-playing audio file that really really needs to go. 

Part of page optimization and high load time is being willing to cut not just unnecessary code, but unnecessary content that slows you down. Don’t overuse plugins. Don’t go overboard with the CSS formatting. Don’t slow down your page with the unnecessary. 

Use AMP (Accelerated Mobile Pages)

Google’s AMP program is an HTML formatting procedure that helps your pages run lightning fast, especially on mobile. AMP’s basic move is to limit the number of HTTP calls that occur in page loading. 

AMP selectively pre-renders content from related links and prioritizes resource downloading. Web fonts take a lot of time, so AMP processes fonts early in the chain and doesn’t run HTTP requests until all the fonts have started. AMP uses only inline sheets for CSS, which removes HTTP requests. The inline sheets can only be 50 kb. AMP can load page layout first because the HTML must specify resource size before they download.

Conclusion 

Ironically, if you enter the Google PageSpeed URL (https://developers.google.com/speed/pagespeed/insights/) into Google PageSpeed Insights, you’ll find that Google’s own score for their own page about optimizing page speed is 100% on desktop and 93% on mobile. 

Their recommendation (to their own web page) for increasing mobile speed is to “[c]onsider delivering critical JS/CSS inline and deferring all non-critical JS/styles.” If it brings you any comfort, Google’s own page isn’t optimized for mobile. We’ve all got a ways to go.

To speed up your page you’ll need to look at the way that the resources are structured (compressing files, “kill your darlings”) and optimize the rendering order (minifying, removing external scripts). For mobile pages, scoring a Google AMP recommendation is huge for ranking on the front page of a mobile browser.

Use the tips here and go for that 100%!