Easy Speed Optimization for Web Developers

A majority of the web is still accessed via slow 2G networks, so when it comes to web speed optimizations, developers should take the responsibility to make their web apps as optimized as it could possibly be.

Most of you might think that increasing speed performance trades of with user experience. Well, frankly speaking, most of the time it does, but it doesn't need to be that way!

In this article, I will be sharing top 3-speed optimization strategies which will help you bring a smile to your users face even on slow network speed.

1. Images

Images should be the appropriate format, compression, and size; and loaded only when necessary

The images commonly contribute to a majority portion of your website. Thus, it is very important to serve your static images in an optimized and performant way. To be successful with images, it is necessary that you automate and systemize them.

Checklist :

• Appropriate format
• Appropriate compression
• Appropriate for display size and density
• Loaded only when necessary (lazy-loaded)

2. Fonts

Minimize flash of invisible text by showing text immediately. This is also commonly known as "Flash of Unstyled Text" (FOUT).
This generally corresponds to the when the browser initially displays text using a system font and then swaps it out with a custom font once it has arrived. In order to make this possible in your webpages, all you need to do is, everywhere on your CSS where you declare a font-face add the line

This tells the browser to add the swapping behaviour mentioned above.

3. JavaScript

Google Lighthouse

The intuitive web that we use today is made possible using the magic of JavaScript. chance are you are using one of the several frameworks and libraries in your web apps. With JavaScript rendering HTML and CSS to browsers, you need to reduce JavaScript payloads by splitting your bundle. 

The idea behind code splitting is, instead of sending all the JavaScript code to your users as soon as they load the very first page of your application, only send them what they need for their initial state and allow them to fetch future required chunks on demand. The best way to use this in your code is by using dynamic imports

If you are using a fancy web framework which uses Webpack, then happy for you that Webpack supports dynamic import for quite some time now, which allows you to load a module asynchronously where a promise gets returned, once that promise gets resolved, you can pretty much do anything with that piece of code. A number of frameworks like Vue, Angular and React already provide a nice layer of abstraction on top of dynamic imports. 

Hope that helps, until next time, 👋