Digital

Improve Website Page Speed

Brandon Himpfen

Brandon Himpfen

— 8 min read
Improve Website Page Speed
Photo by Marvin Meyer / Unsplash

In the world we live in now, everything has to be done in an instant. So, what makes a website any different? Visitors don’t want to wait to see and use your website. Visitors don’t want to wait in a store to make a purchase. A world that has been increasingly becoming more mobile, which has made rapid page loads even more important. So, improve website page speed.

The Impact

Web Search Ranking

On April 09, 2010, Google even recognized the importance of page speed and made it a part of their search ranking algorithms (read more).

Financial Impact

The impact of having a slow website is significant. How significant? Even milliseconds (ms) can cost you visitor loyalty, website ad revenue, and products and services revenue. Don’t believe me? A report by WebsiteOptimization.com, shows that an additional 100ms in page load times costs Amazon 1% of sales. That’s right! Amazon sales decreased by 1%, just for 100ms. Google decreased the page size from 100 KB to 80 KB and in return traffic went up 10%.

Factors To Consider

Page load speed has a number of factors and you need to consider all of them. There are three primary factors that affect page load speed:

  1. Network
  2. Backend
  3. Frontend

In addition, you should also consider:

  1. If you use external files: The network, backend and frontend for that file or files; and
  2. The psychology of your visitor.

The Speeds You Want

The maximum page speed should be three (3) seconds and no more. From four (4) to eight (8) seconds you should consider that your visitor most likely will be tolerating your website and anything 9 seconds and over, the visitor will be frustrated – a visitor may be frustrated with anything over four (4) seconds too.

Additional Psychology of Page Speed

The experience of your visitor is dependent on that visitor. A visitor uses X Internet provider and that visitor has always experienced slow page load speeds, they probably will tolerate the speed of your website.

Or, if a visitor is from Germany and knowingly visits a US website, he or she may expect longer wait times.

If a visitor visits a photography or travel website, he or she may expect that the page speed will be slower to allow the images to load.

Again, the visitor may not care and still want your website to load fast. So, improve page speed, as you can’t expect the user to understand.

What You Can Do About It

Making your website load faster is easy, but there are several things you have to consider. In addition, you need to test, test and test even more. You cannot rely on your experience visiting your website or trust that your web host will have great speeds for everyone.

Here are common mistakes people make:

  1. Choosing the right web host;
  2. Overloading their website with images and scripts;
  3. Testing only the homepage for speed;
  4. Not testing always loaded elements of the website;
  5. Not testing at all; and
  6. Not following best practices and rules;

So, let’s explore each issue and discuss them:

Choosing the Right Web Host

When choosing a web host, there are many factors and considerations you should take, such as where the server is located to where your visitors are from and the type of hosting.

Server Location to Visitor Location

One mistake many website owners make is choosing the server location in relation to them and not their visitors or not even considering their visitor’s location.

Where your website is being hosted is important! Having a website not located near your visitors can increase page load times. The farther the visitor is from your server, the higher the latency – the delay in data travelling from source to destination and the decrease in bandwidth – the amount of data that can be transferred per second.

With this being said, you might not know where your visitors are going to be coming from – aka a new website. So, make sure you keep an eye on where your visitors are coming from and be ready to take action – by finding a new web host.

Type of Web Hosting

We are also in a world where we want everything for nothing. When it comes to web hosting, nothing is different in the saying, “you get what you pay for.” We need to understand that unlimited disk space and bandwidth hosting for $5 per month with a free domain is not possible. Unlimited web hosts count on your website not using that many server resources and if your website grows, you’ll be asked to upgrade and or be suspended.

You should pay for a quality web host that offers great technical support, server management and realistic feature resources.

We also need to understand the different types of web hosting. A server can be divided in numerous ways: shared, semi-dedicated, VPS and dedicated. The type of web hosting can also have an impact on performance.

Shared hosting means the server is dividing the server resources across many websites. This also increases that amount of requests the server has to make. A typical shared server can host 200-300 web hosting accounts and contain thousands of websites. Now many web host will have adequate server resources available to accommodate these websites, but not all and this does not negate the fact that a server has to accommodate all of these requests, which can slow down a website, especially if a website on the server is a resource hog, which is quiet common.

Other types of server hosting are semi-dedicated, VPS and dedicated. Semi-dedicated hosting is similar to shared hosting, but the server is hosting far less websites. VPS or Virtual Private Server is similar to semi-dedicated, but unlike semi-dedicated hosting, a VPS owns the server resources and therefore the server resources are not shared. Dedicated means, only you own the server.

Of course there are more types of hosting, like cloud, which means a pool of servers that power your website.

Website Overload

How many requests does your website need to make? The more requests, the more potential for your website to be slower. So, you need to ask yourself, do I need this script or CSS stylesheet? Is this script or stylesheet needed for a single page, a set of pages or the website as a whole? Only include scripts and stylesheets when they are needed.

Test, Test and Test Even More

There are dozens of quality free and paid tools that you can use to test your website speed. Here are three (3) free tools I recommend:

  1. YSlow by Yahoo
  2. PageSpeed by Google
  3. GTMetrix

My favourite is GTMetrix, because you’ll see your score for both YSlow and PageSpeed. In addition, it’ll give you resolution to problems, such as minified HTML, minified CSS and optimized images.

Real User Monitoring

Real User Monitoring is a paid service by Pingdom that gives you insights on web page performance based on a specific country or web browser.

I’ll go into detail about how-to use and analyze data from Real User Monitoring to improve your website’s performance in a future post.

What to Test

A common mistake is only testing your homepage. You should not only test the homepage, but also every other page. You should start with the 10 most visited pages and then go from there.

It is critical to test the static elements of the website. What I mean by static elements is stuff on your website that loads every time a page loaded, this is usually the header and footer.

Best Practices and Rules

Here are a few best practices and rules you should follow for optimal website performance:

Minimize the Number of HTTP requests

What minimizing the number of HTTP requests means is limiting the amount of files – CSS, JavaScript and images – it takes to load your website.

As stated before, you need to consider does the file need to be included for all pages, a page or a set of pages. If it’s not necessary to include a file for a page, remove it from the source code.

Images

Many people don’t bother with optimizing and correctly including their images for their website. An image can vary in file size, based on the size of the image and the data they contain.

If you have an image that is 1,000 by 1,000 pixels and you are going to display it on the web page as a 250 x 250 pixels image, why aren’t you re-sizing the image? The image is bigger in size than you need and therefore the file size is bigger than you; leading to slower page load times.

Images may also include metadata. Image metadata is data about data or in laymen’s terms, data that describes that image, such as author, file size, image description, etc… This data increases the file size and is unnecessary for disappearing your image, so get rid of it and improve page speeds.

When you do a test on GTMetrix and it finds an optimized image, it will provide you with an optimized version to use.

Minify HTML, CSS, and JavaScript

Why should you minify HTML, CSS and JavaScript? Whitespace. Whitespace increases page size and is unnecessary for your page to load. GTMetrix will help you minify HTML and CSS. You can also use CSSMinifer, another personal favourite of mine.

Use a Content Delivery Network (CDN)

A CDN is a network of servers spread across the globe or specific geographical areas. The file is replicated across these servers and the visitor will be served by the closest server to them.

Using a CDN will also decrease the amount of requests and resources needed by your server, therefore your server can concentrate on executing your websites software – the back-end, not the front-end.

In other words, without a CDN, your server will execute the back-end and then the front-end, which increase page load times. While using a CDN, will allow your back-end and front-end to execute at the same time, decreasing page load times.

File Compression

File compression means reducing the size of a file and this is usually accomplished by Linux modules called modgzip or moddeflate. The difference between modgzip and moddeflate is the author and the compatibility. Moddeflate is common and is available for Apache 2, whereas modgzip is not available on Apache 2.

Enable mod_gzip with .htaccess
modgzipon Yes modgzipdechunk Yes modgzipiteminclude file .(html?|txt|css|js|php|pl)$ modgzipiteminclude handler ^cgi-script$ modgzipiteminclude mime ^text/.* modgzipiteminclude mime ^application/x-javascript.* modgzipitemexclude mime ^image/.* modgzipitemexclude rspheader ^Content-Encoding:.gzip.
Enable mod_deflate with .htaccess
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Choose over @import

You should not use @import to request CSS stylesheets but use the <link> method.

CSS Stylesheets

You should load your CSS stylesheets between the and tags and not at the bottom of your page. In addition, if your CSS is small, Google recommends that you inline the CSS in the page like so:
CSS goes here
The CSS will go in the page, in between the and tags.

Move the JavaScript to the Bottom

JavaScript is designed for website functionality and not the appearance and therefore you should put JavaScript files at the bottom of web pages and not in the body or at the top of the web page.

Browser Caching

Web browsers can cache files of your page, therefore when visitors go to another page or returns to your website, your browser can serve a cache version – files previously loaded – for faster web speeds.

You can use mod_expires, which will tell your browser which types of files to cache and for how long. Here is a .htaccess code snippet to do just that:

ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"

The above .htaccess code snippet sets file expires based on what Google recommends. For NGINX, you can use something like this:

location ~* .(jpg|png|gif|jpeg|css|js)$ { expires 1w; accesslog off; lognot_found off; }

You should note that this can cause a browser to display an old version of a file, which is something you probably do not want.

CSS Sprites

CSS sprite is an image comprised of other images used for your website, which decreases HTTP requests. How does sprites work? CSS would be used to get the image you want to use for that section of your website. You can read more here.

Read more