On the verge of the fight of JavaScript frameworks and discussions of why we as web developers mostly failed to provide a healthy web, revisiting fundamentals for building websites that don’t only look great but also perform better on mobile becomes even more important for both developers and businesses.
The web browser is the most widespread deployment platform available to developers today. It’s naturally installed on every smartphone, tablet, laptop, desktop, and any other format in between. Cumulative industry growth projections have been studied over the past years approximating over 38 billion connected devices by 2025 — each one of them with a browser, and at the very least, either WiFi or a cellular connection or both. Regardless of the version or OS on them, each device will have at least one browser, which by itself is getting more features every day, some notable ones are PWA, WebVR, WebAssembly and etc.
Today, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It’s the primary way people experience the web, not a second thought as it used to be 15 years ago. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we going wrong?
What’s the problem?
The pitfall where many developers and businesses fall into is the assumption of having their users use their products on the latest spec high-end mobile devices over permanent internet access. We lose ourselves in the discussions of micro-optimizations so much that we forget about our core value — being user-centric.
Our delusion
In a perfect world, we would have permanent internet access and everybody would own a super-fast mobile device equipped with the latest CPU and memory hardware. Unfortunately, this is not a perfect world.
“A visualization of Time-to-Interactive highlighting how a poorly loaded experience makes the user think they can accomplish a goal, when in fact, the page hasn’t finished loading all of the code necessary for this to be true.” — Addy Osmani “The Cost Of JavaScript In 2018”:
We have to maintain users using low-end mobile devices, users who roam around the world, users who travel outside of a data coverage area, users who use a poor local WiFi in a cafe as our main target audience.
“The cost of Reddit’s JavaScript across a few different device classes (low-end, average, and high-end)” — Addy Osmani & Mathias Bynens “The cost of JavaScript in 2019”:
By adding high-end only features progressively if only a user’s network and hardware can handle it, we can deliver a fast core experience to all users and make our products accessible more than ever before.
Underestimated a core value — being user-centric
We have a tendency of getting lost in discussions on micro-optimization and of overcomplicating things too much that we forget about our main goal while delivering a product to the world.
When you overcomplicate the simplest task: %[youtube.com/embed/_sdT9t5Ha_U]
We easily become fanboys of a specific technology or framework and we almost forget what is the most important factor for our website — it’s the users!
Building a friendly, accessible and fast user experience to ALL our users should be the core of our business. When we put this goal in the center of our business and culture, what tech we use to deliver an interface becomes obsolete as long as it performs well for all our users.
So, please stop making fun of developers and websites that use jQuery to introduce interactivity to their web pages. It’s still the most popular JavaScript library ever created, and it’s used in 85.03% of desktop pages and 83.46% of mobile pages according to WebAlmanac. Although there are many Browser APIs and methods to replace most of the functionality provided by the library into a native form, such as Fetch and querySelector, it might still be a perfect fit for your next mobile web app. Take Booking.com, it still uses jQuery on their home page and it’s one of the fastest loading e-commerce websites.
Users don’t care if you use latest tech trends or a technique that helps you micro-optimise even though it’s not needed. Users care if it works and if it works fast.
Performance as a culture
The scale of the web brings us billions of connected devices and the enormous user base for online services, with the high demand for high-performance web applications. As noted many times in performance-related books, talks, and articles, speed indeed is a feature. And for some businesses, it’s the feature.
There are online services like SpeedCurve which benchmark your site against your competitors, correlate web performance with user experience, measure when your most important content renders and track the impact of web performance on your business metrics.
If you don’t bring a performance culture into the core of your business, you might declare a performance bankruptcy as Vox did a couple of years ago.
Comparison of the performance metrics of Verge and it’s competitors:
Good performance is everyone’s responsibility; from designers to developers, ops to ads, to editorial and beyond.
If we do our jobs well, everyone will be more informed about how their decisions affect the overall performance of our platform.
— Declaring performance bankruptcy By Dan Chilton
As openly came out on Vox’s statements, we all have responsibilities to bring a performance culture to the core of our organization.
PWA-first approach enforces mobile web development best practices
When you build a mobile application, there are many aspects to consider. Some are the ones you might have never considered while building a desktop website.
Gartner recently published an article where Forbes Technology Council discusses the 12 key elements that a business should be mindful of when developing a mobile app. As a PWA evangelist, it’s no surprise for me to see the section “The Advance of Progressive Web Apps” recommending considering Progressive Web Apps (PWAs) over native apps.
Consider progressive Web apps (PWAs) over native ones. PWAs are growing in popularity because they create a better user experience. They’re smaller in size, load faster and are more secure, and users can access them the same way as apps downloaded from app stores. Some of the industries already moving to cost-effective PWAs include financial services, medical manufacturing, construction and others. — John McDonald, ClearObject
What is PWA-first?
Progressive Web Apps have been around for a while now to provide native-like app experiences on both mobile and desktop platforms. And, similar to the mobile-first movement, there’s a new movement called PWA-first.
This idea helps you to build and monitor your website from day 1, caring about many user and performance-oriented features such as;
- Speed
- Offline-capability
- Progressive enhancement
- Accessibility
- Jank-free animations
- Fluid layouts
Metrics matter
Adopting the PWA-first approach helps you on putting metrics and monitoring within your core business and development workflow.
After the initial launch of your website that is optimized for mobile, it’s crucial to monitor your metrics and application performance. It brings user experience and satisfaction into your culture and helps the whole organization to further maintain those metrics by also improving them in time.
Organizational performance budgets ensure that a budget is owned by everyone rather than just being defined by one group. — Addy Osmani
To maintain a healthy mobile web strategy for your business;
- Understand performance metrics and budgets
https://web.dev/performance-budgets-101/ - Introduce budgets for your website, either over rule-based or quantity-based metrics
https://developers.google.com/web/tools/lighthouse/audits/budgets
https://web.dev/your-first-performance-budget/ - Integrate lighthouse in your CI either by yourself or using a service like Calibre
- Monitor your metrics by using services like SpeedCurve
- Benchmark your site against competitors over monitoring services
Initiatives to make the web better
Google invests tremendously in making the web better by raising awareness, introducing open-source tools and libraries, helping communities with their developer relations teams, introducing web blogs and certification programs.
Some of the great examples of contributions from a community that is driven by Google engineers are;
In addition to those awesome resources, Google also created a certification program called Mobile Web Specialist where it acknowledges developers who demonstrate mobile web development expertise. It’s one of the very few certifications in the frontend world.
You can become a Mobile Web Specialist by taking an exam on — https://developers.google.com/certification/mobile-web-specialist
Certification aside, I believe this is a great initiative to raise awareness for building a healthy web. It’s a token for people to show that they care about a healthy web and they’ve skills and expertise to make the web better.
How can we help you help yourself?
We’ve built a 5-days training program called Mobile Web Specialist bootcamp at LINKIT to help developers build great mobile websites, focusing on web fundamentals and technology rather than frameworks and libraries.
It covers the topics on the study guide of Mobile Web Specialist certification and teaches participants modern web development practices with a hands-on heavy agenda.
It aims to have participants feel confident with building great mobile website experiences at the end as well as helping them get the Mobile Web Specialist certification of Google.
We help businesses — note to employers
We help managers like you to bring cultural changes to your business. By investing in your employees taking this training, you make sure you’re right on track on building a great mobile strategy and production for your business.
With investing in PWA-first, you de-risk your business by making sure that it can reach the largest number of people with the least amount of friction. Some notable case studies showing a direct positive impact on business objectives are;
- Pinterest reduced their JavaScript bundles from 2.5MB to < 200KB and Time-to-Interactive reduced from 23s to 5.6s. Revenue went up 44%, sign-ups are up 753%, weekly active users on mobile web are up 103%.
- AutoTrader reduced their JavaScript bundle sizes by 56% and reduced Time-to-Interactive for their pages by ~50%.
- Nikkei reduced their JavaScript bundle size by 43% and Time-to-Interactive improved by 14s.
- More case studies available at Google Developers blog, and PWAStats
We help developers — note to employees
We help developers like you to focus on business objectives and user experience rather than tech trends. We put web fundamentals and native browser functionality on top of frameworks and libraries so it’s up to you to choose which direction to go.
By investing in yourself with attending to Mobile Web Specialist training of LINKIT, you make sure you keep up with the best practices for building a great website experience satisfying all your visitors from around the world.
We create an alumni community where we exchange ideas, ask questions to each other, share resources that we find useful on the topic from and to a community built by like-minded people, like yourself.
Feel free to DM me on Twitter or LinkedIn if you’ve any questions or remarks about the certification or our training program.
We love the web, we bet on the web and let’s make it better all together!