You have no idea how often I encounter slow-loading websites. Unfortunately that is hurting businesses more than they think. An impressive 64% of smartphone users unforgivingly expect websites to load in under four seconds, yet average page waits continue to rise.
You have one shot at grabbing your potential customer’s attention, if you miss it, too bad for you!
Why are sites so slow?
WordPress and common page builder don’t optimize the speed of your website. These solutions allow for fast iterations and keep cost low. However, it is very easy to make your page slow quickly, since these solutions focus on the ease of website creation, not on website performance. This is not to say that it is impossible to build fast and lean websites with WordPress and alike – it just means that you need to use those tools wisely.
How to avoid poor website performance.
Do Responsive the Right Way
Having a mobile friendly website is an absolute necessity these days – but not at all cost. Making a page responsive doesn’t help if it takes forever to load. Mobile users are more impatient than ever and not everyone benefits from high-speed LTE networks. It’s preferable to manage projects through a mobile-minded structure, with designers and developers collaborating from the start. Setting measurable expectations (KPIs – key performance indicators) is essential. You as the (future) owner of a website should care about the performance of your website. Telling your development and design team early-on that you are willing to assign some resources to site-speed is important.
Performance Budgets
Multiple data streams are loaded when a website is loaded into the web browser. When talking about performance budgets we talk about the amount of data that is required to completely render the page. Some suggest that a website for mobile phone should not consist of more than 500KB. However, many responsive websites contain multiple images where one image already exceeds that limit. This is not always your developer’s mistake 🙂 Insisting on fancy features and designs on mobile can lead to terrible performance budgets. Always ask yourself about the purpose of the website. Do you want to show-off, or do you want to convey an idea? In many cases bringing a message across correctly is much more important that fancy design or features.
Optimization Techniques
I usually don’t want this newsletter to be too technical. I am going to keep it as simple as possible, but I won’t get around throwing some tech-jargon at you this time.
Website loading speed is driven by client- and server-side factors. The client is your browser (Chrome, Firefox, Safari,….) and the server is your hosting platform. You may want to show this list to your developer/designer and discuss which techniques you want to apply. You don’t have to implement all of them, although that would be ideal. A word of warning – this is going to increase the cost of your website since all of these techniques require professional expertise. The two lists below are a summary of Danny Bluestone’s excellent article called Managing Mobile Performance Optimization.
Client-Side Optimization
- Only use code libraries that your really need.
- Separate the CSS used to render the visible part of the page (above the fold) first; defer the rest of the styles to load after the page has been rendered. A variety of tools can help you determine the CSS to separate, including Scott Jehl’s Critical CSS and Paul Kinlam’s Bookmarklet tool.
- Optimize images. Heavy colored photos work better as JPEG files, whereas flat color graphics should be in PNG8. Gradients and more complex icons work best as PNG24/32 with alpha transparency, or SVGs.
- Most CMS systems allow some degree of media optimization – use them!
- Deferring font loading can be achieved by separating the part of the CSS that links to the font files, and loading it after the rest of the page has been rendered.
- Load only the precise data needed, by optimizing for each breakpoint. Take this further with conditional lazy loading techniques to raise the perceived page speed.
- The BBC’s Responsive News refers to the idea of giving the user the core experience they request, then evaluating the user’s environment and enhancing the experience accordingly.
- Incorporating feature-testing libraries like Modernizr or has.js is a common, recommended practice. But too many developers implement the entire library; they test for all capabilities, even though only a small number of results are needed to determine whether to add features.
Server-Side Optimization
- Cache content. This means that one helps clients to avoid loading all the content, each time they visit a site. For returning visitors, instead of processing from scratch, it will check the cache, and only send updates.
- Many also choose JavaScript template libraries like Handlebars and Mustache to handle web content. But parsing and executing JavaScript is power- and time-consuming. Rendering pages completely on the server is much faster.
- Browser caching: Granular optimization can streamline website loading by preventing regular transfer of files you know aren’t updated often.
- Make use of CDN’s (Content Delivery Networks). Here, static content (like images, fonts and CSS) is stored on a network of global servers. Every time a user requests this content, the CDN detects their location and delivers assets from the nearest server, which reduces latency.
Conclusion
You as the site owner need to first care about web performance. Then you need to collaborate with your developers and designers and ask them to help you find the perfect balance between design, features and web performance. Just know that both your users and Google will penalize you for serving them a website that is just too slow!