The websites look nice but take a long time to load. You may start thing how to speed up a website. The problem is that people are impatient and used to getting everything right here and right now. If they are to wait for something, they give up. When choosing between a nice look and the speed of loading a webpage, you should always choose speed.
Some time ago I created a website promoting “Błędne Skały” and in general the website is visually very nice, but it had such a drawback that it took an unbearably long time to load. I wondered how to speed up this website. Fortunately, the developer tools in Google Chrome help with this task. The first is the “Network” tool in the developer tab, which shows the weight of each uploaded website file and the time needed to load it.
The second tool is Audits, also available in the developer tab. This tool not only examines page loading speed but also evaluates SEO and shows how the page is displayed while loading. These two tools already give a lot of knowledge about how fast a page loads and what grades it will receive in the study by the most popular browser on the web. It is worth having good marks in this ranking.
How I speed up “Błędne Skały” website
“Błędne skały” mainly underwent a slimming photo treatment. https://tinypng.com/ is a great tool for compressing photos without significantly losing their quality. I don’t know what the slimming algorithm is about, but it’s important that it works. In addition, I noticed that some of the photos added to the website had a higher resolution than displayed on the website. Looking at it objectively, it is completely unnecessary to slow down page loading. Worse still, it is an unnecessary waste of customer transfer, which is limited especially with cellular connections.
How I speed up HydroApp webpage
The second subject of optimization was the HydroApp application. Ultimately designed for users of mobile devices. Most of the code in this application is on the JavaScript side. It is difficult to optimize the HTML code, but it turned out that it was possible to perform optimization using the functions offered by Service Worker.
Worker Servers is a script that runs invisibly to the user and allows the web developer to run the code in the background. One of the interesting options that the Worker Servers allow is the ability to download the necessary page elements to the cache memory on the device.
This allows the site to download heavy files only once, without having to download the same files each time a user visits the site. You can also download the entire website to the cache so that it will work offline to the extent that is available without the need to interact with the server.
The Hydro App is not a large site, so I decided to cache everything the first time I run it and then sync it with the server when the network is available. In practice, however, the application doesn’t communicate with the server, because the number of glasses of water drunk is stored in the browser cache. Thanks to such a procedure, the user gains the possibility to use the application even when there is no network access.
Finally, this week’s curiosity, React View. If you want to let design people play with components in React, this has become a great tool for that. In Polish, it could be called an online code generator. https://baseweb.design/blog/introducing-react-view/ the tool gives a lot of freedom in modifying the behavior of components, which affects the interaction of the application with the user. In the design phase, such a tool significantly speeds up the work.
This week I spent twelve and a half hours optimizing my pages.