How to Optimize Your Website for Page Speed
Estimated reading time: 7 minutes
Why is page speed important?
Whenever you visit a website, what are some of the initial things that you might expect, that should be standard? Good content, nice imagery, maybe some cool animations. But what about the speed of the website? Is the load time anything that you would consider? I bet the answer to that question is: Probably not.
That is, until the page takes multiple seconds to load. Think about the last time a website loaded extremely slow for you. What was your reaction? Did you wait it out for the page to load or did you get out of there and browse elsewhere on the internet? Yeah, I left that slow website too.
Statistically, about 40% of people will leave a website that takes 3 or more seconds to load. That percentage jumps up to 53% when on a mobile device, where page speed is especially important. Now, 3 seconds may not sound like that long, but when a user is conditioned to expect everything on their devices to be instant, 3 seconds can seem like a lifetime. The process of visiting a website and leaving after the first page is known as bounce rate.
Say you have an e-commerce website that does pretty well. Let’s use $100,000 per year in sales as an example for this e-commerce website. If that website had even a 1-second delay in load time, that can result in a 7% reduction in the user base on that website. That roughly adds up to about $7,000 of lost revenue per second of load time. Your lost revenue can add up quickly if your website is loading slowly.
In addition to bounce rate, page speed is also an important factor in Search Engine Optimization (SEO) rankings. Google now ranks websites based on page speed and load times. SEO is important because the higher the ranking, the chance for more traffic to a website increases, which can lead to more revenue or sales.
How to improve page speed?
There are several ways to improve the page speed of a website with some being easier than others. Even taking one or two steps to improve your website’s load time will result in better SEO results relatively quickly, so it is important to do as much as one can to make their website as fast as possible.
I would suggest starting with some simple but effective methods to improve the speed of your website, such as leveraging a caching plugin, optimize/minify all media, such as images or video, or use a Content Distribution Network (CDN) to host and deliver images to your website from a separate server. A Content Distribution Network is an external server or library that hosts necessary files, such as images, videos, etc, separate from the source files of the website. This means that the server has fewer files and resources to load, resulting in faster page load times. These options can all be handled with a plugin, or if you have some experience with code, handled within the code itself. Which leads me to my next point.
For those who are a bit more confident with their coding skill, writing and maintaining clean code is the first step a developer should always take for the sake of website performance. In addition to writing clean code, minifying the code before it is moved to the server is a must as well and will drastically improve the speed of a website.
A simple definition of minification according to Google Pagespeed Insights: the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. This process makes the file size smaller and more efficient for the server to process, leading to increased website page speed.
In my experience as a web developer, I have found that it is more difficult than it sounds to write and maintain good, clean code. When I mention clean code, I mean code that is neat and easily maintainable and is built to last for many years. Code that a developer can open years after the website has finished and understand exactly what is going on throughout the entire project.
One of my favorite quotes when it comes to this topic is:
“Any fool can write code a computer will understand. Good programmers write code that humans can understand.”
Martin Fowler
It is always the intention of the developer to write the best code possible, but in reality, that doesn’t usually happen. Why? Well to start, most clients simply do not understand or value what it takes to code a website from scratch and to write that code well. Most clients want a functional website that looks great on the outside but don’t necessarily care for how well the code is written, as long as it works.
Now that is not to say that all clients don’t care at all about clean code, sometimes it just comes down to the timeline or the budget. Writing clean and maintainable code can take some additional time versus throwing together code that works but isn’t necessarily ‘pretty.’ It can be difficult to justify the extra cost or time needed to write the best code possible, because if it works then it works, right? Technically, yes. But down the road when that developer needs to make edits or the project is passed along to another developer, that huge mess of code will be difficult to interpret or work with, even for the developer who wrote the code in the first place!
The simplest definition of clean code would be well-written, structured syntax that uses the least amount of code to accomplish the goals or the website. Clean code is also the use of descriptive naming conventions that make variables or classes easier to reference down the road. The use of plain or vague naming conventions may seem easy and harmless in the beginning, but once a project grows and some time passes, those same variable names can be difficult to remember down the road.
For example, if you were to ask someone directions to a grocery store, it is safe to assume you would want the simplest yet effective way to get to your destination. Not some disorganized spew of sentences that technically will get you to the grocery store, but in a more difficult, time-consuming way. The same thing happens with messy code. If the code written is disorganized and inefficient, the server will have a harder time processing the files, impacting the speed of the website.
Messy Code Example:
“Take a right out of your neighborhood, drive .85 miles, take the third left at the street with white lettering (vague variable name). Then go straight for a few miles, take a left, then another left, then another left, and go straight. Find the large, yellow building with the red, uppercase sign (vague variable name).
Cleaner Code Example:
“Take a right out of your neighborhood and head straight and take a left onto Pinewood Road (more descriptive variable name). Proceed straight and take a right into the grocery store parking lot. Look for the large building labeled ‘Grocery Store’ in red (more descriptive variable name).
In addition to writing clean code is the optimization of that code, typically through minifying the CSS and JavaScript. Minifying code compresses all of the code and removes all breaks, white space and more to make the files as small as possible. This in turn delivers smaller files to the server, typically resulting in decreased load time.
All that being said, page speed and website load times are very important on the internet today and becoming more so as time goes on. More and more people are using mobile devices to browse the internet over their desktop counterparts, therefore increasing the need for fast load times and quick websites. People want content now, not in 5 seconds, so it is important to take that extra development time and write clean, maintainable code, optimize media on a website and utilize the available caching plugins out there to give you an advantage on the Internet.
