If you ain’t first you’re last: Shake and bake maneuvers for web and WordPress sites that have a need for speed. ROBERT LI | WP Engine 2019
My name is Robert Li. I’m a Solutions Engineer for WP Engine. Who is this idiot? I’ve founded 3 startups and exited 1. I have a 3 year old teacup pomeranian named Chelsey. I am a long suffering Knicks fan. I love making WordPress do weird, wonderful things.
1. Why is SPEED important? 2. Understanding the engine that powers your site. The full stack. 3. Performance Budgeting What are we 4. How do you measure it? talking about? 5. Infrastructure or the ‘Puter 6. Applications and Caching 7. Common Front-End & Other Speed Traps
Developers & Technical Marketers Basically anyone who has a WordPress site on the Who is this for? Internet Focus: WordPress Oriented Difficulty: Intermediate - we’re going to get pretty nerdy here.
Why is SPEED important?
Search algorithms look at many factors, including the words of your query, relevance and usability of pages, expertise of sources, and your location and settings. Since Google’s July 2018 speed update bots have had a vendetta against slow sites.
Lost 10% of users per second of load time. Increased conversions by 7% per second they reduced load time. Mobile conversions are reduced by 20% per second of load time according to Google .
Understanding the Engine
This is what the User is seeing. This is a User’s first point of contact with the Internet. This is the software that creates the website itself. This is the “computer” that powers the software.
Most of the focus is usually placed on the Browser layer But there are optimizations that can be made at every layer in the stack.
Performance Budgeting
How much would you pay for it?
How long would you wait for it?
A Performance Budget forces you to justify every features against the performance A feature is overhead it creates. Performance budgeting requires buy-in pointless if the from marketers, developers, product managers, engineers, leadership value isn’t worth (basically everyone). waiting for... The earlier a performance culture is implemented in a project the less effort, time and money needed on optimization.
Setting a budget is not complicated... Must be less than 1MB Must load in under 3s on 3G
Don’t test for less than 20% difference between time. Set your budget in relation to competitors (e.g. 20% faster) https://codepen.io/robertliwpe/full/poorzBE https://www.performancebudget.io/
How do you measure it?
Front End Performance
Front End Performance
Application Performance
Application Performance
Infrastructure Performance
Infrastructure Performance
Infrastructure or the ‘Puter
Where is your How is your What is your website hosted? website hosted? website doing?
Where is your website hosted? Is your website hosted close to your intended audience. https://submarine-cable-map-2019.telegeography.com/
How is your On Premises vs. Cloud Hosting website hosted?
What is your website doing? Optimized for Compute vs. Memory vs. General
Application and Caching
cache (n.) What is caching? A cache is a store of items that is predicted to be accessed Your MacBook does it soon or is frequently accessed in a So does your mail location that’s closer and/or faster to access. As do websites. https://medium.com/datadriveninvestor/all-things-caching-use-cases-benefits-strategies-choosing-a-caching-technology-exploring-fa6c1f2e93aa
Plugin based caching is easy to use. Server level vs. caching is more effective.
Standard LAMP is inefficient. Pages are processed from scratch every time it’s requested.
We can help APACHE out with web accelerators / reverse proxies.
Save commonly compiled PHP bytecode in memory with OpCache.
Save common data from MySQL with object caching like Redis, Memcached or Aerospike.
Top Test how each caching layer interacts Down with the stack and the improvement in performance before moving lower down + the stack. Test & Step By Step
Use a CDN Caches content to Points of Presence close to user. High capacity and throughput EDGE network to handle requests at scale. Improves latency and load time. Full Page vs. Static
The Fastest Global CDNs
Terminate SSL at the edge Reduce latency and computational intensity by offloading TLS handshake at the EDGE. It’s faster...
Master Cache Control Extending the cache for content that doesn’t change means it doesn’t need to be built again and can be held in browser and CDN memory indefinitely. If it doesn’t change don’t fetch it again
Use a fast DNS host Choosing a fast DNS host will reduce domain name resolution time by up to 150ms. It might not seem much, but it’s free… So there’s no excuse. Remember... If you’re not first you’re last.
The Fastest DNS hosts
Do you use GoDaddy or NameCheap?
Change TTL Unless you are changing your domain name. Extend TTL to store domain name information on EDGE recursive DNS hosts. This reduces lookup time. DNS can be cached too
Common Front End & Other Speed Traps
Optimization Plugins Still a good idea to minify and concatenate HTML and CSS, and control data serving strategy. Easy to use High ROI
Optimize Images Unless transparency is needed, use newer lossy formats ‘.jpg’ and ‘.webp’ Avoid animated ‘.gif’. Factor and size them appropriately. Do you really need a 4k by 3k hero image at 300ppi?
Update PHP 45% of the web STILL uses PHP5 Simply upgrading PHP to the latest version for a big performance boost. Also PHP 7.1 and lower is no longer going to be supported - it’s insecure
Offload Assets Keep the WordPress site lean by offloading major assets. Serve video and audio files from purpose built platforms. Inefficient and unoptimized to serve directly from local. Just because you can, doesn’t mean you should.
Start with blocks instead of themes WordPress 5.0 introduced blocks that are reusable and don’t require a whole theme to run. Full themes often come with bloated functionality and content that’s not required.
Be frugal with plugins Don’t use plugins if possible. Choose lightweight plugins. Delete unused plugins. Best practice is less than 20.
Avoid admin-ajax like the plague Admin-ajax uses apache to dynamically render elements on a page, but it is incredibly resource intensive and impossible to cache. Don’t do it!
Lazy Load Load only what is being seen first to improve the perception that your site is fast. It’s not laziness. It’s being efficient.
InnoDB is coming MyISAM is the IF THE BOAT WAS THE DB traditional MySQL engine, but it's incredibly inefficient. InnoDB locks off less data when accessing a table. Greater concurrency Greater scalability
Clean your DB Over time WordPress loads up your database with all sorts of junk. It becomes more and more resource intensive for a site to find data it needs. Clean up unused data and revisions with a plugin like WP-sweep.
Questions? Robert Li E: robert.li@wpengine.com P: +61-(0)-7-5613-1084 SM: LinkedIn (Look Left!)
Recommend
More recommend
