How To Optimize Website Page Speed

User experience is the most important aspect of any website. When you make the user’s experience more pleasurable, you are also making search engines happy. Search engine’s ranking algorithms are largely based on what type of an experience you provide your users and search engine users. So a website’s user experience carries a lot of crossover between search engine optimization and web development.

One of the best way to improve user experience is to ensure users can navigate and browse your website reliably and quickly. The time it takes for a page of content to load in a browser could make you that much better than your competitors. There are many ways to decrease the load time; I’ve included many suggestions below. Follow them and you’ll be guaranteed to have outstanding website speed performance.

Step 1: Analyze

First thing to do when increasing performance is to analyze your website’s current speed. Google’s PageSpeed Insights tool rates how well your website performs and offers suggested fixes to improve your website’s page speed. I’d recommend any website’s pagespeed rating above 90. This can be accomplished if you handle the majority of the suggested fixes for website performance enhancement.

You can also download a PageSpeed Insight browser extension, which analyzes even further each individual page’s performance and what you can do to improve speed.

Step 2: Fix

Some of the most common inhibitors of page speed include:

All of these things can be taken care of quite easily (with the exception of server response time).

Improving Server Response Time

The server response time is the time between when users/browsers request information from the server and the server responds with the correct information for an internet browser. A high server response time means that information is not sent quickly to the user’s browser, increasing the time it takes for a user to load your page. According to Google, 2 seconds is too long for a server to respond to a browser’s request.

So how do you easily fix a server’s response time? The short answer: you don’t. The only solution to improving your server’s response time is to either upgrade the hardware of your current server or find a better server to host your website.

Leverage Browser Caching

Enabling browser caching for your website is one of the easiest and most powerful solutions you can implement to improve page speed. Each time a user visits a web page, the browser must load all of that page’s resources, including pictures, videos, html files, css files, javascript files and more. Leveraging browser caching allows the browser to remember the page’s resources that have already been loaded. So, when a user caches the resources on a page and returns to the same page, there is no need to load the resources again because the browser simply remembers them.

To enable browser caching add the following code to the top of your .htaccess file at your server’s root folder. You can access this file through a file manager on your webhost or using a FTP client such as FileZilla. If you do not currently have a .htaccess file in your server’s root file, create a file named .htaccess and add it to your server’s folder.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Render Blocking Javascript & CSS

After you run a Google page speed insight analysis you may notice render-blocking JavaScript and CSS in above-the-fold content. This mean you have web page resources that are being loaded prior to the above-the-fold content (the content that a user sees first on their screen). Google’s pagespeed insight tool is nice enough to list all of the culprits, which should instead be loaded after-the-fold to improve page speed.

The fix can be confusing and I would recommend understanding JavaScript and CSS before attempting it. It would be better for you to have a slower website than no website at all. Many people are currently using an incorrect method to resolve Render Blocking JavaScript, however this method is Google-recommended.

  1. Remove the above-the-fold JavaScript and CSS. Do NOT remove any JavaScript your page requires to load properly. Placing it below the fold content would mean that your web page won’t load as intended.
  2. Create an external javascript file and place your javascript into it.
  3. Upload the external javascript file to your server
  4. Paste the following code just before the </body> in your html. Replace example.js to the path of your external javascript file you just created.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "example.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Enable Gzip Compression

Enabling compression of HTML and CSS Files is another easy but effective method to reduce load time. If your website is not already using Gzip compression you are behind the curve. This solution will reduce the size of your HTML and CSS files between 50 to 70 percent, which decreases the file size that users download before the page loads.

To enable Gzip Compression add the following code to your .htaccess file at your server’s root folder. You can access this file through a file manager on your webhost or using a FTP client such as FileZilla. If you do not currently have a .htaccess file in your server’s root file, create a file named .htaccess and add it to your server’s folder.

Apache webservers

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

 

NGINX

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
 
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
 
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Optimize Image Files For The Web

Images sometimes account for large portions of load time. They are typically the largest files and take up a significant amount of space on a page. As a result, compressing image file sizes can sometimes lead to the biggest improvement in webpage speed! Compressing all the image files does take quite a bit of time though. Here are guidelines that can help you optimize your webpage’s image files.

Eliminate Unnecessary Image Resources

In many instances, website’s use images when they could have used CSS3 or web fonts. CSS3 and web fronts require less load time then images, so use them if you can!

Optimize the Size of the Image

The smaller the image is, the smaller the file size will be. You want to make and use image files that have dimensions only as large as they will need to be when displaying them on a website. This will increase your load time drastically.

Compress Images

To compress an image you will need a tool that optimizes images for the web. Graphic design applications such as Adobe Photoshop come equipped with a web optimizer. Also, there are online compressors such as Image Optimizer, which provide a free image web optimization service.

For a full in-depth article on image optimization refer to the Google developers guide on image optimization.

Optimize Website Code

Optimizing your website code includes minifying CSS, HTML, JavaScript, jQuery and any other code on the site. For the website to run and operate as efficiently as possible, the code must be packed for the user to load and run as fast as possible without giving up functionality.

All code should be kept to as few characters and lines as possible. Many services will minify CSS, HTML, JavaScript and jQuery for you. The PageSpeed Insight browser extension provides a link to a minified version of your code after you analyze your website. On minifycode.com you can input any code your wish to minify and it will output the minified version of your input code.

Step 3: Analyze Again

Keep analyzing your website from time-to-time to make certain your website is performing optimally. Conditions can change (you have more users on your website and your server response time has gone down, or there were edits to the website and some page speed optimization changes need to be made). It is always a good practice to monitor the condition of your website’s performance regularly.

The above solutions are only the most common issues that hinder a website’s pagespeed. There are many other issues that can cause a website to perform poorly. Please refer to http://www.feedthebot.com/pagespeed/ for more information on how to make your website as fast as possible.

Good luck moving faster!

Arrow Left Back To Blog Home

Start a Discussion