Make the Web - WordCamp Central · 2019. 9. 26. · Async and Defer Image optimization Preloading...
53
Progressive WordPress What does it take to succeed in the web, the WordPress way? Albeo Medina @ialbmedina Thierry Muller @tweetythierry
Transcript of Make the Web - WordCamp Central · 2019. 9. 26. · Async and Defer Image optimization Preloading...
Progressive WordPressWhat does it take to succeed in
the web, the WordPress way?
Alberto Medina@ialbmedina
Thierry Muller@tweetythierry
Make the Web the premier platform for
experiencing the world’s information
Content Experience @ Google
Support the long-term success of the open web for content creators,
merchants, and advertisers
The Conversion funnel
Acquire
Engage
Convert
Retain
The Successful Conversion funnel
● How do users discover you?
● How do users engage? ● What do they feel?
● Do they click on ads?● Do they subscribe?● Do they buy something?
● How many come back?● How often?
Acquire
Engage
Convert
Retain
The ideal funnelYour funnel
Search
Paid
Organic & Marketing
Discovery
Great content
Software Eng best practices
Acquire
Engage
Convert
Retain
The ideal funnelYour funnel
Progressive web dev
Software Eng best practices
Performance, Usability
Great content
Analytics
Search Console
A/B Testing
Acquire
Engage
Convert
Retain
Seamless Conversions
The ideal funnelYour funnel
Progressive web dev
Monetization
Subscriptions
Analytics
A/B Testing
e-commerce
Acquire
Engage
Convert
RetainRe-engage with Users
The ideal funnelYour funnel
A2HS & Push Notifications
Analytics
Great content
A/B Testing
Progressive web dev
Push Notifications
Add to Home Screen
Analytics
Great content
Search Console
Web Payments
Progressive web dev
Subscriptions
A/B Testing
Software Eng best practices
Organic andMarketing
Search
Monetization
Performance
Loading Performance(Start fast, stay fast)
Runtime Performance(no unresponsive pages)
Usability(no content displacement)
What is Performance
Users say speed is the most important element of good UX
The speed it takes to load a page
How easy it is to find what I'm looking for
How well the site fits my screen
How simple the site is to use
How attractive the sites looks
Source: Need for speed research, Google.
75%
66%
61%
58%
24%
53% of users abandon a site that takes > 3s to load
-12% conversionsevery extra second
4s 5s 6s
Page Load Time (seconds)
3s
And they mean it!
State of the Ecosystem
Performance in the Field
CrUX
● Real Chrome users
● UX performance
● UX metadata
● ~5M URLs from CrUX
● WPT and Lighthouse lab
● Desktop and mobile
Performance in the Lab
First Contentful Paint
First Contentful Paint: WordPress [Nov 2017 - May 2019]
Why are there so many slow
sites?
Reason #1: Web development is complex
Lazy loading
Async andDefer Image
optimization
Preloading
PerformanceBudgets
GPU-basedAnimations
CachingPolicies
Code Splitting
Micro Tasks
Web Workers
Input Debouncing
Code minimization
Compression
Code coverage
Minimize requests
Audit assets
Tree Shaking
Modern JS
Responsive Images
Image formats
Resource prioritization
Resource Hints
Preconnect
Prefetch
Web font loading
strategy
Critical path optimization
Inline critical styles
Defer and async
Service Workers
High Res Image
Reason #2: there are conflicting incentives!
"Let's get all of our best content on the homepage"
"We need to understand our users from all aspects"
"High quality images drive engagement"
A web components framework to easily create user-first websites
AMP ⇒ No custom or 3P JS*
https://v8.dev/blog/cost-of-javascript-2019
HTML JS CSS
Asynchronous resource loading Static layout system
Inline and size-bound CSS Lazy loading and pre-connect API
Minimal style/layout recalcs GPU-accelerated animations
Resource prioritization Optimized analytics and reporting
Near-instant loading via pre-rendering
AMP ⇒ Software Eng Best Practices
Lazy-load non-critical content
Optimize tracking
Responsive design
Optimized image
AMP ⇒ Prioritize User Experience
AMP-first WordPress Websites
Developer intervention
Assisted generation
Today
Manual Automated
Ecosystem Status Quo
Official AMP plugin for WordPress
diminishes as the ecosystem evolves
increases as the ecosystem evolves
Key Features of the AMP Plugin
Automate large parts of the process
Provide developer tools and guidance
Monitor and enforce AMP compatibility
AMP-compatible Ecosystem
Plugins
Themes
Blocks
amp-wp.org
Engaging Capabilities
Web Web App Progressive Web App
Static content Interactive Features Native-App-like experience
Offline Browsing
Push notification
Prefetch resources
Access from Home Screen
Reliable, Fast, and Engaging
Better UX with Progressive Web Development
Good UX no matter the conditions
You are offline. Downloaded articles are available
vs.
Re-engage Users with Push Notifications
Your order has been delivered!
Web Push
Re-engage Users with Add-to-Home-Screen
Instant access
Lead the users to the content they
care about Order Status
Foundations[Part I ]
Capabilities[Part II ]
PWA in WordPress
PWA Feature Plugin
HTTPS
Service Worker API
Web App Manifest
Monitoring
Site Kit
The best of Google tools at your fingertips
Google Tools
AdSenseAnalyticsSearch Console
Page Speed Insights
Site Kit
AMP Stories enable publishers to tell beautiful stories with full bleed videos and images
wordpress.org/plugins/amp
Recap Success entails... Content Strategy
Marketing
SEO
Performance
A/B TestingAnalytics
Monitoring
Monetization
RevenueUser Engagement
Development & maintenance costs
Impact on Success
The Road Ahead!
Progressive Themes Progressive Press
Bundles Registries Quality/ Ranking
The Road Ahead
Success Building Blocks
WordPress.org Engagement
WordPress Core
EventsWordCampsGoogle I/OAMP ConfChrome Dev Summit
Bring Google expertise and make it available
XML SitemapsPWA Feature PluginNative Lazy Loading PluginGutenberg contributions
WordPress Ecosystem
The Core Team
And...
Thank you!
Alberto Medina@ialbmedina
Thierry Muller@tweetythierry
