Advanced Web Performance Optimization

If your website is slow, the user won’t give a second thought before leaving your site. A dissatisfied user is worst than not getting traffic at all! This workshop mainly deals with how one can perform web performance optimization of their WordPress website, thus improving conversions and sales.

It begins with discussing performance-related woes, how to measure them and what are the solutions for different scenarios. Further, the discussion will be about different performance optimization strategies like cutting down and optimization of queries, tweaking code base, implementing caching, use of various cloud services including concepts like scaling up and scaling forward strategies.

Further, there will be discussion and hands-on exercise of advanced performance optimization techniques like transients API, fragment caching, planning caching strategy, profiling, assets offloading, assets optimization and so on.

Transcript

1. By Vineet Talwar Advanced Web Performance Optimization Workshop @vineetsktalwar
2. 2 #WCGVA
4. 4 Let’s talk about buttons
5. @vineetsktalwar
6. @vineetsktalwar
7. https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/ @vineetsktalwar
8. 8 “ Bad website performance has a measurable business impact @vineetsktalwar
9. @vineetsktalwar
10. 10 Google <3 User Experience
11. 11 Google wants you to speed up
12. 12 Core Web Vitals https://web.dev/vitals
13. 13 “ But How?
14. @vineetsktalwar
15. @vineetsktalwar
16. 16 “ Hosting @vineetsktalwar
17. @vineetsktalwar
18. 18 Website Hosting • Shared • Dedicated • Cloud @vineetsktalwar
19. 19 “ Go Cloud! @vineetsktalwar
20. Source: Reddit @vineetsktalwar
21. DNS @vineetsktalwar
22. @vineetsktalwar
23. 23 Testing • Tools.pingdom.com • Page Speed Insights • Lighthouse test (web.dev/measure) • Gtmetrics • Chrome devtools @vineetsktalwar
24. 24 “ Lets run a test! @vineetsktalwar
25. @vineetsktalwar
26. Images @vineetsktalwar
28. 28 Images LAZY LOADING RESPONSIVE IMAGES USE LIGHTER FORMATS IMAGES OPTIMIZATION IMAGES CDN @vineetsktalwar
29. 29 Lazy Loading § Lazy loading offscreen images with JS § <img loading=“lazy”> § 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
31. 31 Image Optimization • Tinypng • Smush • Optimizilla • https://images.guide @vineetsktalwar
32. webp is new black.
33. 33 Images CDN • S3+ CloudFront • Digital Ocean Spaces • Jetpack Photon • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3 @vineetsktalwar
34. Fonts
35. 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
36. Caching
37. 37 Caching • Page Cache • Browser Cache • Object Cache • Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache @vineetsktalwar
38. 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
39. https://developer.wordpress.org/reference/classes/wp_query/ WP_Query
40. 40 @vineetsktalwar
41. 41 Query time • Queries are slow • Multi Dimension Meta Queries • Multi Dimension Taxonomy Queries @vineetsktalwar
42. Transient API
43. 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
44. Where are transients stored?
45. Example: <?php // Check for transient. If none, then execute WP_Query if ( false === ( $featured = get_transient( 'foo_featured_posts' ) ) ) { $featured = new WP_Query( array( 'category' => '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 <?php if ( $featured->have_posts() ) : ?> <?php while ( $featured->have_posts() ) : $featured->the_post(); ?> // featured posts found, do stuff <?php endwhile; ?> <?php else: ?> // no featured posts found <?php endif; ?> <?php wp_reset_postdata(); ?> Using Transients with WP_Query to retrieve featured posts
46. Let’s Practice
47. @vineetsktalwar
48. @vineetsktalwar
50. Jake Archibald at google i/o16
51. Jake Archibald at google i/o16
52. 52 “ Go Offline!
53. Source: chunkbytes.com Progressive Web Apps (PWA) https://web.dev/learn/pwa/ https://wordpress.org/plugins/pwa/ @vineetsktalwar
54. 54 Service Workers Source: Medium @vineetsktalwar
55. 55 Adaptive serving • Data saver mode / Light Applications • Slow network specific version • Offline first @vineetsktalwar
56. JS and CSS
57. 57 Critical CSS • Inline Critical CSS: addyosmani/critical, filamentgroup/criticalcss, pocketjoso/penthouse • Load CSS Async: filamentgroup/loadCSS @vineetsktalwar
58. 58 Javascripts • High bootup time • Defer Third Party Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification @vineetsktalwar
59. 59 Tracking Scripts • Tracking based with GTM. • Block Tracking scripts, before cookies are accepted. • Load Async • Scripts On Window Load • OneTrust, Cookiebot @vineetsktalwar
60. 60 Minify • Minify CSS, Minify JS • Optimize libraries with webpack: GoogleChromeLabs/webpack-libs-optimizations • Plugins: Autoptimize, W3 Total Cache @vineetsktalwar
61. 61 Compression • Compress everything • Gzip, brotli • Configure in Web server @vineetsktalwar
62. 62 Resource Hints • Preconnect Critical Origin • Preload Critical Scripts • Prefetch Visible Links • Priority Hints (For Future) @vineetsktalwar
63. Scale up or Forward ?
64. 64 Scaling Servers • Scale Up and Scale Forward • Load Balancer Architecture • Serverless if and when possible • Elasticsearch for queries (Elasticpress Plugin) @vineetsktalwar
65. 65 Profiling • Query Monitor • Debug Bar • Code Profiler @vineetsktalwar
66. 66 What else ? • Bloats • Unwanted Plugins • Optimize DB • Cleanup wp-admin • Expiry Header @vineetsktalwar
67. 67 “ Image Source: WP Rocket
68. 68 “ Website Speed is more important than ever @vineetsktalwar
69. 69 Source: knowyourmeme.c om Possible Issues ? @vineetsktalwar
70. @vineetsktalwar
71. Vineet Talwar Product Owner / Web Developer E-Mail: contact@vineet.de Twitter: @vineetsktalwar Linkedin: /in/vineetsktalwar Podcast: wpshoutout.com Speakerdeck: @vineetsktalwar Slides available: https://src.hm/wordcampgeneve