How I made my website load 3s faster in 5 minutes
Intro
- The website is my design portfolio.
- I am a UX/UI designer. I have a background in development.
- The website uses Vue.js framework, and I have full access to my hosting.
- I’m using apps and plugins to improve the UX and to make the website fun to use.
1. Reduce image size ⬇️
There are so many ways to reduce the image size like Photoshop, various native and web apps.
I use CodeKit because it allows me to see the difference in size, whether or not the file has been minified to avoid reducing quality and it can do all this automatically.
2. Load resources from your server 🌐
I have all the licensed fonts, images and vue-elevator sounds saved on my server, which means it doesn’t need to ask around the internet where it is (DNS), and it is much faster from about 2s to 600ms for the 628KB sound.
3. Implement resource hints 🚀
If you don’t know much about this, CSS tricks has a great article on all of the rules: https://css-tricks.com/prefetching-preloading-prebrowsing/.
The one that is useful in my scenario is prefetch because when the user clicks on the elevator button with sound, it is already loaded with low priority. In the default scenario, the music would stop playing 600–2000ms after the click, and the scrolling might already be over (and the sound cancelled).
There are many other scenarios where you would want to preload or postpone resources. You can also significantly speed up loading external resources.
4. CDN and automatic deployment
I was a longtime user of CloudFlare (Content delivery network provider with servers around the world), but after the surge of controversy them using customer data for profit, I was seeking an alternative. There are so many products on the market today.
I love simple and elegant solutions, and Netlify can deploy your web applications, run multiple branch previews and A/B testing. Every time I push a commit I receive an email with a link ready for testing or deployment.
Results
So is this all worth it? Yes, see for yourself!
- I am using Netlify in both versions.
- Three tests resulted in average 4.74s without improvements and 1.58s with improvements.
- That is on average 3.17s faster (33%) than before.
- If local mp3 cuts the time by 1.4s, then the image reduction saved 1.77s.
Why are 3 seconds so important?
- You subconsciously perceive the difference as more dramatic than it actually is.
- On the other hand, Facebook had to artificially slow down pages to keep the user expectation of how long such page should take to load and not feel cheap.
Amazon found that every 100ms of latency cost them 1% in sales.
Obama for America ran A/B testing and found 3s page load reduction led to an increase in donations by $34 million.
Google says every .5s increase in load time results in traffic drop by 20%.
“You are no Amazon or Obama.”
- 💸 My main metric is the number of clients and recruiters reaching out to me, and it suffers from the same negative impacts.
- 🦘 You might find yourself in a situation when your connection is very slow. Also, it helps reducing data transfers which is good for everyone! Especially when cables are thin like here in Australia.
- ❤️ I wanted to share my experience with you.
