For the second part of our Google PageSpeed blog post series, we’ll be taking a look at more advanced techniques to adhere to Google’s recommendations. If you haven’t had a chance to read the first part to increasing your Google PageSpeed score, start now! Recalling on the Google PageSpeed insight rules, the speed rules include the following:
Avoid Landing Page RedirectsEnable Compression- Improve Server Response Time
- Leverage Browser Caching
- Minify Resources
- Optimize Images
Optimize CSS Delivery- Prioritize Visible Content
Remove Render-Blocking JavaScriptUse Asynchronous Scripts
We’ve already covered avoiding landing page redirects, enabling compression, optimizing CSS delivery and removing render-blocking JavaScript in our first part. In this blog post, we’ll be taking a look at prioritizing visible content, minifying resources and optimizing images.
Note: The following recommendations below assume you fully understand web development best practices as well as server software programming, HTML, JavaScript and CSS programming. If you aren’t too sure of these techniques described, give us a shout and we’ll help you out!
Contents
1. Prioritize Visible Content
Putting an emphasis on giving users a high quality mobile experience, Google states “having a mobile-friendly website has become a critical part of having an online presence”. As such, they recommend ensuring that the above-the-fold content of the page is rendered quickly and efficiently.
Above-the-fold is the portion of the webpage that is visible without the need to scroll down. Ensuring the above-the-fold content displays quickly, prevents waiting time for the user. However, if the data exceeds the initial congestion window (a self-imposed variable that limits the amount of data that can be sent), then additional back and forth data transmission between your server and the user’s browsers will occur. This in turn creates a slower and delayed page load for the user.
In other words, if the above-the-fold content isn’t loading quickly enough, users are more likely to leave. The above-the-fold content is the first touch point for most users and they are less likely to stick around for the rest of the webpage to load if the above-the-fold content can’t even load quickly and properly.
What to do:
- Structure your HTML to load the critical content first:
- Identify the critical content of your webpage. For example, if the page is an article, the body text and images are the most critical content. Third-party widgets may fall as secondary items that can be deferred.
- Ensure the critical content of your webpage loads first. Structure your HTML such that the critical content is rendered immediately. For example, you may want to inline a portion of the CSS into the HTML file to ensure the styling of the critical content is rendered first, while the rest of the page is styled after the CSS file is rendered later.
- Reduce the amount of data used by enabling compression and/or minifying resources:
- Reduce the size of your HTML, CSS and JavaScript files by enabling compression. As discussed in our previous post, to enable compression you will need to make updates to your .htaccess file.
- Minify your HTML, CSS and JavaScript files, which is discussed in detail below
2. Minify Your Resources
Ensure the sizes of your resources are reduced to allow faster transferring of data. Reducing the size of your files will require less data to be transferred from your server to the user’s browser, thereby making the above-the-fold as well as the entire page load much quicker.
What to do:
- After writing your HTML, CSS and JavaScript code, you can look at ways to reduce the file size by removing unnecessary or redundant code, unused code and applying shorter variable and function names. Although it may be against code-writing best practices, you can also remove commenting, formatting and removing whitespace altogether. For example, the following CSS code is 953 bytes and has commenting, formatting, whitespace as well as redundant code:
/* ## Headings
——————————————— */
h1 {
font-size: 36px;
font-size: 3.6rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h2 {
font-size: 30px;
font-size: 3rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h3 {
font-size: 24px;
font-size: 2.4rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h4 {
font-size: 20px;
font-size: 2rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h5 {
font-size: 18px;
font-size: 1.8rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h6 {
font-size: 16px;
font-size: 1.6rem;
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
This code can be significantly reduced to 311 bytes by removing the redundant code, comments, formatting, and white space:
h1,h2,h3,h4,h5,h6{color:#333;font-family:Lato,sans-serif;font-weight:400;line-height:1.2;margin:0 0 10px}h1{font-size:36px;font-size:3.6rem}h2{font-size:30px;font-size:3rem}h3{font-size:24px;font-size:2.4rem}h4{font-size:20px;font-size:2rem}h5{font-size:18px;font-size:1.8rem}h6{font-size:16px;font-size:1.6rem}
- It may become taxing to minify all your resources manually, especially if you have a large website. Luckily, there are free tools available online to minify your resources for you. A simple search for “HTML minify”, “CSS minify” or “JavaScript minify”, will result in various tools you can use. The fall back with using these tools as well as minifying these resources yourself is that the code needs to be minified again whenever you make any updates or changes. As an alternative and depending on the CMS you use, you can automate the process by leveraging plugins. For WordPress and Drupal sites, there are many minify plugins available that can minify HTML, CSS and JavaScript individually or all at once.
- As a last alternative, you may also want to use Google’s PageSpeed Module if your server is Apache or Nginx. There are various filters that help optimize your website’s page speed inclusive of reducing resources sizes such as Minify JavaScript. Take a look at their mod_pagespeed documentation for more information.
3. Optimize Images
Ensure the file size of images is reduced without significantly impacting their visual quality. Reducing the size of your image files will require less data to be transferred from your server to the user’s browser, thereby making the above-the-fold as well as the entire page load much quicker.
This may require its own blog post in the future since there are plenty of best practices and image optimization checklists to do. It also really depends on how your website is structured: if your website is highly visual than a much more thorough optimization strategy is required. However, if your website has some images here and there, there are quick and easy things you can do.
What to do:
- Ensure the images are served at their native dimensions and specify the width and height in the img tag to prevent “popping” when the page is loading
- Compress your images to reduce file size. Try using PNG files as they are lossless formats and do not make any visual modifications to the image.
- If you’re using JPEG files and are compressing the images, try to reduce the quality below 85. Past the quality of 85, the file size becomes larger but doesn’t improve visually. Compress the image as low as possible without losing visual quality.
Develop With File Size in Mind or Use Tools To Optimize
These recommendations are best executed during the designing and development stage of building the website. Arranging the structure of the content beforehand can prioritize and serve the critical content to users right from the start. Programming HTML, CSS and JavaScript and optimizing the images with the file size in mind ensures a quicker page load right when the website goes live.
In most cases however, these items may be overlooked or unnoticed during the development stage. To act on these recommendations long after a website has been live, we can leverage: enabling compression, minifying resources and image compression.
As noted in Part 1, every website is different and there are little nuances that make your website unique. It’s very important you test these recommendations first before implementing them.
As always, if you have any questions or comments regarding these recommendations, feel free to comment below. We’d love to hear your thoughts, feedback and/or grievances. Thanks for reading!
Resources
https://developers.google.com/speed/docs/insights/rules
https://developers.google.com/webmasters/mobile-sites/
https://blog.stackpath.com/glossary/cwnd-and-rwnd/
https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript