How to Speed up Your Website by up to 78%
40% of users abandon a website that takes more than 3 seconds to load. 47% expect a web page to load in 2 seconds or less. Average website load time: 9.06 seconds. You do the math.
Join the DZone community and get the full member experience.Join For Free
It makes sense to speed up your website…
Consider these user expectations:
- 40% abandon a website that takes more than 3 seconds to load
- 47% expect a web page to load in 2 seconds or less (source:kissmetrics.com)
Now let’s compare these expectations to the reality of the 2016 industry standard page load time:
If users expect your page to load in 2 seconds or less, that’s a whopping 78% of site visitors who could be having a poor user experience.
If page load speed is so vital to your bottom line, it may be time to revisit your overall website speed, and how it looks to your users.
Today, we’ll look at 10 design fundamentals you can implement to help get your website speed up to scratch.
Why Page Load Speed Matters
Users expect a fast website – but why?
It comes down to a fundamental concept in UX – control.
As humans, we don’t like losing any control of our environment. We become prone to frustration and distraction easily.
A faster page load speed gives users the perspective of having more control over the website – they are controlling it rather than it controlling them.
So in turn, faster load speeds mean happier, less frustrated users.
(Plus keep your organic search rankings healthy –Google have cited page load speed as a major signal in their ranking algorithm since 2010.)
As designers, we sometimes tend to choose the path of beautiful design aesthetics over quick page load.
But when 80% of a web page’s time is spent downloading assets such as images, stylesheets and scripts (all of which form the tool belt for our design), the responsibility to improve page load time and user experience falls to us, right?
Now, designers tend to take a more holistic approach.
It’s not just the assets we should be focusing on for improving overall website speed, it’s the entire design process. Here are my tips on how to speed up your website easily:
#1: Start With the End in Mind by Knowing Your Audience and Page Goals
What’s the goal of your page?
Do you want your site visitors to take a free trial or submit an email address?
The first step to speed up your website is to begin with the end in mind.
Before you even begin mocking up visuals, compressing images, cutting HTML or writing scripts, it’s important to invest quality time upfront understanding the goals of both stakeholders and end users:
Think about questions like:
- What action do I need them to take (take a trial, buy something, read a blog post)
- What are essential elements I’ll need to do this? (high-quality images etc)
I also recommend spending quality time on your competitor’s sites. Notice which elements they use to get visitors to take action. How do they make their pages interesting to returning users, yet fresh and clear for new?
Chances are they know their audience well, so don’t be afraid to take a few notes.
Designing each page with end goals in mind will ensure every single element on every page of your site serves a purpose and function.
Superfluous elements will slow your site right down, so cut any chaff by giving your audience what they need to get the job done.
#2. Content Is Key – but Take Into Account the Structure Too!
Information architecture (IA) focuses on organising, structuring, and labeling content in an effective and sustainable way.
The goal of IA is to help the users of your site find information easily and quickly – then complete a task.
Good IA informs content strategy, user interface design, interaction design and front-end development.
Spending time on your information architecture will ultimately mean better-structured content, design and code helping to speed up your website quickly and effectively.
It will even contribute to your SEO efforts – Google will see your great IA as holding tonnes of value and give you the benefit of a higher ranking in the SERPs.
#3. Use CSS Rather Than Images
CSS (Cascading Style Sheets) is the ability to separate the way things look from what they mean.
Great news for when large, high-quality images come at the sacrifice of page load speed. eCommerce and photography sites are two major examples. Clients often want big and beautiful images and a fast, responsive site.
(Photography and e-commerce sites in particular)
If you have clients in these spaces, it’s worth exploring CSS so high-quality visuals can be created without the need for images.
Your page will load faster and perform better!
Note: It’s important to keep the size of your style sheets to a minimum – there’ll be less to load.
However, if you do use images, make sure to choose the right format for the job:
#4. Optimize Images for Faster Page Load Speed
There are a few things to consider when optimizing images:
- The larger the image the slower the load speed. If the area in which the image will be placed will be at a maximum width of 300px, then the image should be cropped to 300 pixels wide and saved at 72DPI.
- Save your image in an appropriate format. The most common are:
- GIFS(Graphics Interchange Format)
- JPEGs(Joint Photographic Experts Group)
- PNGs(Portable Network Graphics)
- SVG’s(Scalable Vector Graphics)
Depending on the nature of the image and how it will be used will dictate which image format is more appropriate. To speed up your website, choose the best one for the task from the list below:
GIFs force all the colours of an image into a 256-colour palette in order to reduce the image size. This is great for images that are not too complex and have a limited and simplified colour range. Gif also supports transparency but can usually take some effort to look smooth around the edges.
JPEG applies lossy compression to images, which can result in a significant reduction of the file size, however this may come at a cost to the visual quality. JPEG format is a common choice for compression of photographs.
PNG format is a flexible robust format and supports lossless data compression. Saving as a PNG-8 format will allow you to save a quality image at a small file size. PNG-24 and PNG-32 support transparency by blurring the edges and making it appear crisper on a transparent background. However this will usually result in a larger file size.
SVG is an XML-based vector image format. A designer would usually design a vector graphic such as an icon or illustration and save it as SVG, retaining all of its vector information. The image sizes are usually small, the image scales without losing clarity and supports interactivity and animation.
Experiment with selecting the best settings for each format: quality, palette size, etc and you will find the best image format to get that page load speed down to a minimum, and ultimately speed up your website.
#5: Optimise Your Design for Mobile Users
Mobile users have different objectives than desktop users and typically want information in quick, digestible bites. With so many mobile users experiencing problems as they load their websites, it’s a relatively easy way to gain a competitive advantage.
Here’s a quick checklist of fast fixes to make your mobile site more user-friendly.
- Eliminate any unnecessary image assets
- Use CSS3 to simulate graphical effects
- Consider using adaptive images for smaller devices
- Use media queries to control layout and inclusion of page elements
- Design specially for the mobile experience – not as an afterthought.
If you know of any more quick fixes for mobile optimization, let us know in the comments!
Until then, making you page load speed faster by taking a quick look at your code…
To speed up your website, it’s important that you eliminate extra spaces, line breaks, and indentation in your code so your pages are as lean as possible.
This can be achieved by compressing your file using minify tools such as YUI Compressor, Google Closure Compiler and cssminifier.
(But always ensure that you keep an original for future editing.)
#7. Go Easy on the jQuery Plug-Ins Jack! Consider CSS Instead…
Have you ever worked on a website with so many plugins you don’t know which one does what?
The added functionality a plugin gives is great, but too many could be the root cause of a slow site.
The solution? Again consider using CSS where it makes sense – you’ll achieve the same effect or functionality that a plugin offers but without the headaches of potential crashes and security risks.
Delete any plugins that are surplus to requirements and not only will you reduce page load speed, you’ll reduce your operating costs significantly.
#8. Run Some Performance Tests Before You Let Your Site Out in the Wild
You don’t have to fly blind every time. There’s some great free tools that put your site through its paces before you deploy:
It won’t take long to asses your website’s overall speed at all. Assess individual pages, and focus on the small fixes to help speed up your website.
#9: Choose Your Framework Wisely
There are definitely some great responsive frameworks out there that are super easy to use.
However this wealth of techy goodness will also affect the performance of your web pages, and won’t do you any favours if you need to speed up your website.
A good idea is to look at using more modular mobile-first frameworks such as Foundation from Zurb.
I have found the Grid and typography components more than enough to build a lean, fast loading website.
Alternatively, if you use CSS in a web page, place the CSS in the HEAD element. This makes the page appear load faster and it can do so progressively.
We can sometimes be guilty of creating nifty graphics and complex design at the sacrifice of page load speed, so don’t forget about the user experience element.
It’s all about control. The more in control a user feels, the happier they will be!
When you need a fast loading, good-looking yet functional website implement these tips to impress even the toughest of clients.
What are your tips for speeding up your website? Let us know in the comments!
Published at DZone with permission of Freyja Spaven, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Cucumber Selenium Tutorial: A Comprehensive Guide With Examples and Best Practices
From On-Prem to SaaS
Adding Mermaid Diagrams to Markdown Documents
A React Frontend With Go/Gin/Gorm Backend in One Project