Reaching top page load speeds can be very hard. It depends a lot on both your frontend and backend. In this article, we want to focus on quick wins to speed up your web app on the frontend side. With this easy checklist you will substantially improve the result!
How to measure?
Before you start implementing improvements you should first verify your current web app speed. The easiest way to do it is to use one of the tools that provide you with a brief summary of key performance indicators. Such tools give you insights about crucial areas of page load speed and help you identify ways for improvement. On our side we can recommend GTmetrix and Google Page Speed. Both provide extensive statistics on performance and useful tips for improving your results.
Improving Web App Speed - Checklist
1. Optimised images
When it comes to images, there is much you can improve. Firstly, you should make sure you use PNGs only when it’s necessary - for logos, images with a lot of straight lines or high contrast. In most of cases, you should stick to JPEGs, that are much less heavy, rather than PNGs.
Secondly, use proper resolutions for the images. Don’t upload a 10MB image of your logo if it’s scaled to 120px width. Make sure your images are exactly the resolution you need them to be.
Behind every image there’s much unnecessary data that slows down your app. You can use tools such as Kraken.io to remove metadata from your images. It can save up to 70% of the size.
Finally, you can leverage SVGs for graphics. SVGs are vectorized images that are perfect for icons or logos. SVGs describe perfect quality images in all resolutions, and they are still lightweight. However, it is not possible store all images using this format.
Remember to define caching strategies for the client’s browser. Browsers try hard to manage caching, but from their perspective it is much safer to avoid caching your resource by default than cache it without your consent. That’s why you should try to configure caching for all of your assets declaratively.
Content Delivery Network (CDN) is a globally distributed network of proxy servers deployed in multiple data centers. Its goal is to serve content to end-users with high availability and high performance. What’s important, CDNs can substantially improve response times to your assets for users all around the world.
5. Non-bloated and mobile-first CSS
This is not a quick win, but it can have a huge impact especially on older devices. Non-bloated CSS are stylesheets that reuse as much as possible across classes to minimize the amount of code parsed by the browser.
Mobile-first CSS is based on the idea that developers should wrap all the desktop CSS into media queries and leave the mobile as default. Thus, the mobile device browser won’t even parse the code in media queries which means that it would render faster.
6. Server side rendering in your Single Page Applications.
7. Inspect your database logs
As the app grows and more data flows through it, some database queries may turn out to be bottlenecks standing in the way of a smooth experience. Inspect your database logs and see what queries might be slowing your application down. If you’re in the Rails ecosystem, bullet is a perfect gem for pointing out which queries might use some improvement. There are also tools like NewRelic that show slow places in the app and what exactly causes them to load slowly - it’s very likely it might be some inefficient database query!
If you are continuously developing your application and introducing updates, you should track your page speed periodically using mentioned tools. You can also integrate some SaaS tools to budget and measure your page sizes. Go with this checklist yourself. Remember that page speed is important!