Today’s article, we will look at the main reasons why web presentations on mobile devices are sometimes slower than on classic computers. At the same time, we will show you some tips on how to achieve faster responsive websites. For example using CSS blocking and getting rid of document.write in JS.
When you’re making something
when you’re prototyping interactions, I want you to ask yourself, “What am I thinking about? On how my watch ticks, or my users’ watches? Paul Ford, “10 Timeframes”
Why is loading so slow on mobile?
Load times of around ten seconds are still common on modern mobile networks. But this is only a fraction of loading times in countries with older and more limited networks. Why is loading so slow? It’s mostly our own fault: we have websites that are too big and often built and delivered in a way that doesn’t take advantage of the browser’s capabilities. For example, they do not use predictive browsing features .
According to the HTTP Archive, the average website is 1.7 Mb. (In the meantime, the average may have gained some more weight, better look it up again.) But it’s much worse than it looks. Most of the sites examined on the HTTP Archive are not only not responsive, but represent only one of many possible use cases: a classic desktop computer with a large screen.
This is very bad news for responsive (and, er, responsible ) designers who don’t just focus on a single device switzerland phone number data type, but try to support as many device types as possible with a single codebase. To pour clear wine, most of the changes to responsive design were somehow related to how the file sizes of responsive websites began to swell in our landscape.
Responsive websites are still huge!
Oakley’s undoubtedly sensational Airbrake MX website , which originally launched with a monstrous 80 megabyte file size (but was later heavily optimized to be much more responsive), or Disney’s media-rich homepage, which serves up a five-megabyte responsive website for any device.
Trying to support all browsers and all devices with a single code base can certainly have an additive effect on file size — if we don’t take appropriate precautions to prevent this. The inherent nature of responsive design involves delivering code ready to respond to conditions that may or may not occur. With the toolset we currently have, it’s not easy to deliver code only when it’s needed and only where it’s needed. He puts all kinds of tricky obstacles in the way.
Anatomy of the page loading process
Responsive responsive designs are achievable even on the most complex and content-heavy websites. However, they will not become such on their own. Delivering fast responsive websites requires a thoughtful focus on delivery systems. How we serve and apply assets has an enormous impact on the perceived and actual i don’t have that magic touch page load performance. How we deliver the code matters more than how much it weighs.
Responsive delivery is difficult, so in this chapter we will thoroughly and from a practical point of view optimize responsive assets with regard to their final delivery over the network. But first, let’s walk through the anatomy of the loading and cg leads incremental improvement process to understand how client-side code is requested, loaded, and executed, and where performance and usability bottlenecks occur.