Page Speed Insights Guide Rocketship Animated Intro

Page Speed Insights Guide

The Importance of Website Performance & How To Improve


written by

originally published on September 1, 2016updated 11/06/2016, 12/06/2016, 12/18/201601/05/2017

Guide Overview

The page speed insights guide explains just how critical website performance is for the success or failure of a website. This guide also lists the many benefits increased website performance can have on an organization. It goes so much further than just faster loading times.

This guide clearly defines "page speed" and "site speed&qwuot;.

Page Speed Insights Guide Sections

  • Search Engine Ranking Factors
  • Available Performance Resources
  • Website Testing Applications
  • Compression and Minification
  • E-Commerce Trends and Case Studies
  • Optimize Redirection

Please Note

At Smallwood Consulting, as a rule we always try to list as many non-technical optimization techniques as possible. However, there will be some advanced solutions listed that will require the help of a technical professional.

  • Technical Search Engine Optimization
  • Website Performance Best Practices
  • Development Languages and/or Content Management System Expertise

Page Speed & Site Speed, What's the Difference?

PageSpeed measures web page total load time from start to finish. So when measuring PageSpeed, the timer does not stop until every piece of code on the entire page loads from start to finish.

PageSpeed is often confused with the term SiteSpeed. SiteSpeed is an entirely different calculation. SiteSpeed only measures "above the fold" content load time. "Above the fold" is the screen a user sees immediately prior to scrolling down.

Most websites now are optimized so users can begin interacting with content while code continues to load below the fold. "Below the fold" represents everything below the screen users cannot see without scrolling.

Mneumonic Device To Always Remember What Differentiates Page Speed & Site Speed

Page Speed measures the loading time of the entire "PAGE"
While
Site Speed measures only what you can "SEE" when the page loads.

Which Ranking Factor Carries More Weight, SiteSpeed Or PageSpeed?

Both site speed And page speed are known and documented search engine ranking factors. Is has also been stated that page speed has a higher weighted value.

At the time Google announced the inclusion of web performance as a ranking factor in 2010, the actual value was considerably low1. As time has passed, the value has increased.

At the time of release, the 2010 Google Webmaster Blog article listed below does not distinguish between the terms page speed and site speed. Read the article as if both terms are synonyms1.

1 Using site speed in web search ranking () 9 April. Available at: (Accessed: 5 November 2016).

Speed Achieved Through the Efficient Use of Resources

A great analogy for website performace goals is Elon Musk's Tesla S. The Tesla Model S accelerates from 0 to 60 mph in as little as 2.5 seconds is an electric vehicle capable of driving over 300 miles per charge2.

2 Model S () Available at: (Accessed: 29 October 2016). (Model S, 2016)

Website Performance Testing Guide

Google Page Speed Insights

High Speed, Low Resources Tesla Vehicle

The Future of Low Resource, High-Performance Vehicles, Tesla, and an excellent website performance model.

Visit Google Pagespeed Insights and enter your website URL to learn how that currently scores.

Initially aim for a score of 70-80 for both desktop and mobile tests. Review some of the bullets for improvements.

Excellent Google Resource

Upon finishing and while viewing the desktop results scroll down. You should see a sentence in smaller print with the option to download optimized versions of your current resources. Essentially, Google minifies CSS and JavaScript files. The folder also contains optimized images for the tested pages. Just download, unzip and update.

As a best practice, never delete old files and images.

Page Speed Case Studies

User Experience & Behavior Studies

How often does a user close a web page because of slow loading time?

How often are shopping carts and potential sales completely forgetten due to slow loading times?


Amazon & Google Case Study

At Amazon.com, a PageSpeed study revealed a shocking statistic. Amazon calculated that a one second decrease in load times would result in a $1.6 billion yearly revenue loss. That's right, One second equals $1.6 billion loss. Imagine the economic implications that could result from a one second difference. Hypothetically, the US unemployment rate would likely change based a $1.6 billion annual loss 3.

Google calculated that if search results took just 0.4 seconds longer they would lose eight million searches a day 3.

3 () 'How One Second could cost Amazon $1.6 Billion in sales', Fast Company, 30 July. Available at: (Accessed: 29 October 2016).

9 Ways To Decrease Load Times & Increase Website Performance

Increase Performance, Search Engine Rankings & Website Sales

This section has been created to be as nontechnical as possible by providing user-friendly resources and tools. However, some solutions below will require technical development experience.

Web performance is an included segment within the LouisvilleWebsiteBuilder.comaffordable SEO packages.

If you have questions regarding the implementation performance option below or are just curious about our services, please call or text (812) 406-8040 or email us.

1. Throw Away Unused Code

First things first, get rid of any unused code from your website's CSS, Javascript and HTML files. CSS files can be extremely large and it's not uncommon to see a 15,000 line CSS file. A great way to check this is by using Google Chrome's Developer Tools.

Google Chrome Developer Tools Website Audit Instructions

Step 1: Open your website using Google Chrome and press the F12 key
Webpage Audit Instructions Using Google
Step 2: Under the "Audits" tab, select "Reload Page and Audit On Reload"
Select The Webpage On Reload Checkbox
Step 3: Examine The Results
Google Chrome Performance Audit Results

2. Minify Your Code

Minify Code Example Picture

Minified Code Should Look Like Unreadable Gibberish.

Remove spaces, comments, and blank lines for additional load time decreases. Once that is finished, make everything on one single line, which makes it more machine readable which in turn increases speed.

  Cloudflare  

Considered by Smallwood Consulting to be one of the most beneficial website services available

Cloudflare offers both free and paid website performance and security services.

The Cloudflare free service automatically minifies your scripts at execution so you don't have to.

To get started, visit Cloudflare.com and register. Then, login to your hosting provider which could be GoDaddy, JustHost, BlueHost or NameCheap. All you need to do is change your nameservers to start receiving benefits.

Resource Minification Links


3. Combine JavaScript and CSS Website Files

JavaScript Files use the .js File Extension

Place all Javascript code into one file and name it combined.js. The javascript files will most likely reside in the footer code of your website. In most cases, placing JavaScript files within the footer is a best practice. This ensures JavaScript files do not slow down loading times. Here is an example of the JavaScript code in your website's footer.

Footer Code Example

<script href="http://www.louisvillewebsitebuilder.com/js/jquery.min.js"></script>
<script href="http://www.louisvillewebsitebuilder.com/js/main.js"></script>
<script href="http://www.louisvillewebsitebuilder.com/js/jquery.dropotron.js"></script>

After Combining Your Files, This Is The Result.
<script href="http://www.louisvillewebsitebuilder.com/js/combined.js"></script>


Cascading Style Sheet Files - .css File Extension

Next, do the exact same thing with all CSS files and name the file combined.css. Almost finished. The last step is changing your website head tags to reflect the changes. Here is an example of the head section of a website.

Head Section CSS Stylesheet Tag Example
<link rel="stylesheet" href="http://www.louisvillewebsitebuilder.com/css/main.css"/>
<link rel="stylesheet" href="http://www.louisvillewebsitebuilder.com/css/bootstrap.min.css"/>

New CSS Tag Example
<link rel="stylesheet" href="http://www.louisvillewebsitebuilder.com/css/combined.css"/>

Congratulations. You have just reduced server requests across your entire website! Give yourself a pat on the back.


4. Limit Redirects

Remove 301 Redirects Image

Redirects are the website equivalent of road detours. They increase loading times for website visitors. Always use the 301 redirect to pass link authority. Do not use 302 redirects. Minimize 301 redirects as much as possible by updates links and navigation throughout your website.

Two recommended 301 redirects are "www" to "non-www" and http to https (or vice-versa). If your website utilizes an .htaccess file add this code for a "www" redirect.

Sample .htaccess File Segment

RewriteEngine on RewriteCond %{HTTP_HOST} !^www\.your-website\.com [NC] RewriteRule (.*) http://www.your-website.com/$1 [R=301,L]

Make sure it's written "exactly" as above replacing "your-website" with your domain name.

You should also have your website setup for "http" or "https".

Resources

The Redirect Check will list the redirects for any given link. You might be surprised at what you find.

Redirect Check Sample Results

This website, LouisvilleWebsiteBuilder.com, redirects to the "www" version. As you can see below, the website is redirecting properly.


louisvillewebsitebuilder.com
HTTP/1.1 301 Moved Permanently
Date: Fri, 16 Dec 2016 23:11:15 GMT
Server: Apache/2.2.31 (Unix) mod_ssl/2.2.31 OpenSSL/1.0.1e-fips DAV/2 mod_bwlimited/1.4
Location: http://www.louisvillewebsitebuilder.com/
Cache-Control: max-age=2592000
Expires: Sun, 15 Jan 2017 23:11:15 GMT
Vary: Accept-Encoding
Content-Length: 399
Content-Type: text/html; charset=iso-8859-1

>

http://www.louisvillewebsitebuilder.com/
HTTP/1.1 200 OK
Date: Fri, 16 Dec 2016 23:11:17 GMT
Server: Apache/2.2.31 (Unix) mod_ssl/2.2.31 OpenSSL/1.0.1e-fips DAV/2 mod_bwlimited/1.4
Cache-Control: max-age=2592000
Expires: Sun, 15 Jan 2017 23:11:17 GMT
Vary: Accept-Encoding,User-Agent
Pragma: no-cache
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Expires: -1
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8


5. Leverage Browser Caching (pronounced "cashing")

Browsers download and store information on your visitor's computers to improve performance on repeat visits. There are multiple ways to implement this enhancement.

Important Note

Be careful, though, especially if you frequently change your website. Please consult a developer to implement this solution.


6. Improve server response time

Your server response time is affected by the amount of traffic you receive, the resources each web page requires, the software your server uses and the hosting solution you use. To improve your server response time, look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and fix them. The optimum server response time is under 200 milliseconds.


7. Get A VPS or Dedicated Server for Serious Speed Increases

VPS Server Image

Most websites use shared servers, where everyone shares resources. It's the equivalent of everyone sharing an apartment and using the same resources. A VPS or Dedicated server offer a large jump in speed, but it comes with a price. If you are willing to pay for it, all it takes is a phone call to your hosting company and they would be more than happy to set that up a VPS or Dedicated Server for you.

Smallwood Consulting Hosting Services

At Smallwood Consulting, we currently offer a semi-managed hosting service on our VPS server. The benefits are faster speeds, custom options and hands-on support. This is by request only and approved based on website requirements.

Don't hesitate to reach out and contact us to get up and running today.

Download The LouisvilleWebsiteBuilder.com Hosting Service Options PDF


8. Content Distribution Network

Content distribution networks, or CDNs, are offered as a way to greatly improve website speed for users located around the globe. The website is uploaded to multiple servers around the world.

Copies of your site are stored at multiple, geographically diverse data centers so users have faster, reliable access to websites regardless of location.

Advanced Technique

A content distribution network is suited to high-traffic sites with geographically diverse visitors. A great site to learn more about CDN service options is GT Metrix. This is also a favorite website to run performance tests.


9. Optimize Your Images

Image optimization can have dramatic effects on pagespeed. Typical image sizes when using current phone or camera technology can easily result in 10MB filesizes. This is great for image resolution and quality but not web publishing.

First, start using correct image formats. Use PNG files for graphics with sixteen colors or less and/or require a transparent background. JPEGs are better for photographs.

Convert PNG and JPEG files to WebP, a more optimized image format.

"Lossless" image compression. Lossless compression reduces file sizes without sacrificing image quality. There is a large selection of available free tools to compress images.

Conclusion

I hope this article has provided an understandable PageSpeed explanation with valuable guidelines and tips for performance improvements. Utilizing the above methods correctly will result in increased search engine ranking positions.


Please post any feedback, suggestions or resources below.