Take a few moments to think about how you go about the search for different things on the internet. If a website takes too long to load, how quick are you to close out that particular tab and open up a new search engine result?
How likely are you to return to a website that takes a while to load if you are searching for something along the lines of local news stories or weather reports?
If you are trying to run errands and look at your mobile device at the same time, what amount of patience are you likely to have when it comes to potentially having to endure long loading times depending on your location when you are trying to perform certain online tasks? Let's face it: when you don't have a lot of time, your expectations in terms of website performance optimization are likely to increase.
Image source: Joe Baker
Whenever the topic of website performance is discussed, a number of terms can emerge that can sound rather geeky or nerdy. These terms (minifying, DNS lookups, etc.) are ones that likely will not catch the attention of individuals who are not very tech-savvy.
This translates into the misconception that website performance is an issue that only developers should be concerned with since they have a great deal of technical knowledge.
Here are a few useful website performance tips to keep in mind
If there is a serious delay, then this is something that can generally interrupt the train of thought of the user. It will ultimately lead to negative user experience. Your web page is not required to load within this time frame, however. So, go for lazy loading images, leverage browser caching, and minify your CSS and JS, among others.Â
Concentrate on satisfying all of the demands of your users by offering many different options. Most people usually don't have a few extra minutes to spare, so they will find this move to be very useful.
Do everything you can to ensure that download speed is as quick as possible. If the download speed is too slow, users will likely not stick around your website for very long.
There are a few things that should be considered whenever you want to develop a new website:
- Layout
- Hierarchy
- Intuitiveness
- Ease of use
- Speed
The overall experience of your website will determine how much your audience actually trusts your brand, as well as returning to your website in the future and sharing it with other people that they know.
The large part of this user experience includes not just page load time, but also how your page itself feels. Both of these aspects need to be weighed equally with all of the other aesthetics of your website.
A spectacular design is useless if it doesn't load fast
Image source: Justas Galaburda
I know you might be looking at the best interactive websites and want to create something similar. But that isn’t a good way to approach designing a website. Those websites are mostly publicity stunts and have no practical purpose.Â
Creating a website that loads as quickly as possible is typically priority number one for any website designer. It is also the top rule that really any designer should follow. Look at these London startups websites, for example. Most of them are loading insanely fast because they want to convert their users. They’re not just a an “exhibition†type of website, like the aforementioned interactive websites are.Â
While you may have a spectacular design for your website, not many people will be able to see it if it takes too incredibly long to load. Always take the time to think about how long it will take for your website to load.
Compress images
Image source: Amorn
Images are what typically take up most of the downloaded bytes, as well as a significant amount of space on a page. However, optimizing images can also help a great deal as well.
Whenever a browser has fewer bytes to download, there will be less competition for a client's bandwidth, which means that the browser can download and display things much quicker. A website will load much faster whenever images are used in a lesser capacity, even though they do greatly enhance a page.
Use web fonts instead of image icons
Instead of using PNG icons, try using a web font for your icons. The most important thing about icon fonts is that they scale. No matter what size you want for them, they will meet your demands.
If you aren't a fan of Photoshop then this will make you happy. With icon fonts, you won't need any work to be done in PS. No more "saving for web" a lot of icons.
And most importantly, their speed is what matters most. They're fast and image icons don't even compare to them.
Heavy sites are not mobile-friendly
Example of a good site for mobile: David Boyero
Whenever you resize the browser when designing a website, you get the impression that it is mobile-friendly. However, if you think that responsive web design is your only goal and solution in terms of mobile, you stand to lose a great deal of money. If a website takes longer than five seconds to load, approximately 74% of all mobile users will end up leaving that website.
Take a lesson here from event booking systems. They offer just the basic needs of the users. No visual fluff, no extra CSS or JS to load. And it looks great on any device, mobile or browser.Â
If you don’t want to use one of those popular CSS libraries like Bootstrap or Foundation which have a great deal of extra CSS and JS, look at some of the more barebones libraries that have just the necessary bits.Â
Before you check on the final design of your website, take the opportunity to check out its total load time. There are many different services that you can take advantage of for this, which can provide an analysis of your website, oftentimes for free. Even if you have to use one of these services repeatedly, it will be well worth it in the end.
A few website performance testing tools
Google PageSpeedÂ
This service works to analyze your website before giving it a rating out of 100 for both desktop and mobile. You will also be provided with suggestions on how to make improvements where they are needed.
Pingdom
This is a service that tests the total load time of all objects of a website. You will also be able to improve any slow-loading elements, as well as view various reports.
Gmetrix
GTmetrix gives you insight into how well your site loads and provides actionable recommendations on how to optimize it.
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.