Website speed basics

The speed of your website is important because it can lead to a better user experience (UX),  increase your conversion rate on your website, and lead to better search engine optimization (SEO). If you do a little research online you will hear a lot of terms such as caching, content delivery network (CDN), or time to first byte (TTFB). These terms can seem complicated so I want to see if I can simplify and give you a better understanding of website speed.

The Horse Race

Let me begin by comparing your website to a Horse race. In a horse race, the only way for a team to go faster is to either get a faster horse or get a smaller rider. It is similar to a website. The only real way for a website to go faster is to get faster hosting or make the website lighter. 

In any race, the winner is often determined by how fast the racer launches from the start line. For a website, this would be the time to first byte (TTFB). TTFB is the amount of time it takes for the requesting browser (the website visitor) to receive the first byte of data from the hosting server. Typically, this is an indication of the quality of your website hosting platform. 

A very small site with small pages, may be ok on a less-than-great server. As you increase the size and complexity of a website, you will need better hosting with the resources to process code and data quickly. Some plugins such as page builders can make building a website easier but they  add a lot of extra weight to the website. Consider using better hosting if you plan to use a pagebuilder. Here is a list of our favorite WordPress hosting companies.

The smaller a website is, the faster it can load. Every item on your website adds extra code to either the HTML, CSS, or JS files. The code has to travel electronically from the server to the user’s browser. The browser has to read and translate all of the code before it renders it on the screen. The less it has to read, the faster it can read the files and then render the website.

Some items such as sliders, may not look big on the screen but they are composed of many small items and code that enable the functionality. Sliders can add a very large amount of weight  to a website so we recommend avoiding them whenever possible.

A basic website

When you type in a website’s URL and hit enter, you are sending a request to a server. A server is essentially just a computer connected to the internet. The server then returns up to three files to your browser: 

• a HyperText Markup Language (HTML) file, 
• a Cascading Style Sheet (CSS) file, 
• a JavaScript (JS) file. 

You may hear terms such as Ruby, Node, Hypertext Preprocessor (PHP), Python, and others if you are researching websites. Your browser does not recognize these other programming languages. Any code written in these languages has to be converted to HTML, CSS, and JS before it is sent to your browser. 

When websites first started popping up they were simple. You put the HTML, CSS, and JS files in a folder on the server. Then, when someone input a URL to request a website, these static files were served instantly. Nowadays, for the majority of websites, when you send a request for a URL, the server receives the request and then compiles (builds) the website based on various data and inputs. It then sends the compiled HTML, CSS, and JS files back to the requester.   

Caching

Our metaphor gets kind of fuzzy here but imagine a horse race where the horse is going through the race without a rider. The unburdened horse is able to travel faster through the course. The split second before the horse crosses the finish line, the rider magically appears on top of the horse.

Caching allows a user’s browser to store certain information from a website. When the user visits a web page that they have been to before, some of the files are already on the user’s computer so they don’t have to be re-downloaded. It works really well after the initial visit but the first time someone visits a website, the whole content has to be downloaded. In other words, you can make a bad first impression by having a large website. 

Oftentimes website speed tests will test a website and will include the caching ability as part of the grade. First time users may still have a bad experience. If a user only visits your site once a year, you may not have a happy customer. 

Content Delivery Network (CDN)

Let’s change the metaphor for this one. Imagine that you own a pizza chain in Los Angeles County with headquarters in downtown LA. If someone orders a pizza in Palmdale (about 70 miles away) or Long Beach (about 27 miles away), you wouldn’t send the pizza from your downtown location. You would send it from a location near Palmdale or a location near Long Beach, respectively. You still own the recipe and maybe control the ingredients and other things, but you don’t need to deliver from downtown. 

This is sort of how a CDN works. A CDN is a network of servers with multiple locations that aims to deliver cached versions of websites from the server nearest to the requesting user. If your website hosting provider has servers located in Los Angeles but a website visitor is located in New York, that visitor would be served from a CDN server near New York. Of course, if you are the first visitor to a website from a specific CDN server location, it may not have been cached yet. You will probably be served from the hosting server and the CDN will cache the website for the next visitor.

You do have to connect your website to a CDN service. Many website hosting companies are in partnership with CDNs and can provide that for you. If not, you can look for a CDN provider such as Cloudflare. They have a free plan available that is adequate for many websites.

Lazy is good

Lazy loading is good. Lazy loading means that certain items such as images or videos are not loaded to the browser until they are needed. For example on a very long page, you don’t need to load a picture in the footer until the user scrolls toward the bottom of the page. 

Image Optimization

One of the most common reasons for slow websites is improperly sized images. Optimized images are smaller in file size and if done correctly won’t be noticeably different for most viewers. Content management systems such as WordPress make it super easy to upload images to your website. Many themes do not set a limit for file size or they are not properly coded to serve smaller versions of images. If possible, optimize image size and resolution before uploading images. I like using Photoshop to resize images but you can also use a service such as TinyPNG. 

If you are using WordPress, you can try an image optimization plugin such as Smush or Imagify. These will automatically optimize your images as you upload them. 

Static websites

We are seeing that a lot of websites are returning to serving static files in a folder (HTML, CSS, and JS) instead of building the websites on the fly. Any time a change is made to a website by a website owner or administrator, the website is compiled/built and the files are created in a folder. When a website visitor requests a web page, the pre-built files are quickly sent back. No more waiting for the files to be built. You can compare this to ordering fast food where the food is prepared before you get there versus a sit down restaurant where the food is prepared after you order.

Headless WordPress is an up-and-coming technology that will allow administrators to access the WordPress backend dashboard they are familiar with to build or edit websites, but will build static files on the front end. We are not using Headless WordPress yet but look forward to using it as the technology matures and becomes easier to use.

Conclusion

Website speed is important for an effective online presence. It can help you make a good first impression and lead to a better ranking on Google and other search engines. For best results, we recommend building a lightweight website and using good hosting first. Adding caching and a CDN to an already optimized website can enhance results.