Slow loading website hurts UX and SEO
Optimizing your website for fast loading is not easy. Images, films, real-time updates and animations can really bloat your website.
And you having a fast internet connection doesn’t mean everyone has one. Especially when doing business globally.
But it’s not even just about speed: it’scost as well.
Lower ranking in Google
As Google takes speed into account when ranking your website, your slow loading website will cost you too!
Optimize your website for fast loading
So here is what you can do.
Most importantly, of course, is to remove all that’s not necessary. Try to adopt a mobile-first approach when building the website. Trying to get your key features on that tiny screen will make you think twice about unnecessary stuff and improve your page loading speed.
Get the most out of your hosting — for the price you’re willing to pay. Most hosting services can get you on faster servers and thereby speed up the loading time.
Minify, Compress and cache
Compress your content on the server, e.g. by using mod_deflate in your .htaccess file.
This will tell your server to compress the files, so they will be the smallest they can be.
Use and control cache to avoid server calls, e.g. by using mod_expires in your .htaccess file.
This will tell the browser of the visitor to save some of the files locally for later. So next time this person will visit your website, he will get those files instantly, without a call to your server.
See this boilerplate collection for even more awesome optimal settings for Apache and other server.
Combine files or use HTTP/2
Each call to the server is delaying other content being downloaded. So combine multiple files as much as possible:
- use only one CSS-file
- one JS-file
- Use a sprite for images
- Use a sprite for SVG
But — when you use HTTP/2 — forget the previous sum-up as it will actually hurt your loading time, since HTTP/2 will load multiple files faster than a larger single file.
Use the best available solution for showing your web fonts to minimize the FOIT (Flash of Invisible Text).
But do compare your proposed solution with the “normal” embed (e.g. link to stylesheet of Google). Google actually sniffs out the browser and will serve the best files without extra bloat (as opposed to serving woff, woff2 and ttf files from your own server). On this website it turned out that the normal embed was more efficient and brings the most minimal FOIT.
Reduce your image size as much as possible:
- use the maximum image size you will render (i.e. don’t use images of 4096 pixels wide when your website will be limited to less)
- Compress your images by using services like https://tinyjpg.com
And optionally you can ‘lazy load’ your images — after rendering the page. Lazy loaded images will be loaded when they enter the viewport of the browser. Take Pinterest for example.
Try one of these ‘lazy load images’ frameworks. But these frameworks are only useful when you use large images or a lot of them.
Choose a Wordpress theme that’s optimized for speed (and get some proof). A lot of themes are beyond bloated and will make your pages way too big and slow.
Test your speed
Always test your website for improvements and the effect of these improvements. Don’t forget to disable caching when testing (e.g. by opening developer tools in your browser and choosing not to cache). And use Google Pagespeed to get good insights.
And when the optimizations are not enough, use a skeleton screen to let users know content is being loaded. A skeleton screen is an visual representation of the website that will be removed when the real content is loaded.
Nowadays all big players like Facebook and Google are using this at least on mobile.
Or when you have large images, show them progressively. For instance with Progressively. This will first load a tiny version of your image, which will look blurry, but will gracefully change to the real image when it is loaded.
What should be the next chapter?
Got an idea what the next step should be? Or maybe I missed one? Please let me knowFollow me @DanielKoster_UX