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.

Above-the-fold-content

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