Website Speed Optimization [ Beginners Guide 2019 Analysis ]

Reading Time: 10 minutes

Website speed optimization is not something we pay enough attention as we should to. Websites can benefit a lot just from being faster than the rest of their competitors out there on Google. A big number of webmasters know that their website should be fast. However, they lack proper experience when it comes to the optimization of the website. How much is the speed of your website really important and how much does it matter are the topics we will explain in this article.

Importance of Fast Websites

Ideal speed your website should have is below 2 seconds. Now, how fast your website will be, depends on a lot of things which we will cover in this article. Faster websites tend to rank higher compared to slow websites. Speed is one of the ranking factors when it comes to SEO and positioning on Google. Google loves fast websites. Therefore, if your site is loading fast, it will have higher rankings which means more traffic, more exposure, and more sales.

Your Website Speed Affects SEO Rankings

It is not a myth when we hear fast websites tend to rank higher; it is proven and supported with a lot of data. Not only your website should be optimized for desktop, it should also be optimized for mobile phones. Now Google introduced AMP (accelerated mobile pages). Your website will load differently on desktop and phone. Having a website that is perfectly optimized for both devices should be your goal. Currently, in 2018, we can see from data on our websites that mobile traffic is slowly beating desktop traffic and we can all expect in the future that this trend will continue to grow.

Best way to optimize your website for mobile devices is the use of AMP. Now, if you are a WordPress user and your website is located here, you can do that with many plugins. Their configuration is fairly easy and you should not expect any hassle about that. But, keep in mind this will not solve all your website problems. Other CMS platforms have their own apps or extensions for AMP configuration. To read more about AMPs click here.

AMP - Accelerated Mobile Pages for Google
AMP – Accelerated Mobile Pages for Google

Faster the Website – Better the User Experience (UX)

How many times did it happen to you to leave website just because it did not load fast? You were searching for a quick answer and still ended up with slow loading website that you closed immediately and went on with other results? Your customers expect fast answers when searching the internet. Once your customer closes your website, chances of having them back are less than 36%. More than half of your visitors expect your website should load under 2 seconds, while 40% of visitors expect 3 seconds page load or less. In the end, 14% of visitors will shop somewhere else just because your website is slow, while 23% will simply quit. Convert this into a big number of visitors and this could be a thing that ends up your business without even knowing it.

Website Speed Statistics - Why is website speed so important?
Website Speed Statistics – Why is Website Speed so Important?

Choosing Right Hosting for Your Website & Server Location

This can be very tricky for people without experience when they decide to build their own website. What most advertisers serve us on the Internet it is not always true. We all saw those ads $1 per month of hosting and similar marketing scams. When you click on such advertisement you can see that the price is mostly different compared to the one on the ad you clicked. This is just one of their marketing tricks to get you there.

It is really important to pay attention to the type of hosting plan you will pick. There are many different types such as:

  • Cloud Hosting
  • Shared Hosting
  • WordPress Managed Hosting
  • VPS Hosting
  • Dedicated Hosting

Cloud hostings are identical to shared hostings yet a better version compared to them, so they will be more expensive. What is great for them is that your website speed is the same from any place in the world. Shared hosting is great mostly for startups and websites that do not expect a lot of visitors. Also, this hosting will not be that much and you will not have a lot of room to configure servers as you will not be given access to.

More expensive variants of hosting and better ones are VPS and dedicated hosting. Now, when choosing any hosting, it is VERY important to check server location. If you live in the U.S. but server of your hosting will be on the other part of the world this will bring you for sure couple of seconds of load time in the US. Just this simple mistake can cost you a lot. Always choose a hosting with servers in the location you plan to target and where your visitors are most likely to come.

Website Speed Analysis - Pingdom - GTMetrix optimization
Website Speed Analysis – Pingdom – GTMetrix optimization

Website Speed Analysis

In order to achieve the best possible website speed analysis optimization, you will need to go and analyze your websites either on:

GTMetrix or Tools Pingdom
We prefer Tools Pingdom more just because of its flexibility. You can choose different locations, from the US and Europe to Australia, while on GTMetrix you can only get results from Canada. Again, it is always a good idea to test on both websites and work according to the results.

GTMetrix Website Speed Analysis
GTMetrix Website Speed Analysis report for Persist.Agency
Tools Pingdom Website Speed Analysis Optimization Report for Persist Agency
Tools Pingdom Website Speed Optimization Analysis Report for Persist Agency

Here are 2 scans from different websites. We will follow them throughout this article and we will see immediately that several factors are the same while one varies a lot.

We can see that page size and request on both websites are very similar. However, load time is different for 3.5 seconds. Now we need to get back. As we said before, server location plays a HUGE difference in load time. We can see that our website loading speed in Canada is 5 seconds. In New York, where our agency is located, it is 1.41 seconds, which is great.

Few things to keep in mind here are that you should not have more than 100-120 requests per page. Requests slow pages significantly and the more you have, the slower the page will be. Another thing you should pay attention to is page size. The ideal page size is less than 2MB, so be careful next time when you are adding content.

Website load time factors and errors to optimize in order to improve website speed
Website speed optimization load time factors and errors to optimize in order to improve website speed
GTMetrix website speed analysis - errors optimization
GTMetrix website speed analysis – errors optimization

Website Speed Optimization Factors – What Slows Down Websites

This part will guide you through what slows websites the most. We will start with plugins. If you are a WordPress user, you probably love the functionality of WordPress. Just knowing that for any problem you encounter you have a plugin that will fix it, makes you feel comfortable. However, installing too many plugins will slow down the speed of your website significantly. The same goes for platforms like Shopify and Joomla. Having a lot of apps and extensions will also slow down your website.

How to fix this? Make a list of plugins that are crucial for your website to operate and remove all others. An optimal number of plugins you should have on WordPress is below 10. Be careful when removing plugins as they can cause failures on some parts of your website, backup first. This is the easiest way for a website speed optimization.

Plugins you must have on your website for website speed optimization:

  1. Yoast for SEO optimization
  2. Plugin for website security ( WordFence, All in One Security )
  3. Visual Composer for building a website
  4. WP Rocket – W3 Total Cache for speed optimization
  5. AMP pages plugin
  6. Backup plugin
  7. Schema, rich cards plugin

And that is pretty much all. There is no need for any other plugins unless your template demands it.

Same goes for applications on Shopify or Joomla or any other CMS. Keep and use only those plugins that are extremely needed, and that’s it. Keep it simple but powerful.

JavaScript and CSS Optimization & Analysis

JS and CSS optimization - Website Speed Optimization - Minification process
JS and CSS optimization – Website Speed Optimization – Minification Process

Eliminating Render-Blocking JavaScript & CSS

This general rule of optimization says that less is more when it comes to speed. We want to deliver the very first things the end user is supposed to see on our pages. Everything above-the-fold, not just as quickly as possible, but also with priority to anything else that falls below the fold. Anything the falls below the fold, anything the user has to scroll to see, can wait with loading.

By eliminating the JavaScript and CSS that are responsible for increasing the time when a user clicks a link to our site and the appearance of content, we come closer to providing what the user really wants. The end goal should be to provide users with a perception of instantaneous page loading. If you are interested in website speed optimization services, check our services now.

GZIP Optimization Procedure and What Is It?

GZIP stands for a file format and a sophisticated software application that is used on Unix systems to compress HTTP content on our website before it is served to our visitors. The process has been known for shrinking and reducing file size by up to 80% which results in improved page load time, decreasing bandwidth and reduces SSL overload. GZIP optimization is great because it can be used on different platforms without any hassle.

Website Speed Optimization - Website Development Services - How to optimize website
Website Speed Optimization Analysis – Website Development Services – How to Optimize Website Speed

Image Optimization

Since each and every image on your website processes an HTTP request, the fewer images you have means a faster loading website. Put it into a perspective, you should make it a priority to include only the necessary number of images on any given webpage. Or simply help your website to accomplish it, whatever the webpage is trying to do, whatever message the webpage is trying to convey.

Optimizing images can often yield some of the largest savings and performance improvements for your WordPress website. The fewer bytes of information the browser has to download, the less competition there is for the user’s bandwidth and the faster the browser can download and render useful content on the screen.

There are two different methods of image optimization that we will employ:

Lossy” image optimization, where we actually remove some of the pixel data. As pixel being the smallest controllable element of a picture represented on the screen, the DOTS that comprise the sum total of the image that we ultimately perceive as an image.

Lossless” image optimization, where we don’t remove any pixels; we simply compress them.

Reducing HTTPs Request

Whenever a web browser fetches a file from a web server, (page, post, picture) it does it by using HTTP – which means “Hypertext Transfer Protocol”. Protocol is simply any system of rules that explain the procedures to be followed. So, the HTTP protocol defines the manner in which the file that has been requested and subsequently received. Often, websites will have too many HTTP requests and this will slow them down. They can increase by installing extensions, plugins, adding images, JS, and many other things, so we need to keep this below 100-120 ideally.

Caching – What’s the Cache?

Web cache sits between one or more Web servers (also known as origin servers) and a user requests come by, saving copies of the responses — like HTML pages, images and JS and CSS files (which are collectively known as representations). Then, if there is another request for the same URL, it can use the response that it has already, instead of asking the origin server for it again. Doing this, website pages load faster.

There are two main reasons that web caches are used:

The first is to reduce latency — because the request is received from the cache (which is closer to the user) instead of the origin server, it takes less time for it to get the representation and display it. This makes your website seem really fast as your server is doing a lot less work to deliver the contents the user has requested.

The second reason why web caches are used is to reduce network traffic — because representations are reused, it reduces the amount of bandwidth used by the user.

There are 3 different models of caching and they are:

Page caching, or the caching of the entire HTML of a web page.

Browser caching, the instructions we give to a browser as to how and when it is to serve our assets.

Database and object caching to further and dramatically reduce the extent to which our database gets queried at all.

Website speed optimization - Guideline to fast website - AMP pages optimization
Website speed optimization – Guideline to Fast Website – AMP Pages Optimization

The conclusion of website speed optimization

  • Chose best hosting and server location for your needs
  • Aim for less than 2 seconds of loading time
  • Use AMP for mobile devices
  • Use only extensions/plugins that are crucial for the website to operate
  • Compress images
  • Lower HTTP requests as much as you can
  • GZIP your files and compress them
  • Optimize JS and CSS

When you complete all these steps, you will have a website that is much better than competitors’. Your website will rank higher on Google which means more traffic and better rankings. More visitors mean more exposure which can bring up more sales. Also, a website that loads fast has a much lower % of bounce rate which means visitors are not going away and they spend more time on your website.