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.
╔═══════════╦═══════════════╦════════════════╗ ║ 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.
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.
An average webpage grows 15% in size every six months, thereby making it "bloated"
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?
WebFast is a service that AMPifies your entire website. Check us out at https://webfast.co or email us at email@example.com and our AI can speed up your website within a week. We don't need access to any of your internal APIs and there is minimal technical work involved.
Lightning Fast Websites.