How to improve page speed

How to improve page speed

Do you know your page speed?

Did you know that page speed affects your Google search ranking? Have you tested your page speed using Google PageSpeed Insights? Do you Know what affects your page speed? Do you know how to improve page speed? I discussed the topics of Google Page Speed briefly in How to Rank Better in Google Search. Now lets open up the hood together and see how it all operates.

What is Page speed insights?

Page speed insights is a tool that Google has programmed to fetch your website for mobile and desktop versions. The Page Speed Score ranges from 1 to 100 with 1 being the lowest possible score. Any score above 85 is a good score, this means your site is performing well. I still wouldn’t stop there though. If you can increase your page speed higher by resolving some of the issues do it.

Google is constantly changing algorithms and calculations to make the scoring more accurate so this score may change. For instance the images for My wife’s blog Naturally Made with Love were fully optimized. Now Google says that they can be compressed another 4.5KB average. It isn’t in the red zone because it’s not that much of a compression, so I will not go back and re-compress the images. It only affected the page speed a couple points and to me it isn’t worth the time. I will make the newer post up to date with the new algorithm. The higher your score the more likely you will rank better in search. Google uses 10 factors when calculating your page speed score they are:

  • Server response time
  • Leverage Browser Cache
  • Render-blocking JavaScript and CSS files
  • Prioritizing visible content
  • Minify JavaScript
  • Minify HTML
  • Minify CSS
  • Landing page redirects
  • Compression
  • And MOST importantly Optimized Images

Now that we know what each part is lets get a little dirty and really get our hands in there.

What is server response time?

According to the International Organization for Standardization Information Technology Vocabulary, server response time is the elapsed time between the end of an inquiry or demand on a computer system and the beginning of a response; for example, the length of the time between an indication of the end of an inquiry and the display of the first character of the response at a user terminal. That’s the technical definition. So what does it really mean?

When you click on a website it sends command to the websites server. Now your website will go through all of the files that need to load before it can load the first letter, image, or graphic. After it loads all of the necessary files it will then display the initial screen. Google calculates the time it takes from when the click on your website to the time it displays on their monitor.  They like to see pages load under 200ms. Lowering your response time will help improve page speed. There are dozens of factors that can cause slow response time. The main causes are:

  • Slow application logic
    • Application logic includes your theme and your plugins. The more plugins you are using the more time it takes to render the page. Decreasing your plugin usage will improve page speed. Also poorly designed plugins and themes can affect your response time. You can use the P3 Profiler plugin by GoDaddy to test your plugin and theme load times. If one plugin has a high load time try to find a similar plugin. Some plugins may conflict each other and cause serious problems to loading your site.
      • How to fix Application Logic errors
        • There are a lot of plugins out there. Always use a trusted, regularly updated, better rated and recommended plugins. Remove unwanted plugins and update your plugins regularly. Generally free plugins are not well written and optimized.
        • When selecting a theme, a paid theme is usually better programmed than a free theme. Also these paid themes will typically provided you with excellent support. However if you are choosing a free theme select one that is updated regularly and responsive. This will help with the mobile version of your site. If the theme you prefer isn’t responsive we offer a Mobile friendly child theme service to make any theme responsive.
  • Slow database queries
    • A database is very important for your website. All the information is stored here. Think of this like your computer or smartphone. When your computer or smartphone is new it runs super fast. Then you start installing applications, taking pictures, videos etc. Each one of these things takes up a slot of  memory on your device. The more you have on your phone or computer the less memory you have available for the system to run. Now your phone is starting to get sluggish, possibly freezing up at times. How do you fix that issue? Move your pictures and videos off your phone and sometimes uninstall some applications. Now your phone is starting to move a little quicker. Websites function in the same manner.
      • How to fix Slow Database Queries
        • Before attempting to optimize your database you need to understand how it works. You can also hire a database scientist to help, but that may get costly. The best way is to limit your post revisions to a smaller number, remove any spam comments and empty your trash. Sometimes this isn’t enough though and the database doesn’t delete your old revisions completely. If you are using WordPress the best tool for this is WP Optimize. This plugin can remove any unwanted data from your SQL Database. Proceed with caution, once it is removed it can not be undone. Clearing out your data base of unwanted files is a sure fire way to improve page speed.

How do you leverage browser cache?

Browser cache is when your website stores static images and files in the database. This allows the server to render it without having to download each time your site is visited. Any time the server has to download information it slows down your render time. It cost extra data and bandwidth for your website and its user’s. Google recommends having a 7 day cache minimum. However, for a static file that rarely changes Google recommends up to a year. Using browser cache will improve page speed since it will no longer have to download each image every time your site is loaded.

  • How to fix Leverage Browser Cache
    • If you are using WordPress the easiest and quickest way is to use the Far Future Expiry plugin. This plugin will automatically edit your .htaccess file and set your browser cache expiration. You can only cache a file that is stored locally on your server. If google says that a file isn’t cached look at the url of the file.  If you do not use WordPress but you do have access to your .htaccess file through your hosting account, you can manually enter in the expiry like this:
      • #Expire Header
        <FilesMatch “\.(ico|jpg|jpeg|png|gif|js|css|swf)$”>
        ExpiresDefault “access plus 2 hours”
        </FilesMatch>
        or
        # Expire images header
        ExpiresActive On
        ExpiresDefault A0
        ExpiresByType image/gif A2592000
        ExpiresByType image/png A2592000
        ExpiresByType image/jpg A2592000
        ExpiresByType image/jpeg A2592000
        ExpiresByType image/ico A2592000
        ExpiresByType text/css A2592000
        ExpiresByType text/javascript A2592000
        A2592000 means 1 month in the future (60*60*24*30=2592000)

What is render blocking JS and CSS?

Render blocking means the server has to load the JavaScript and CSS first before it can display any information. This can be a big issue if you have several render blocking files. It can make the difference from a 200ms load time to a 10 second load time. This will definitely help improve page speed. Most readers will click off a website if it doesn’t load within 2 seconds.  You could be losing a lot of potential clients or readers. The more external files you have the longer your page load times are. This is due to the fact that your server has to download those files before the page can be displayed.

  • How to fix render blocking JS and CSS
    • All JS and CSS files should load asynchronously with the page. This means that they load while the page loads, and the page is not waiting to load all scripts before it displays. However, if you async the above the fold CSS your website will flash a page with no styling. To avoid this you need to inline your critical CSS in the html. Critical CSS is all the information required for the above the fold content to display. I use the Above the Fold plugin to set the critical CSS as well as async the rest of the CSS. This is a very technical plugin so proceed with caution. Keep in mind, we have Plugin Setup as one of the many services we have here at BtBB.

How do you correct “Prioritize visible content”?

Prioritizing visible content works the same way as Critical CSS in the above the fold content. This means that your above the fold content is too large for one trip of parsing the html. Google recommends a maximum of 14.6kb after compression. We will get into compressing CSS a little later. If you are getting this error and haven’t set your critical CSS. I recommend starting there, as this usually fixes the problem. There are some instances where after setting the Critical CSS is not enough and you are still getting the error. So what do you do now?

  • How to fix the prioritize visible content
    • When you receive this error, it simply means that there was too much data to download for the above the fold section of your website. Fixing the Critical CSS usually fixes this, however, sometimes there is still too much information. What you do now is minify your critical CSS and compress it. Remember Google likes to see a maximum of 14.6kb after it is compressed. We will delve deeper into minifying CSS in the next topic.

How to Minify JavaScript, HTML,  CSS.

JavaScript, Html and CSS are a massive groups of code. When a website, plugin, or application is developed, the maker will use a single line for each command or code. They will also put comments in the coding for others to understand when editing it. However, this creates white space and unnecessary data for servers to download. This will result in lower page speeds. How do you improve page speed by minifying these?

  • How to fix the minify error
    • There are several plugins and resources out there to help minify your CSS, JS and HTML. Unfortionately some of them do not work. I have found the Autoptimize plugin to be the best at optimizing these files. For the most part this is an on and off switch plugin, but there are some areas of customization that require technical expertise needed to get the most out of the plugin. There are also some web applications that will minify your files as well. This will only work if you have direct access to your scripts and know what you are doing. It’s not for the faint of heart.

Why do you receive a landing page redirect error?

According to Google, redirects trigger an additional HTTP request-response cycle. Redirects also delay page rendering. In the best case, each redirect will add a single roundtrip (HTTP request-response). In the worst case, it may result in multiple roundtrips to perform the DNS lookup, TCP handshake, TLS negotiation, and additional HTTP request-response cycles. As a result, you should minimize use of redirects to improve site performance. This happens when you change your page url several times. Such as if you redirect www.site,com to site.com, but then redirect the page to site.com/blog. Now if I type in the “www.site.com” we will go through 2 redirects instead of 1.

  • How to correct landing page redirects.
    • If you have to change any structure of your site name, or permalinks chances are you have redirects or 404’s. All changes need to be redirected to the new page. However, you will need to go back to the old redirects and change them as well. This will avoid landing page redirects and improve your page speed.


$1*/ mo WordPress hosting! Get going with GoDaddy!

What is Compression?

Using compression application such as Gzip will pull all of the usefulness or repetitive data from your html. It will shrink the file size that has to be downloaded for the page before it sends it to the reader’s computer. This is useful for lowering your bandwidth on your server which will improve page speed. It will also lower the amount of data your reader has to download. It may not seem that important on a desktop with unlimited data, but if you are on a mobile device with limited data, every megabyte counts.

  • How to use Compression
    • Many hosting accounts such as GoDaddy have a compression feature available to use. To compress your website through your Godaddy hosting you will need to login into your C-Panel. After you log in, scroll down until you see the heading Software. Under software click on Optimize website. Once the new page loads simply click “compress all content”. Now your server is compressing all of the Http request before it sends it to the reader.
    • If you do not have the option for compressing http request in your hosting, there are several plugins that will add the Gzip file to your htaccess.php. The Far Future Expiry Plugin I mentioned earlier has the gzip function. If you are using favicons, however, this plugin may break them. Therefore I recommend you proceed with caution.

Why do your images need more optimizing?

Optimizing images is the greatest way to improve page speed. Chances are you are using a plugin that compresses images through WordPress such as Smush. If you aren’t I suggest you get it. Smush is a great image compressor. You can expect to see around a 45% compression rate. But is that enough? When you compress an image it is the same as compressing your site. Compression takes all of the unnecessary data out of the image such as the camera raw data needed for editing.  So why isn’t Smush enough you ask? Lets dig in.

  • How to optimize images
    • As I stated in How to rank Better in Google Search we are able to compress images down 99.75% of their original size. The reason this is important and the Smush plugin isn’t enough is because a single image can be around 35 MB and 12 inches wide by 15 inches tall. That is a huge image. Most people think that resizing the images through WordPress media is changing the original size of the image. This is a false belief. When you do this the server loads it first at the original size in the background and then scales it to the appropriate size. This does not change the amount of data that is in the image. Smush will only compress the image about 45%. Now you have an image that is 19.25MB that has to be downloaded. So how do we lower that number even more? The answer is Photoshop.
  • Using Photoshop to compress images
    • The best way to decrease the amount of data in your image is using a photo editor. I recommend using Adobe Photoshop CC. This application has a ton of great features.  When using a photo editor the first thing you will need to do is resize the image to the exact size needed in your post. This will eliminate the need for scaling. Minimal is best. You don’t want an image to take up the entire computer screen, as this may turn some users off. When you resize to the exact size you need, it will reduce the amount of data the image is. This takes care of most of the data, however, we still have the raw camera data and meta tags within the image. To finish decreasing the amount your image data you will need to compress it. I suggest around a compression level of 7. If you compress any further you will pixelate your image and it will not look professional.

Did you improve page speed?

It’s time to drop the hood and rev up your search engine. We have discussed all of the topics from Google PageSpeed Insights and the whys and the hows to do it. Fixing each error will help improve your page speed, which will help you rank higher in search. Using these techniques properly will improve page speed and get your PageSpeed Insights score within the green. We know it can be time consuming and sometimes confusing. If you would rather focus on creating great content, we will handle the technical stuff for. Check out our search engine optimization service. Better is always possible with the right mindset and the right knowledge.

How to improve page speed

1 thought on “How to improve page speed”

  1. Hi, i read your blog from time to time and i own a similar one and i was just curious
    if you get a lot of spam remarks? If so how do you reduce it, any plugin or anything you can advise?
    I get so much lately it’s driving me mad so any support is very
    much appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *