Slide 1
Slide 1 text
By Vineet Talwar
Advanced
Web Performance
Optimization
Workshop
@vineetsktalwar
Slide 2
Slide 2 text
2
#WCGVA
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
4
Let’s talk about buttons
Slide 5
Slide 5 text
@vineetsktalwar
Slide 6
Slide 6 text
@vineetsktalwar
Slide 7
Slide 7 text
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
@vineetsktalwar
Slide 8
Slide 8 text
8
“ Bad website performance has a
measurable business impact
@vineetsktalwar
Slide 9
Slide 9 text
@vineetsktalwar
Slide 10
Slide 10 text
10
Google <3 User
Experience
Slide 11
Slide 11 text
11
Google wants you to speed up
Slide 12
Slide 12 text
12
Core Web Vitals
https://web.dev/vitals
Slide 13
Slide 13 text
13
“
But How?
Slide 14
Slide 14 text
@vineetsktalwar
Slide 15
Slide 15 text
@vineetsktalwar
Slide 16
Slide 16 text
16
“
Hosting
@vineetsktalwar
Slide 17
Slide 17 text
@vineetsktalwar
Slide 18
Slide 18 text
18
Website Hosting
• Shared
• Dedicated
• Cloud
@vineetsktalwar
Slide 19
Slide 19 text
19
“
Go Cloud!
@vineetsktalwar
Slide 20
Slide 20 text
Source: Reddit
@vineetsktalwar
Slide 21
Slide 21 text
DNS
@vineetsktalwar
Slide 22
Slide 22 text
@vineetsktalwar
Slide 23
Slide 23 text
23
Testing
• Tools.pingdom.com
• Page Speed Insights
• Lighthouse test (web.dev/measure)
• Gtmetrics
• Chrome devtools
@vineetsktalwar
Slide 24
Slide 24 text
24
“ Lets run a test!
@vineetsktalwar
Slide 25
Slide 25 text
@vineetsktalwar
Slide 26
Slide 26 text
Images
@vineetsktalwar
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
28
Images
LAZY LOADING RESPONSIVE
IMAGES
USE LIGHTER
FORMATS
IMAGES
OPTIMIZATION
IMAGES CDN
@vineetsktalwar
Slide 29
Slide 29 text
29
Lazy Loading
§ Lazy loading offscreen images with JS
§ ![]()
§ WordPress core (5.5 onwards) supports lazy loading
§ Libraries: Lozad.js or Lazysizes
§ Define Height, Width Attribute to images explicity to
decrease CLS
https://web.dev/browser-level-image-lazy-loading/
@vineetsktalwar
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
31
Image Optimization
• Tinypng
• Smush
• Optimizilla
• https://images.guide
@vineetsktalwar
Slide 32
Slide 32 text
webp is new black.
Slide 33
Slide 33 text
33
Images CDN
• S3+ CloudFront
• Digital Ocean Spaces
• Jetpack Photon
• Akamai CDN
• Fastly
• Plugins: W3 Total Cache,
WP Offload S3
@vineetsktalwar
Slide 34
Slide 34 text
Fonts
Slide 35
Slide 35 text
35
Fonts
Font Swap –
http://fonts.googleapis.com/
css?family=Roboto&font-
display=swap
•
@font-face {
• font-family: ‘custom font’;
• src: url(..);
• font-display: swap;
• }
@vineetsktalwar
Slide 36
Slide 36 text
Caching
Slide 37
Slide 37 text
37
Caching
• Page Cache
• Browser Cache
• Object Cache
• Database Cache
• Transient Cache
• Opcache, Redis, Memcached
• Plugins: W3 Total Cache, WP Super
Cache
@vineetsktalwar
Slide 38
Slide 38 text
38
Plan it out
• Use case
• Estimate traffic
• Expectations from visitors
• User Retention
• Test as your end user
• Think abut mobile users first
• A/B Test
• Hotjar Test
@vineetsktalwar
Slide 39
Slide 39 text
https://developer.wordpress.org/reference/classes/wp_query/
WP_Query
Slide 40
Slide 40 text
40
@vineetsktalwar
Slide 41
Slide 41 text
41
Query time
• Queries are slow
• Multi Dimension Meta Queries
• Multi Dimension Taxonomy Queries
@vineetsktalwar
Slide 42
Slide 42 text
Transient API
Slide 43
Slide 43 text
43
Transient Cache
• set_transient( 'foo_featured_posts', $featured, 12 * HOUR_IN_SECONDS );
• get_transient( 'foo_featured_posts’ )
• ‘set_site_transient()’
• ‘wp transient delete-expired’
@vineetsktalwar
Slide 44
Slide 44 text
Where are transients
stored?
Slide 45
Slide 45 text
Example:
'featured',
'posts_per_page' => 5
)
);
// Put the results in a transient. Expire after 12
hours.
set_transient( 'foo_featured_posts',
$featured, 12 * HOUR_IN_SECONDS );
}
?>
// Run the loop as normal
have_posts() ) : ?>
have_posts() ) :
$featured->the_post(); ?>
// featured posts found, do stuff
// no featured posts found
Using Transients with WP_Query to retrieve featured posts
Slide 46
Slide 46 text
Let’s Practice
Slide 47
Slide 47 text
@vineetsktalwar
Slide 48
Slide 48 text
@vineetsktalwar
Slide 49
Slide 49 text
49
Slide 50
Slide 50 text
Jake Archibald at google i/o16
Slide 51
Slide 51 text
Jake Archibald at google i/o16
Slide 52
Slide 52 text
52
“
Go Offline!
Slide 53
Slide 53 text
Source: chunkbytes.com
Progressive Web
Apps (PWA)
https://web.dev/learn/pwa/
https://wordpress.org/plugins/pwa/
@vineetsktalwar
Slide 54
Slide 54 text
54
Service Workers
Source: Medium
@vineetsktalwar
Slide 55
Slide 55 text
55
Adaptive serving
• Data saver mode / Light Applications
• Slow network specific version
• Offline first
@vineetsktalwar
Slide 56
Slide 56 text
JS and CSS
Slide 57
Slide 57 text
57
Critical CSS
• Inline Critical CSS:
addyosmani/critical,
filamentgroup/criticalcss,
pocketjoso/penthouse
• Load CSS Async:
filamentgroup/loadCSS
@vineetsktalwar
Slide 58
Slide 58 text
58
Javascripts
• High bootup time
• Defer Third Party Embeds
• Obese Expensive Libraries
• Split the Code
• Preload, preconnect, prefetch, dns-prefetch
• Minify, Automate minification
@vineetsktalwar
Slide 59
Slide 59 text
59
Tracking Scripts
• Tracking based with GTM.
• Block Tracking scripts, before cookies are
accepted.
• Load Async
• Scripts On Window Load
• OneTrust, Cookiebot
@vineetsktalwar
Slide 60
Slide 60 text
60
Minify
• Minify CSS, Minify JS
• Optimize libraries with webpack:
GoogleChromeLabs/webpack-libs-optimizations
• Plugins: Autoptimize, W3 Total Cache
@vineetsktalwar
Slide 61
Slide 61 text
61
Compression
• Compress everything
• Gzip, brotli
• Configure in Web server
@vineetsktalwar
Slide 62
Slide 62 text
62
Resource Hints
• Preconnect Critical Origin
• Preload Critical Scripts
• Prefetch Visible Links
• Priority Hints (For Future)
@vineetsktalwar
Slide 63
Slide 63 text
Scale up or Forward ?
Slide 64
Slide 64 text
64
Scaling Servers
• Scale Up and Scale Forward
• Load Balancer Architecture
• Serverless if and when possible
• Elasticsearch for queries
(Elasticpress Plugin)
@vineetsktalwar
Slide 65
Slide 65 text
65
Profiling
• Query Monitor
• Debug Bar
• Code Profiler
@vineetsktalwar
Slide 66
Slide 66 text
66
What else ?
• Bloats
• Unwanted Plugins
• Optimize DB
• Cleanup wp-admin
• Expiry Header
@vineetsktalwar
Slide 67
Slide 67 text
67
“
Image Source: WP Rocket
Slide 68
Slide 68 text
68
“ Website Speed is more
important than ever
@vineetsktalwar
Slide 69
Slide 69 text
69
Source:
knowyourmeme.c
om
Possible Issues ?
@vineetsktalwar
Slide 70
Slide 70 text
@vineetsktalwar
Slide 71
Slide 71 text
Vineet Talwar
Product Owner / Web Developer
E-Mail: [email protected]
Twitter: @vineetsktalwar
Linkedin: /in/vineetsktalwar
Podcast: wpshoutout.com
Speakerdeck: @vineetsktalwar
Slides available:
https://src.hm/wordcampgeneve