From a sheer scale perspective, over 70% of traffic today comes from mobile web. A 2017 customer survey revealed that the average mobile web user waits for less than 1.2 seconds before moving on.
Your users become extremely impatient when 🚶:
- Find your story off their Facebook feed and page takes ages to load.
- Search on cell phone from a mobile device and the page takes 2+ seconds to load.
In the age of AngularJS, React, Progressive Web Apps and other Javascript frameworks, page load times are extremely critical.
╔═══════════╦═══════════════╦════════════════╗ ║ Framework ║ # of requests ║page load times ║ ╠═══════════╬═══════════════╬════════════════╣ ║ AngularJS ║ 95 ║ 3.5 sec ║
║ ReactJS ║ 89 ║ 2.9 sec ║ ║ WordPress ║ 104 ║ 4.3 sec ║
║ WPEngine ║ 92 ║ 3.5 sec ║ ╚═══════════╩═══════════════╩════════════════╝
avg. numbers for top-1000 sites using each technology
SPAs (Single Page Applications) are fantastic when we build our websites, they offer out of box solutions, amazing UI and more importantly we can quickly iterate. However, all those benefits come at a cost, page load times are excruciatingly slow, in addition, the number of requests means your phone is making all those connections on LTE network 📱, thereby slowing down the experience.
Given below is a list of solutions to top-5 problems faced by mobile websites.
- Limit the number of tracking pixels. As a marketeer, we want to track every activity made by our users as it helps us to serve the users better.
However, every tracking pixel that we add, increases the page load time by 150ms. Given an average website has 4 pixels, this easily adds up to half second.
Solution:Limit the number of tracking pixels to 2. And uses async tag where ever possible. - Over 60% of websites fail to have a consistent desktop and mobile experience. Frameworks such as Bootstrap are useful, applying them across devices (desktop, tablet, mobile) and operating system (android, iOS) makes the problem extremely hard. The fragmented long tail of devices implies company needs to support at least 20 different types of mobile devices to cover 70% of the market.
Solution: Chrome developer tools offers a variety of responsive settings, use them to your maximum advantage and maintain a unified behavior across mobile and desktop. - Custom fonts and images account for 70% of page load times. While CDNs exist for Google Fonts, Font Awesome, Bootstrap, only 20% of websites leverage the default CDN.
Solution: CDNs are nice, they load fast, however, the best low hanging fruit out here is to restrict the use of custom fonts to one or two fonts only. - Over 80% websites render unblocking JavaScript, implying users have to wait full 3-5 seconds for page to even show-up! SPAs account for majority of render blocking issues, and while Server Side Rendering and other optimizations exist, the solutions are far too complex for average website to implement. 80% of websites load slowly only because the CSS isn’t optimized for render.
Solution: Use static HTMLs as far as possible, and more importantly, do not use background images in CSS, they are the worst render blockers.Only 20% websites render unblocking JavaScript, implying the rest 80% of websites make users wait 3-5 seconds! - An average webpage grows 15% in size every six months, thereby making it “bloated”
Part of it is attributed to the web getting bloated, part of it is attributed to javascript libraries and images that are unused and exist purely for legacy reasons
Solution: Always spend 10% of your time in removing tech-debt, cleaning up existing code, and removing old/unused code. While this work isn’t always interesting, the hard work returns 10x in rewards.
Do you have a website that is extremely slow for mobile web?
WebFives is a service that AMPifies your entire website. Contact us by clicking the here.
