You might have at least once such issue like me. Browsing posts on a social media app (whether it be Facebook, Instagram, Twitter), your eye got caught by a product ad post and you'd like to know something more about it. You click on the 'Learn more' CTA and a website starts loading... and it loads and it loads... seems to be loading forever. You get impatient and decide not to wait for this page to load and loose interest in the product after all.
I had this kind of situation couple of times and it made me think about the importance of well optimized websites.
What does frontend performance optimization mean?
In simple words, it means making a website or app work fast, seamlessly with no stutters giving the best user experience.
Why is it so important?
The example above describes it pretty well. You would not like your clients/users/visitors get impatient while trying to reach you.
Making your potential customers wait for too long makes them less interested in your offer. This article describes well how poor performance can affect your conversion rate.
Poor site's performance can also make it harder to reach through search engines. Slow websites are indexed in lower positions by Google.
How can I measure my websites' performance?
You may of course launch a website in your browser and check loading time with your watch, BUT...
There are professional tools online that will measure websites' performance an will give you important notes and valuable feedback on what can be done in order to make it better and what are potential gains.
Google's PageSpeed Insights for example will give you overall performance and UX ratings. I personally recommend this tool since it can tell a lot about what can be improved to increase pages' performance, accessibility, SEO and best practices.
Common performance issues
Here I'll describe most frequent issues that make your website slow and give you advice how can you address them:
Too large image sizes - Pay attention on images sizes. Sometimes images downloaded from Unsplash or Pexels can be up to 6000px wide or even bigger. This is definitely too much even for a desktop or laptop screen. Reducing image width down (with a graphic editor of your choice) to 1920px will make huge difference in file size. Reducing picture size for mobile devices an using responsive picture tags will increase performance on mobile devices.
Additionally it's worth compressing image file sizes without quality loss. TinyPNG will take care of it for you.
Too many css and script links in HTML file - This may cause too many http requests being made in order to load necessary style sheets and JavaScript code. This can be handled by bundling multiple css files and js files into single ones. Doing it manually might take forever to do. This is why I started to get interested into JavaScript bundlers. The most popular ones are Webpack, Parcel, and my latest favorite pick - Vite.
Website waiting for all images to load - By default an HTML document loads images from entire page. We don't need all images to load right at the start. This can be solved by lazy loading - a technique that makes images load as soon as they appear in the viewport. It is described in detail in an MDN doc here.
Conclusion
In my view, since majority of web traffic is being taken over by mobile devices, frontend optimization is a matter of high importance. Loading speed of a website can have huge impact on conversion rates, sales and customers' interest. Growing variety of tools lake bundlers and image compressors as well as new HTML features make it easier to make your website faster.
In short words - Don't make your visitors wait too long.
Cheers! :)
Follow me on Twitter
Top comments (0)