Does your website look amazing but seem to drag a little when loading? Load times are crucial when trying to keep visitors on your site and slow speeds will result in losing customers. If your website loads insanely fast, you will see a decline in bounce rates and an increase in leads and sales. Believe it or not, having a quick website is actually pretty simple to achieve but most website owners never implement the technologies/techniques required to do it. In this article we are going to break down the steps one at time and show you just how easy it can be.
Note: Although the techniques outlined in this article will increase page speeds, if your website was poorly built to begin with you may not see the results you had hoped for. A well built site is always the first step to ensuring great web page load times.
1. Physical Web Page Size
Before we get too far into this topic, I would like to to bring to your attention some basic web terminology. When we talk about a website we are referring to the site as a whole. When we refer to a web page, we are talking about a singular page that exist within a website. For example, the home page. It is important to understand the differences between these two terms before reading the next few paragraphs.
Just like a PDF or video file, a web page has a physical size that is usually represented in kilobytes or megabytes. As a general rule, the smaller your physical web page size is the better. Every piece of data transferred over the Internet must be downloaded. When you type in a website URL into the web browser, the requested web page must be downloaded to your computer before it can be viewed. It is a complicated process that appears very simple and seamless for the person browsing the Internet.
In the image below we have used a speed testing tool called Pingdom Tools and it indicates not only the physical web page size but also detailed information about how each file type contributes to the overall file size. Generally images and video will make up most to the total web page size with an average of 50%.
So how do you keep you web page file size down? There are 2 simple things that can be done to help:
- Only load images and other resources if they are critical for your website to operate
- Compress all images and video before adding them to your web page
It is wonderful to have a lot of beautiful imagery and video on your site but in the end they will ultimately make your web pages load time slower. Ask yourself this important question when managing content on your page. Is this adding any real value to my audience? if the answer is no, fantastic, don't add it to the site. Now if you answered yes, then you must compress the media to its smallest possible physical file size without sacrificing quality. Over the years, SevenDev have seen many people loading 3MB images onto blog posts without compressing them first. Ideally, an entire web page should be no larger than 1MB. The smaller the overall physical file size, the quicker it will load.
There are many free, online tools available to compress media. Some of these services handle images, while other may compress PDFs and video. Below are some of the tools we think are well built and achieve great results.
- TinyPNG (PNG compression)
- TinyJPG (JPG compression)
- I love PDF (PDF compression)
- Clideo (video compression)
When a web page is transferred over the Internet to your web browser, it doesn't download the site in one big chunk. Instead, each file that makes up the web page is individually transferred. This is known as a "Request". If you have 100 files (HTML, CSS, JS, images, videos) that make up your web page, the web browser would need to make 100 requests to the web hosting server to download each file. Long story short, the more requests the browser needs to make, the longer your web page takes to load.
So what is a good number of requests to have? If you were asking Google, they would say 32 but the reality is most web pages have a lot more. Below is a screenshot of a popular news platform and the number of requests it makes. It is very difficult to meet Google's recommendations especially if your site is loading a large number of visual elements such as images.
Hosting refers to the web server that your website files live on. Web servers are connected to the Internet and allow people from all over the world to access your website. Not all hosting packages are created equally and the saying 'You get what you pay for' could not be more true when it comes to hosting. Generally there are 3 types of hosting offered by providers and each range in performance and price.
- Shared Hosting
- Virtual Private Servers (VPS)
- Dedicated Servers
Shared hosting is by far the cheapest method, however your site will share a server with potentially thousands of other sites all accessing the same resources i.e. memory and CPU. If one site on the server is poorly coded and consumes a lot of server memory, it can cause loading issues for the other sites. Shared hosting packages can start as little as $5 a month with email however if you have a high traffic site that is resource hungry, you will find your site may not perform well on these hosting plans.
Virtual Private Hosting (VPS)
Also known as cloud hosting, virtual private servers (VPS) allocate a defined amount of resources which only your sites can access. The resources are containerized providing your website with stability. Load times on these hosting packages are often greatly improved, however the cost of hosting can range from $10 - $680 a month depending on what specifications you are after. A benefit of VPS hosting is you can easily and quickly scale up the resources needed for your site with a few clicks.
Dedicated servers are highly customizable and resources such as memory and CPU’s can be added at any time. They also require a high understanding of server maintenance and usually need a dedicated person to manage them. Running a dedicated server is also very expensive and can cost around $2000 a month.
Our recommendation is to go with VPS hosting where possible. It will provide good performance and it's flexible, meaning as your website grows so can your hosting platform. You will never out grow it (unless you build the next Facebook) because you can add more CPU power or RAM when you need it.
Cache works on the principle of providing temporary storage for content to be used at a later time. For your website that can happen at 2 different levels, browser cache and proxy cache.
Browser cache is used by all modern browsers including Chrome, Firefox, Opera and many others. When a visitor accesses your website the browser will store the web files locally on the visitors computer. When the visitor navigates to another page, the browser will load whatever files it can from the computer hard drive rather than re-downloading them. This helps decrease the load time of the web page. For a website to take advantage of browser cache it must activated through either server config file or through a plugin if you are using WordPress or other Content Management System.
Proxy caches work on the same principle as that of browser cache, but they serve a large amount of users. This kind of cache sits between client (web browser) and the web server. It watches as the requests for HTML pages, images and other static files (objects) come by and stores a copy of them. Apache, Nginx and Varnish are some common examples of caching proxy servers.
CDN stands for Content Delivery Network and as the name suggests, it helps deliver the content of your website to your users faster. A CDN is a group of servers that are positioned all over the globe and allows your website to live in multiple places. When you buy traditional web hosting, your website lives where ever the web server is geographically located. If you connect a CDN service your website resources are then shared across the whole CDN network meaning your website lives in multiple places. The benefit is your website resources are loaded from the server closest to the visitor accessing it saving precious load time. The geographic distance from the site visitor and the website hosting server also impacts load times. A CDN helps cut this down.
Now this might sound a little scary to setup and manage but it is actually pretty simple and affordable. You still only manage your site from your web hosting provider and periodically the CDN will fetch the new versions of files and distribute them over the server network. If you are interested in running a CDN on your website we recommend Cloudflare due to pricing and simplicity.
Speed is important when it comes to the web and shouldn't be ignored. By implementing best-practice techniques and investing a little bit of money you could see an increase in traffic, leads and sales. SevenDev understands the process can be a little daunting, so if you would like to see how fast your website could become contact us today for a free quote. In the famous words of Ricky Bobby 'I wanna go fast' and so does your website.