Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

•

3 likes•2,122 views

The document discusses the benefits of progressive web apps (PWAs) over traditional mobile apps. Some key points: - PWAs provide fast loading, engageing experiences for users regardless of network connectivity. They have app-like capabilities but without large storage requirements. - PWAs can be accessed via a home screen icon like native apps but are less expensive to develop and maintain than mobile apps. They also have fewer barriers to adoption. - Metrics like speed and performance are important for PWAs. Tools like Lighthouse can help optimize a site and ensure it meets baseline PWA requirements. - Case studies found PWAs led to a 50% improvement in load time, 150% increase

Miracle Inameti-Archibong
@mira_inam
Erudite
We made our website a
progressive web app and
why you should too!

Progressive Web Apps provide fast, reliable
& engaging, web app experiences,
regardless of the network state
@mira_inam

App-likefeel
Add to home screen
Push notifications
Offline content
Without the
excess of
local device
storage
10
@mira_inam

0
10
20
30
40
50
60
Android iOS PWA
9.6MB 56MB
150KB
home feed
load!
Source Addy Osmani – A Pinterest Progressive Web App Performance Case Study

PWA loads code for new routes on
demand, and the cost of additional
code is amortized over the
lifetime of the application
Source Addy Osmani –
A Pinterest Progressive Web App Performance Case Study@mira_inam

19 Seconds
Average Load Time
>3 Seconds
53% Abandonment Rate
PAGE LOAD
3G
Source: Google /DoubleClick 2015@mira_inam

01 02 0301 02 03
Complexity
of mobile
deep
linking
Expensive to
build and
maintain
High
barriers to
adoption
@mira_inam

Consumers spend 60% of their total mobile
time in only 3 apps, most of which are
owned by Facebook and Google.
Ted Schadler: Drunk History of Your Mobile Strategy@mira_inam

Instantly Loads: Loads all
cached content instantly
Offline Loading: Site is accessible
in areas with low or no connectivity
Add to home screen: Access like
a native APP
Benefits

Source Mobify: 2017 Q1 Mobile Commerce Insights Report
Push notifications

H/2
reduce latency
minimise protocol overhead
request prioritisation
HTML5
SECURE/MOBILE DEVICE
local storage
motion/
native-likereact
@mira_inam

LighterJSLibrary
AngularJS
Polymer
Vue
Lower parse and compile
times. See HNPWA for
list of live examples
frameworks/libraries.
Addy Osmani : Google I/O 17@mira_inam

All about the user experience
“web apps are optimised to help users
accomplish tasks quickly”
Source Karly Cyr: Everything you need to know
about PWA’s for ecommerce@mira_inam

01
02
03
HTTPS: is the site served
over HTTPS?
HTTP2: Multiplexing
Service Worker: does the site
register a Service Worker?

04
05
06
Speed: <10,000 TTFI/CI
Add to Home Screen: user
prompt ‘‘Add to Home Screen’’?
Responsive design

Lighthouse: More on PSI Measures
Performance
focused

App
manifest for
name &
icons
@mira_inam

Check
service
worker
Force
disconnect
@mira_inam

Speed + Performance
Optimisation =
Improved Time to Task
Completion
@mira_inam

01
02
03
04
Each page has its own URL
Use of canonical tags
Use of schema.org and social
meta data
Content is shareable
Just Good
Housekeeping
@mira_inam

01
02
03
04
Seamless page
transmission: History API
Content doesn’t jump when
page loads
Smooth scroll
App install prompts are
not excessive
UX
Requirements
@mira_inam

EruditeWordPressPWA
Implementing specific fixes - https://github.com/o10n-x/@mira_inam

Progressive
web AMP’s
Making an even better
first impression
AMP: Start Fast
PWA: Stay Fast
Quote by Alex Russell@mira_inam

Developers don’t want to build 3 separate
apps for the major platforms. Companies
don’t want to pay for development of 3
apps.
The answer to all this is the web. We can
build rich web apps—Progressive Web
Apps—and package them for all the app
stores.”
J U D A H G A B R I E L H I M A N G O

50%
Improved
load time
4sec
Load on 3G
network

150%
increase in
add to home
screen
67%
Increase in
offline usage
Source: PWA Stat

50K
core app when
gzipped
3sec
Load on 2G
network
Source: PWA Stat

Cut load times
from 11.91
secs to
4.96
90%
Smaller than
its Android
App
Source: PWA Stat

View my full
slides here
@mira_inam
http://bit.ly/eruditeslides

ERUDITE
Ready to
talk to us?
miracle.inameti@erudite.agency
M I R A C L E I N A M E T I - A R C H I B O N G
+44 (0) 1256 384890
https://erudite.agency
@mira_inam

What's hot

Firebase App-Indexing - SMX London 2016

David Iwanow

This document summarizes a presentation about Google App Indexing. It discusses the technical implementation of App Indexing using meta tags, API, and XML sitemaps. It also covers common pitfalls like 404 errors and slow app load times. Tracking the impact of App Indexing is challenging but can be done through Google Analytics with custom dimensions. Results of effective App Indexing can include increased app activity, installs, and visibility. The presentation concludes by discussing upcoming changes like iOS support and the potential for App Indexing to expand.

iPullRank Webinar - Automated Testing For SEO With Hamlet Batista

Michael King

Welcome to iPullRank's Webinar featuring Hamlet Batista to discuss the topic "Automated Testing for SEO." With so many cooks in the kitchen on any development project, it’s incredibly difficult as an SEO to know everything that is going on to troubleshoot what could go wrong. Automated Testing is a way to put some safeguards in place so that if anything new in your code is rolled out, it doesn’t break something that previously existed in the code, like some previous functionality or something to that effect. In this webinar, we will be touching on important topics such as: -- What is automated testing and why is it important -- The different types of automated testing -- Different automated testing tools -- Expert insights by Mike & Hamlet Signup for our expert newsletter here: https://pages.ipullrank.com/iprnewslettersignup

rel canonical audit BrightonSEO September 2018

Mark Thomas

TechSEO Boost 2018: Research Competition

Catalyst

Vincent Terrasi presented on building a machine learning model to predict webpage rankings in search engine results pages (SERPs) with 92% reliability. The model analyzed data from SEMrush, Majestic, ScreamingFrog, OnCrawl, and Visiblis to identify the most important ranking factors for specific topics without human intervention. OVH was then able to instantly check if new webpages would rank first in Google or compare pages' predicted positions. Dan Taylor discussed utilizing Cloudflare Workers to implement technical SEO elements like Hreflang, redirects, and meta robots tags through serverless functions. Testing showed these could be deployed at scale with minimal DevOps while being detected by Google. However, workers

Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015

Suzzicks

The Technical Seo Renaissance - Mike King

Glen Dimaandal

This document discusses the rise of technical SEO due to changes in web technologies like JavaScript, AngularJS, and ReactJS. It notes that search engines are now able to crawl sites rendered with JavaScript through headless browsers. It emphasizes the importance of log file analysis and ensuring sites are crawlable, including through proper prerendering setup. The document argues that technical SEO skills are now essential for SEO professionals due to the increased complexity of modern web development.

KPIs for APIs (and how API Calls are the new Web Hits, and you may be measuri...

John Musser

How do you measure API success? What KPIs do APIs need? What mistakes should I avoid? Find out what you should, and shouldn't, be measuring as part of your API program in this Business of APIs Conference NYC talk. Dive into a breadth of API metrics, the 6 keys to better API metrics, and the traps to beware of (the important do's and don'ts). Also real-world API case studies show who measures what.

Firebase App Indexing - SMX Advanced

David Iwanow

45 Modules in 45 Minutes: The Best Modules You're Not Using

ultimike

Modern Day Link Building by Jon Cooper

Glen Dimaandal

The document discusses modern link building strategies and tactics. It provides tips on using tools like Ahrefs and Majestic for competitive analysis. It also recommends observing international and local markets for link opportunities. Specific tactics mentioned include targeting brand websites with review content, news sections for discounts, and sponsored sub-forums. The document also lists tools for tasks like getting link metrics, finding broken links, prioritizing opportunities, and prospecting for links.

The Thin Line Between Seth Godin & Neil Strauss

Michael King

Top 10 Spring Boot Interview Questions and Answers

narendrachinnu

Spring Boot makes it easier to create production-ready Spring applications with default configurations and by avoiding boilerplate code. It provides starters that include common dependencies and allows overriding default properties through an application.properties file. Spring Boot also includes an embedded server and DevTools for faster development. While it speeds up development, converting existing Spring applications may be time-consuming. Spring Boot works exclusively with Spring projects and requires the use of Java.

Developing an Ember Test Strategy - EmberConf 2019

Todd Jordan

Taking lessons from the classic writings on Software Testing, we'll walk through what are industry tried and true approaches for developing a robust and effective test suite. Many of the Testing philosophies and strategies today have their origins as far back as the 60's, and really got their legs during the advent of "Extreme Programming" and other early "Agile" methodologies from the 1990s. In this talk we'll take many of these tried and true test strategies and show how one would apply them in a real way to an Ember project.

How App Indexation Works

SerenaPearson2

This document discusses how app indexing works to connect mobile apps to search engine results. It explains that app indexing allows mobile apps to be indexed and accessible via Google Search. It provides steps on implementing app indexing for iOS using Xcode and Firebase indexing, as well as for Android using Android Studio, Firebase, and Android App Links. The document emphasizes structuring app links to match website URLs and adding entitlements and files to connect apps to websites to enable app indexing.

iOS & Android App Indexing & App Actions

Justin Briggs

Building Usable REST APIs. By Javier Ramirez, teowaki. FOWA London

javier ramirez

This document provides information on creating usable REST APIs. It discusses principles like following best practices, making APIs learnable and efficient for users, and avoiding exposing implementation details. The document also provides examples of API design choices around topics like versioning, pagination, and allowing asynchronous operations. It emphasizes that there are no single right answers and each API has different needs, so copying approaches from other projects without thought is the wrong approach. The overall message is to thoughtfully design APIs around usability and the needs of developers using the API.

SEO Checklist for Google Mobile First Index

Erudite

Spring Boot Interview Questions | Edureka

Edureka!

Youtube Link: https://youtu.be/CXTiwkZVoZI ( Microservices Architecture Training: https://www.edureka.co/microservices-architecture-training ) This Edureka's PPT on Spring Boot Interview Questions talks about the top questions asked related to Spring Boot. Follow us to never miss an update in the future. YouTube: https://www.youtube.com/user/edurekaIN Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Castbox: https://castbox.fm/networks/505?country=in

Build a production ready PWA with Angular and Firebase

Önder Ceylan

This talk covers how to build, optimise and host your PWA to provide native-like app experiences. It provides guidelines for best practices and platform optimisations. It will also score 100 on Lighthouse PWA audit! Adding PWA capabilities to your app is easy with adding @angular/pwa via ng cli. However, you need to do more on your app to create best experiences for your users on multiple platforms. This session will cover what you need to do to optimise your PWA for the production with the guidelines of best practices and platform optimisations. These optimisations include iOS compatibility, web app manifest and ngsw configuration along with firebase server configuration. I'll demonstrate the steps required for delivering a PWA on Firebase which will be available immediately for the audience.

Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...

Izabela Wisniewska

What's hot (20)

Firebase App-Indexing - SMX London 2016

iPullRank Webinar - Automated Testing For SEO With Hamlet Batista

rel canonical audit BrightonSEO September 2018

TechSEO Boost 2018: Research Competition

Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015

The Technical Seo Renaissance - Mike King

KPIs for APIs (and how API Calls are the new Web Hits, and you may be measuri...

Firebase App Indexing - SMX Advanced

45 Modules in 45 Minutes: The Best Modules You're Not Using

Modern Day Link Building by Jon Cooper

The Thin Line Between Seth Godin & Neil Strauss

Top 10 Spring Boot Interview Questions and Answers

Developing an Ember Test Strategy - EmberConf 2019

How App Indexation Works

iOS & Android App Indexing & App Actions

Building Usable REST APIs. By Javier Ramirez, teowaki. FOWA London

SEO Checklist for Google Mobile First Index

Spring Boot Interview Questions | Edureka

Build a production ready PWA with Angular and Firebase

Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...

Similar to Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

We Made Our Website a PWA & Why You Should Too - Brighton SEO

Erudite

Are PWAs The Future of the Web?

Erudite

Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web?

Noisy Little Monkey

From AMP to PWA

Ido Green

SearchLeeds 2019 - Nichola stott - The state of PWAs

SearchLeeds

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...

E-Commerce Berlin EXPO

The document discusses how mobile users have moved to a mobile web but the web itself has not kept up. It introduces Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA) as ways to make the mobile web faster and more app-like. AMP pages load in under one second and are cached, while PWAs use features like web app manifests, service workers, and add to home screen to deliver app-like experiences from the mobile web. The document examines using AMP and PWAs to improve the mobile experience on jobs sites.

The Muda, Mura and Muri of DevOps

Sanjeev Sharma

SEMINAR (pwa).pptx

BasitMir10

This seminar presentation introduces progressive web apps (PWAs). It defines PWAs as web apps that use modern web capabilities to provide an app-like experience to users across different platforms. The presentation discusses the key characteristics and features of PWAs, why they should be built, the core technologies used to create them, and their advantages over traditional web apps and native mobile apps. Examples are given of major companies that have successfully adopted PWAs. The presentation concludes that PWAs are the future of mobile web experiences due to their performance, cost-effectiveness, and ability to work across devices.

Progressive Web Apps - Porque nativo no es significa mejor

Israel Blancas

Makara

Dealmaker Media

The document discusses the benefits of deploying applications to the cloud using the Makara Cloud Application Platform, including simplicity, affordability, and agility. It outlines how Makara provides rapid provisioning of application environments without complex agent-based management, and ensures consistency across environments with a complete built-in management stack. Makara's Application Capsule enables portability, scaling, performance monitoring and rollback of applications without code changes.

Makara

Dealmaker Media

Design - Start Your API Journey Today

LaurenWendler

This document discusses the opportunities presented by the API economy. It describes how APIs can enable new experiences like pre-ordering food from a restaurant app before arriving. The document outlines challenges of managing APIs at scale across hybrid cloud environments. It introduces IBM API Connect as a way to create, manage and secure APIs throughout their lifecycle to power digital transformations. Finally, it provides links to learn more about API Connect and taking advantage of IBM's cloud offerings.

Design - Start Your API Journey Today

LaurenWendler

IBM API Connect provides an integrated platform for creating, managing, and securing APIs and microservices across hybrid cloud environments. It allows organizations to expose existing systems as APIs, create new APIs and microservices, and connect applications in the cloud and on-premises. This helps organizations unlock value from existing assets, power digital transformation, and stimulate innovation.

APM Talk

MongoDB

In today's businesses, an application going down can mean millions of dollars in lost revenue. Learn how to optimize the performance of your enterprise applications powered by MongoDB with IBM Application Performance Management (APM). IBM APM will give you full visibility into your application stack and infrastructure, track every transaction going through it, and help you diagnose problems in mere minutes. With built-in analytics to predict outages before they occur and integration directly into MMS, IBM APM is a must-have solution to keep your business-critical applications up and your revenue flowing.

Design - Start Your API Journey Today

LaurenWendler

This document discusses how APIs can power the API economy and digital transformation. It describes how APIs can be used to expose functionality from various systems and data sources, and how API management is needed to securely manage APIs. The document promotes IBM API Connect as a way to create, manage and secure APIs and microservices across hybrid cloud environments to drive innovation. It provides links to learn more about API Connect and digital transformation workshops.

Modern Web Applications

Ömer Göktuğ Poyraz

IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...

John Head

Application Modernization is the hottest buzzword in the IT world today. For many, it means the migration and transformation of an old application to a modern platform and emerging technologies. With Digital Experience solutions, means much more. Application Modernization is about taking what consumers expect from cutting edge mobile experiences, websites and applications – Slick User Experience, Modern Workflow, Mobile Support, Social and Cloud, and applying it to the enterprise space. This session will look at these five areas and apply them to WebSphere Portal and the IBM Digital Experience solutions. Examples will highlight how and why focusing each of these areas can have a positive impact and upside inside your organization and recommendations on how to apply Application Modernization.

Mobilizing SharePoint - August 1 2013

WinWire Technologies Inc

Mobile Cloud, and SharePoint especially has become a lot more than just data storage spectacle; it has become an important productivity enabler. Nearly 80% of enterprises use Microsoft’s SharePoint to store, manage and act upon corporate information. But many employees wonder: Why can’t I get the same access from my mobile device? Learn how companies are putting the power of SharePoint into the hands of their employees, wherever they may be. This webinar investigates: Why mobile is changing traditional approaches to back-end integration Popular mobile use cases for SharePoint How to anticipate and resolve common SharePoint-to-mobile technical challenges Sanjiva Singh, Chief Sales Officer for WinWire Technolgies, and Simon Berman, Senior Director of Product Marketing at Appcelerator, look at where effective strategies for mobile integration begin, and how leading companies are fostering collaboration in the mobile world.

All you need to know about the creative cloud based app

Marie Weaver

The document discusses the benefits of cloud-based mobile apps over traditional installed apps. Key advantages include not requiring installation, securely storing data on cloud servers, easy data recovery from backups, supporting both Android and iOS without separate development, and longer battery life. It notes that cloud apps are in high demand for developers due to only needing single platform development while reaching all users. Choosing a experienced mobile app development company can help businesses leverage cloud technology and address challenges of cloud server management.

Realizing Hybrid Cloud: Using IBM Bluemix, APIs, and DataPower

Akana

The document discusses hybrid cloud and how APIs can be used to enable an effective hybrid cloud strategy. It presents three models of hybrid cloud - ad-hoc, bespoke, and API-driven. The API-driven model is identified as optimal for meeting stakeholder needs and making hybrid cloud work. The document also describes a demo using IBM Bluemix, APIs, and DataPower to deliver cloud integration solutions and realize an API-driven hybrid cloud.

Similar to Miracle Inameti-Archibong - We made our website a progressive web app and why you should too (20)

We Made Our Website a PWA & Why You Should Too - Brighton SEO

Are PWAs The Future of the Web?

Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web?

From AMP to PWA

SearchLeeds 2019 - Nichola stott - The state of PWAs

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...

The Muda, Mura and Muri of DevOps

SEMINAR (pwa).pptx

Progressive Web Apps - Porque nativo no es significa mejor

Makara

Design - Start Your API Journey Today

APM Talk

Design - Start Your API Journey Today

Modern Web Applications

IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...

Mobilizing SharePoint - August 1 2013

All you need to know about the creative cloud based app

Realizing Hybrid Cloud: Using IBM Bluemix, APIs, and DataPower

More from SiteVisibility

60 Minutes to Website Migration Success

Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

More Related Content

What's hot

What's hot (20)

Similar to Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

Similar to Miracle Inameti-Archibong - We made our website a progressive web app and why you should too (20)

More from SiteVisibility

More from SiteVisibility (20)

Recently uploaded

Recently uploaded (20)

Miracle Inameti-Archibong - We made our website a progressive web app and why you should too