Google PageSpeed Insights: The Tech Stuff

Google PageSpeed Insights: The Tech Stuff

PageSpeed Insights is a tool created by Google to measure how fast your site loads. How fast your site loads is one of the key factors on how well your site ranks in the organic search results. Search engines like Google and Bing want to deliver the best possible result to their users, and a site that loads quickly helps enhance the user’s experience. Also, when indexing the pages on your site, search engines only allot a specific amount of time; if you have a page or several pages which load slowly, it may not be able to index other pages because it runs out of time.

The PageSpeed Insights grading system is much like school. 100 is an outstanding job, 50 means your failed. If you can get a C (between 70 and 75), you’re doing an OK job. If you can get above an 85, you have a high performing site, which can lead to good things.

The only problem with PageSpeed Insights is that there is a lot of technical mumbo jumbo that a lot of website operators do not understand. Today I am going to cover just a few of the rules by which Google grades your page.

Eliminate render-blocking JavaScript and CSS in above-the-fold-content

Let’s break this statement down into 2 pieces:

Render-blocking JavaScript and CSS

In modern websites, both JavaScript and CSS are seen as necessary components for a rich user experience, but what are they?

JavaScript is a scripting language which is generally used to add functionality, and sometimes a little jazz, to a website. Things like dropdown menus, slideshows and validating form elements are done by JavaScript.

CSS, or Cascading Style Sheets, are sets of instructions given to a browser to determine how a particular element looks. You can set such things as font size, background color and margin around an object on the page to make it look exactly how you wish.

In many modern websites, particularly those built with an off-the-shelf content management system (CMS) like WordPress, Joomla or Drupal, the number and size of the JavaScript and CSS files can become enormous.

Render-blocking refers to the fact that the page cannot be displayed as intended until the resources have been loaded. Even with fast internet connections, repeated trips to the server to retrieve files can be time consuming.

Visual fix: It is faster to go to the grocery store once to get milk, bread and eggs than it is to go to the store, buy milk, come home, go to the store, buy bread, come home, go to the store, buy eggs and come home.


This is an old newspaper term. If you look at a newspaper you pick up at the store, they put their most intriguing stories and headlines “above the fold”, meaning the part you see without having to touch the newspaper.

For websites, above the fold refers to the part of your website that appears before a user scrolls. Just type in your URL into the address bar and load your page. What you see on the screen, before you do anything else, is “above the fold.”

Putting it all together

One of the key factors in your PageSpeed grade is how long it takes before the page will be properly displayed to the user so they can begin navigating your site. The less time it takes, the higher your score for this rule.

With most content management systems, the fix is relatively simple. Most CMS systems have plugins, often free, that you can download and install into your site that will combine all of the JavaScript files into 1 file, and all of the CSS files into another file, reducing the number of trips required to retrieve the necessary content. While this may not totally eliminate the problem, using the visual fix as an example, it will be a lot faster making 2 trips to the store as opposed to 20 or 30.

Minify HTML, JS and CSS

HTML, JavaScript and CSS files are usually written by humans. As such, they need to be in a legible format for the human so they can debug any errors that arise, or add or change functionality as necessary.

Browsers, however, don’t need that. They read files, line by line, and when they have everything, then they decide what to do with it.

To make things load faster in the browser, you can edit your HTML, CSS and JavaScript files and remove things like hard returns, blank lines and comments to make the files more compact. But before you do, make sure you make a backup of your files. You may need to change something at a later date, and you will want the readable versions of your files.

If you are performing the steps outlined above for eliminating render-blocking JavaScript and CSS, then generally you won’t have to perform these steps, as this function is usually done by the plugin.

Optimize Images

When viewing a web page, it helps to have an image that compliments your content so that the user can more easily visualize the topic of your content.

At one time or another, you’ve been to a website, and seen a hole in the page, and wondered what belongs there. Then after a second or two, you see an image pop up.

On one of those trips to the store mentioned earlier, you picked up a fully assembled entertainment center and are now trying to bring it home in the trunk of your car. You have to drive a little slower.

Optimizing your images, by reducing the dimensions of the image to the largest needed size and by enabling compression, will turn that fully assembled entertainment center into a box of wood and screws that will be put together once it gets home (i.e. the browser).

Third party software and websites, such as  Kraken, will take your image files and reduce them even further, which reduces the overall size of a web page, thus increasing its load speed.

Size tap targets appropriately

While this has nothing to do with how fast your page loads, it does play a part in the user experience on a mobile device.

When creating a page for mobile visitors, you have to remember that a fingertip is not as precise as a mouse cursor. You need to leave a little room between links so that the user doesn’t have to worry about accidentally clicking on the wrong link.

Add a little padding with CSS to each link, which will separate it from others around it.

Other PageSpeed rules

Other PageSpeed Insight rules, such as enabling compression and leveraging browser caching, require a higher degree of technical knowledge and should not be attempted by those unfamiliar with server software. An experienced web designer or developer should be able to help you with these items.

xclntDesign can help

If you’re looking to get the most out of your web presence, then  contact xclntDesign today. Our knowledge of web design and development, along with the various items that search engines love to see in websites, can vault you to the top of the list in your industry.

Curious how your website performs with Google PageSpeed Insights?  Click here to check!

Return to Blog Home

Some of our most recent work.



GSI is a low-voltage company that specializes in security and data cabling.

Their existing logo spelled out the company name; they wanted to take focus off the security part of their name to promote their other services, so we just went with the initials in a new logo, showing off a connected globe.

Mid-Florida Agencies

Mid-Florida Agencies

Brand new website for a local health insurance agent's office. They have existing corporate branding, so we took that and expanded on it. Our concept was to create something that was both professional and inviting. We used fun graphics and the corporate colors throughout.

Visit Site

Professional Waterfront Cleanup

Professional Waterfront Cleanup

Website redesign for a waterfront property cleanup company from Leesburg, Florida.

Professional Waterfront Cleanup has been a client of ours for a number of years, and every few years, we suggest a refresh of their website. This keeps the design modern, and the content can be changed to match the evolution of the company's business model.

Visit Site

Gator Clean

Gator Clean

Launch of a redesigned responsive website for a carpet and tile cleaning company in Lake County, Florida.

Gator Clean had a story to tell, and chose use to tell it. The owner's daughter had become ill, and during a trip to the ER, he was asked "Did you recently have your carpets cleaned?" When he answered yes, he was told that the disease his daughter had developed could have been caused by the toxic chemicals used by some carpet cleaners. He vowed to not let that happen to anyone else, so he started Gator Clean, using non-toxic cleaning agents to keep people and pets safe.

Visit Site

Got Watts Electric

Got Watts Electric

This was a complete redesign. Got Watts has been a long time client, and they recently refocused their business on electrification, or utility grid independence. So they need a new, dynamic site to reflect this change, and to focus on the main services they offer.

Visit Site