Next to sales, site speed is perhaps the most important metric for your eCommerce websites.Why? Fast eCommerce websites get more traffic, have higher conversion rates, lower bounce rates, and generate more return visitors. In this session, we'll explore developer tricks, WP Engine features, and other tools to make your Woo store even faster.
Moving Beyond Twitter/X and Facebook - Social Media for local news providers
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
1.
2. 6 Tips to improve WooCommerce
Performance
SENIOR PRODUCT MANAGER
WP Engine
Jeremy Benoit
ENGINEERING MANAGER
WP Engine
Catherine Kelly
3. According to Google, 53% of users will leave a site
if a page load speed takes longer than three
seconds. That means you’ve got exactly three
seconds to get them all the data on that product
page—all the images you’ve sent them, all the
information about it, all the little widgets, and ads.
- WP Engine Senior Software Engineer Chris Weigman
“
4. 4
• Page speed is the time of a single page to load
• Page speed impacts conversions
• Page speed impacts SEO
• Superb hosting is critical for a quality shopper
experience
The Speed of a
Shopper Experience
7. 7
Different types of
WooCommerce Caching,
some recommended
settings and enhancements
WP Engine will be
introducing as defaults
Understand & Configure
Cache for WooCommerce
WooCommerce
Caching
8. 8
Caching is the process of
storing data in a “cache”. A
cache is a temporary
storage area.
Caching’s original intent was to enable computers not to use resources to
compute the same thing over and over again
• Different Types of Cache optimisation
▪ Server Cache
▪ Application Cache
▪ Browser Cache
▪ Proxy CDN Cache
What is
Caching?
Caching: Tell me more!
9. 9
WP Engine is working on a
number of configurations to
implement effective caching
utilisation.
WP Engine Recommends
Caching a few
tips
Caching: Tell me more!
• Browser cache time to a high value for all your static assets
• cache any GET request but don’t cache:
▪ Logged-in pages (/my-account/, etc)
▪ Carts
▪ Checkouts
▪ Wishlists
• Deliver from but not write to cache when something is in cart
▪ Server Caching
• Server caching enables it to remember parts of the web
• Browser Caching
11. 11
Images & Video require
different types of
optimization in order to give
Customers an optimum
experience!
What is media Optimization?
Media
Optimization
12. 12
Using the best tools, advanced
strategies, and experiments to deliver
effective media content
▪ Lazy Load for Images and Videos
▪ Remember your Mobile Users
▪ Compressed Images Save up to 40% image bandwidth
▪ File Format selection is key e.g:
- 600px X 600px Image is
JPG - 100KB / PNG - 216KB / WebP - 56KB
▪ Use CDN for Global Delivery
What is Media
Optimization?
13. 13
One key trend for
eCommerce is live video
demonstrations
▪ Remember your Mobile Users
▪ Use data compression tools
▪ Convert to HTML5 supported formats
▪ Remove audio from muted videos
▪ Use a content delivery network
▪ Specify the video size
▪ Defer loading videos until page load is complete
Why Video
Optimization?
16. 16
What is WooCom Search?
▪ WooCommerce Inbuilt search is “poor”
- Underperforms with no matches In:
Product Attributes/reviews/descriptions
▪ No dedicate search support
▪ WooCommerce Product search not working “common”
issue
WooCommerce
Search
17. 17
Thanks to our partnership
with Elastic Press we’re able
to offer a premium search
offering
Search Offloading is a process by which if performed by a third
party
● Fast and flexible search and query engine
○ WooCommerce integration
○ Facet widgets for filtering
○ Autosuggest
○ Weighting
○ Custom Results
○ Instant Autosuggest
○ Search Analytics
● AutoInstalled with no additional configuration required
○ True plug & play implementation
What is
WP Engine
Doing?
Search Offloading
19. 19
The AJAX Cart Fragments
WANTED
the “/?wc-ajax=get_refreshed_fragments” URL
▪ Generating delays
▪ Causing Server Spikes
▪ Running unnecessarily
WANTED
“/?wc-ajax=get_refreshed_fragments”
Responsible for updating the cart items & cart
total.
Also responsible for lagging page load times
often
20. 20
Cart Fragments AJAX script runs on EVERY page:
▪ Home page
▪ Product page
▪ About page
▪ *Any* page
Purpose
Updating the cart without forcing a page reload
Where you have an add to cart action and a dynamic cart.
▪ Redirect to cart page on add to cart
Ideally
Cart Fragments AJAX should only run
Can it really be that bad?
21. Two ways to disable AJAX Cart Fragments
• Add a plugin with a cart fragmentation
disabling feature
• Disable cart fragmentation through editing the
functions.php file of your theme
Risks
• Some cart widgets may experience problems
• Test your cart widgets after disabling AJAX Cart
Fragments
21
Disable AJAX Cart Fragments
23. ● Conflation of multiple entities
● Calls for products, plug-in data, and other
entities
23
The WooCommerce Table
Structure Dilemma
24. • Custom Order tables adds the structural
integrity of a true eCommerce engine
• Better support especially for
▪ High traffic stores
▪ Stores with larger product catalogs
24
Improved the Speed of Orders
25. • Core, Plugins, Meta
• Dedicated indexes & less busy tables
25
Three Types of Tables
27. • A Headless stack increases speed by another
order of magnitude
▪ Our Headless infrastructure can execute
pages up to 10X faster than traditional
WordPress
▪ Live customer seeing 6x increase across
all Lighthouse metrics
• Customized backend integrations creates
opportunities for lightning fast optimizations
27
Go Headless