Things you should do in web development they don’t tell you about
Mobile devices are conquering the web — it’s a fact. Just in 2017 mobile share in web traffic have grown by 6 percentage points and will reach ⅔ of the whole traffic soon. But how can we know that we have prepared our app properly for mobile?
For me, as a junior developer, it was evident that every and each website I build must be responsive and mobile friendly, but it took much longer to realize that it is not only the layout that matters. In this post I would like to share my thoughts and experience after my three-year journey in web development and tell you what I would like to know when I was starting and what I have learned from more experienced friends.
To keep things organized I decided to split my thoughts into two separate articles. The first one will explain the most important topics and the second will be more about optimizing and polishing.
- Develop using Fast 3G mode
As a millennial and a geek I needed some time to realize that I live in a bubble when it comes to the internet speed… I’ve learned that lesson when I went on vacations with my family. We rented a flat in Croatia with a really bad wifi. The connection was unstable and the peak speed was around 5 Mbps. But somehow I was the only one complaining! The rest of my family was completely happy with the speed and the fact that it was taking them 10 seconds to load the Facebook feed. As it turned out, they had the same experience back at home. Later on I’ve checked the statistics and they blew my mind. For example, avg. world-wide download speed in Q1 2017 was around 7.2 Mbps (source). So one unoptimized image can cost you additional 1–2 second of web page loading. It’s crazy!
I am using my phone to test if the application I am working on works correctly, but being connected to high-speed wifi at the office is not the perfect setup. Fortunately, many smarter people realized it before me and created tools that can help us. To test our application in real conditions — we can use network throttling, for example using an excellent Google Chrome Online Dropdown tool.
Where to find it: Inspect Element -> Network -> Online dropdown
It will limit your internet speed to the selected option. So with this simple check, you can check how your application behaves in unfavorable network conditions.
Let’s use it ALL THE TIME when we are developing our applications to feel the same as our users might fell using our product. If you can break or find the spots where your app behaves incorrectly, it is almost 100% possible that your users will face the same problem and will be angry or will stop using the thing you have made and go to your market opponent.
Bonus:
Since Chrome 59 you can also use requests blocking tool. It’s beneficial if you want to test your application in lousy connection conditions when some requests don’t work. Later on, I will also attach a snipped which will prepare you for such case.
2. Always double check if you have optimised the images
There are various ways of how you could tune pictures on the websites, but for casual checking, you should just follow these:
- Make sure image resolution is similar or equal (depends on the case) to the one you are going to use. Graphic designers might send you even ten times bigger image, so check it before you add it to your project. The positive side effect is that the browser won’t have to downsize the images by itself so you might see some improvement in performance too.
- Change the image type. In most cases, it won’t give you that much of free space, but you should choose the proper image format and know the reason why you selected it. It’s a topic for another article, so here is a reference where the problem is well described.
- Image compression. Maybe you didn’t know, but you can save up to 80% of image size without seeing changes in image quality! There are different ways on how you can introduce this to your projects. It’s easy to forget so you might want to automate it, for example, using `imagemin-webpack-plugin` which support many different image extensions and has the broad support of options. If you believe you will remember about it or want to do it from time to time, I recommend you using imageoptim or online tool Optimizilla
I hope you will save a lot of space one you follow this tip!
3. Remember about buttons loading state
Nowadays, every app makes asynchronous requests. There is nothing worse than making our user displeased because of the lack of a loading indicator. We should always double check if we set and unset loading states correctly in our buttons, containers and other components.
4. Requests retries on errors (for fetches)
The other way to improve the feeling of our application is to add request retries behind the scenes. With an unstable internet connection, it happens more than often that some of the requests fail because of the network error. Super safe and always reliable backend also won’t save your application from such case. Why? Think of a mobile device user who is using an elevator. A request has fired, but before getting the response, internet connection has been lost. It will result in an error… for which you should be prepared. Auto-request comes with the rescue. An important note here, please remember about exponential backoffs! You don’t want to kill your backend if it has filed with millions of requests waiting for it.
Here is an example of implementing auto-retry feature by using axios library:
These are my thoughts and conclusions about the most important things. If you want to read more and learn how to use catch, learn UI tweaks and do other impressive optimizations, please consider subscribing to our blog because the second part of this article on on it’s way. I’m sure that there is a lot more to discover, but that’s the thing I love about development. There is always a space to improve, and you can sense the pleasure of learning all the time. I hope you find this article interesting. I’m more than happy to hear your thoughts on this topic, what more could be optimized and if you have already known of these things or not. Let me know in the comments!
HAPPY CODING and optimizing! 🦄
Like it? Tap the 👏 button! Thank you!
You can find me on GitHub.
