Make your website load faster

455
load faster

How do you make your website load faster? The speed of your site has a greater impact on user satisfaction than extra “bells and whistles”.
It doesn’t matter how great a site looks: if it loads too slowly, users will click away.

When it comes to user experience, Google’s research experiments show that faster site speed leads to happier users, increased productivity, and more time users spend browsing.

Regarding SEO, Google and Bing uses site speed as one of the many factors that determines rank (how high your page appears in search results). To determine rankings, Google factors pagespeed on both desktop and mobile platforms. If your site’s speed isn’t up to par, you can suffer ranking penalties.

Moreover, research by Kissmetrics showed that 40% of people will abandon a site if it takes longer than three seconds to load. 47% of users expect a page to load in two seconds or less.

The reason why site speed matters is that search engines want to point users to sites with the best overall experience and information. Users can’t access all the great info you have if your site is unbearably slow, for this reason you should know how to make your website load faster and provide the best user experience you possibly can, to ensure they return to your site .

A slow website is bad not only for the end-user, but also for search engine optimization (SEO). Meaning, it can cause your website to rank lower in search engine results. That translates to fewer page views and less ad revenue or customer conversion for you.

Also see Beginner Guide to SEO.

How to check your website’s speed

download speed

To tell whether your website is slow or not, we can use one of the many free tools out there.

Google’s PageSpeed Insights: Google’s very own tool. Gives mobile and desktop recommendations on how to make your website load faster.

Pingdom: Useful for all skill levels. Reviews site performance, grades it, and tracks performance history so you can see how your site speed has changed, and use this information to make your website load faster.

Speedtest: One of the most popular choices — can be used on the web and on mobile platforms. Speedtest checks your site speed and grades popular sites so you can see which sites run the fastest.

YSlow: Grades webpages on how they meet established high-performance guidelines. And also summarizes the different components of the website and allows you to view the analysis, offers advice on how to improve your site and make your website load faster. YSlow offers a Chrome extension to test the speed of websites.

My personal favorite is Google’s PageSpeed Insights. It’s easy to use and the results are presented clearly. It also organizes suggestions by “should fix”, “consider fixing”, and “passed rules”.

let's look at a few simple steps to help make your website load faster.

Optimize your images for web. Use 65% image quality of jpeg instead of 100%.
Remove whitespace in your source code with HTML Optimizer.
Eliminate or minimize the use of frames within the pages.
Load any Javascript operations in the footer of the HTML page, instead of the header.
Use the correct document format for the type of page you are using (eg. strict XHTML).
Keep external images and items minimized to help make your website load faster.
Use clean and simple style sheets or use just one to load and call in any others instead of using multiple style sheets.
Modify the .htaccess file at root for load expiry modules.
Minimize GET requests.

Improve your hosting plan

host website
This is one of the simplest ways you can speed up your website: looking at your server.

Often when we first start out, we go the cheap way and sign up for shared hosting. However, as sites grow in usage and content, they get slower. You can battle this by upgrading your hosting plan (moving to a VPS or dedicated option).

VPS vs. dedicated hosting

vps hosting load faster
VPS hosting is probably the option you want to go with. It’s “in the cloud,” meaning it is distributed over multiple computers, sometimes even hundreds. It’s a scalable solution, and it’s a more affordable solution than dedicated hosting. Bloggers and medium/small businesses will find this option most appealing.

Dedicated servers are like you are renting out a big box. It’s essentially like owning own computer. The biggest upside to dedicated over VPS is that you have full control, because you have all the resources to yourself. However – it is usually much more expensive. And unlike a VPS, it’s less flexible, since you don’t have numerous computers, but it will make your website load faster.

Understand HTTP requests

HTTP request
Websites are mainly slow because of too many or too large HTTP requests. When you understand HTTP requests, you can better eliminate them and make your website load faster.

“Whenever your web browser fetches a file, a page, a picture, etc. from a web server, it does so using HTTP ("Hypertext Transfer Protocol”). HTTP is a request/response protocol, which means your computer sends a request for some file (e.g. “get a file from the homepage”), and the web server sends back a response (“Here’s the file”, followed by the file itself).”

There are many ways you can reduce or eliminate HTTP requests, which this article covers later. However, to see how many HTTP requests a page on your site makes, you can run a speed test on Pingdom.

With Pingdom, you can sort the requests by file size and load time. This allows you to see the biggest culprits and make the necessary changes using that information to make your website load faster.

Make images internet-friendly

loading images
Site size and image sizes makes a huge difference to your site speed. The larger your content/images, the slower the site will be.

Some basic ways to counteract this and to make your website load faster is by shrinking the file sizes of images on your site, reducing the number of images you use, or eliminating them altogether.

That being said.. having no images on your site is boring! Rather than removing them, optimize images before uploading them to your site by:

Changing the resolution: reducing the “quality” of the image (and thereby the file size).

Compressing the picture: increasing the efficiency of image data storage.

Cropping the picture: when cropping, you are cutting out unneeded areas and thus making the image smaller in size.

You can make these kinds of changes in a premium tool like Photoshop, or a free program like Gimp. There are even in-browser tools like picresize.com.

For Mac users, there is a free program called ImageOptim, which “optimizes compression parameters, removes junk metadata and unnecessary color profiles.” To make your website load faster.

On WordPress, there is a free plugin called WP-Smushit, which removes hidden information present in images. WP-Smushit scans images as you upload them to WordPress, and prevents unnecessary data from hanging on. It decreases the file size while maintaining the quality of the image.

Or you can just as easily open the file in Microsoft Paint, and saving it in a lower quality file format and ratio to reduce the overall file size. Smaller file sizes means less data to download and needless to say, this will also make your website load faster.

Using website plugins (WP sites only)

essential plugins
Using too many plugins can significantly slow your site performance by creating too many extra files, thus increasing load time.

Try to avoid the use of plugins whenever possible. In my opinion, it’s not possible to avoid plugins entirely. But there are ways you can reduce the overall count.

For starters, if there is an easy way to get around using a plugin – do it. (Example: the Google Analytics plugin. Instead, just add the tracking code to your website footer manually.)

Set aside time to review your plugins every 6 months or so. Aside from taking up space, outdated WordPress plugins are often responsible for security vulnerabilities and will not make your website load faster.

Evaluate each one and delete it if:

You don’t use it anymore.

It’s not doing what it’s supposed to be doing.

It is “calling deprecated functions”

There are new and improved plugins that will work better and faster.

Reduce the use of external scripts

speed loading
The snippets of JavaScript code you include to add extra features makes HTTP requests every time a new page loads.

Here are some examples include:

Facebook “like my page” boxes.

Bootstrap (if brought in via CDN).

Icon sets like Font Awesome (also when brought in with a CDN).

External commenting systems (like Disqus).

Pop-up boxes and similar lead-capture tools (like SumoMe).

External fonts.

You should not avoid these altogether. Just be aware of the speed sacrifice when implementing too many additional "features".

To figure out which scripts are especially large, you can turn back to Pingdom to see which files are taking the longest to load.

Another option is to use a content delivery network (CDN)

content delivery network
This is a bit more advanced and not cost efficient if you are using a lot of bandwidth with personal sites or blogs, but it's worth mentioning to your web developer when you have a lot of customers from around the globe and you need to make your website load faster.

If you’re just starting a blog, or built a mini-app, a CDN is not necessary at all.

A CDN is essentially many optimized servers around the world that deliver web content to users based on their geographic location. This means big performance improvements for site users.

Example: If a person access your site from South Africa, but the site is hosted in the UK, they will be retrieving web content from a server nearby (in South Africa), rather than where the site is hosted (the United Kingdom).

Here’s what you can store on a CDN:

JS files, CSS files, Images, Other uploaded files (like videos, PDFs)

Some common CDN's that I know of:

MaxCDN

CloudFlare

Amazon CloudFront

If you’re on a WordPress site, and already are using the popular W3 Total Cache plugin, here is some good news: it integrates with MaxCDN, so you can get running on a CDN in basically no time. (In other situations, it may not be so simple to move your site assets over to a CDN.)

For larger sites, with lots of customers coming from all around the world, a CDN is basically a necessity. And all “big” sites use one without a doubt.