I’ve always been obsessed about fast websites and there is something that makes me cringe when I see a slow one, so I decided to write about it.
While I love fast websites, I’m also an architect of sorts at SoluteLabs and I have to balance out the ROI on the time spent by myself or the developers/designers on my team. So here are the top 11 things you need to do to get a really great website:
Compress everything
When I say compress everything, you need to take a step back and look at the different things at come up on the website:
- HTML and JS/CSS
- Images (JPGs/PNGs/GIFs, etc) and Videos
With HTML and JS/CSS, you will have to first minify everything (there are build tools available to help you with the same). Post this, you need to enable gzip on the server (checkout this post to see on how to do it on the major servers and AWS s3, AWS CloudFront)
For Images, a traditional “gzip -9” won’t cut it, you will have to compress the image without losing out much on the appearance of the same. Head out to tinypng.com to compress your PNGs and JPGs. Also, you can process jpg or jpeg compression without losing the quality from the source of the online converter.
Makes Lesser HTTP Requests
A request overhead is much higher in comparison to the actual data transmitted for smaller files. While there are a lot of ways to reduce the number, the following are the ones that will take away the bulk:
- Combine all the JS and CSS used on one page into one file each, though you can have a common JS to be used across all pages and one JS/CSS file specific to that page
- Combine all the small PNGs into one sprite instead of making multiple requests.
- Use SVGs instead of PNGs/JPGs/GIFs (like loaders and simple animations) and place them inside the HTML instead of asking the client to make another trip to the server
Load a smaller image on the first go
It’s always ideal to let the user start reading the content of the website before having to wait for the high-resolution images/video first. The best way to achieve the same is:
- Create a very low-resolution image of the def image (typically under 0.5kb) and load that initially [or keep an SVG loader]
- Asynchronously download the high-image when the user comes to the viewport
- Replace the high-def image/video when it’s fully downloaded.
You should have noticed this behavior on medium.com too and you can see it in action on our website as well
Make your Website SSL enabled
Having SSL enabled is not just a nice-to-have functionality anymore, non-HTTPS websites are now ranked lower than the HTTP counterparts.
There are a great number of benefits to get a website SSL enabled and it’s now available for free by using services such as AWS Certificate Manager and Lets Encrypt.
Upload your website on a CDN
Using a CDN will make your website load faster all over the globe (not just near to the server where your data is hosted).
We recommend the use of Cloudfront with S3 if you’re hosting a static website, it’s a great option for scalable websites.
Cache all you can
It’s important to avoid round trips to the server if the content isn’t going to change anytime soon. You can leverage caching by changing settings on your web server or if you’re using S3/Cloudfront, you can add the same in the metadata section.
I will cover more tips in the next article :)
About Solute TechnoLabs LLP
We are a bunch of passionate technocrats who love building products and applications that we take pride in. Our mobile and web applications have been downloaded and used by millions and we’re here to change the internet: One piece at a time!
