If you aint first youre last: Shake and bake maneuvers for web and - - PowerPoint PPT Presentation

▶
if you ain t first you re last shake and bake maneuvers
SMART_READER_LITE
LIVE PREVIEW

If you aint first youre last: Shake and bake maneuvers for web and - - PowerPoint PPT Presentation

Apr 30, 2023 243 likes •856 views

If you aint first youre 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. Im a Solutions Engineer for WP Engine. Who is this idiot? Ive

slide-1
SLIDE 1

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

slide-2
SLIDE 2

Who is this idiot?

My name is Robert Li. I’m a Solutions Engineer for WP Engine. 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.

slide-3
SLIDE 3

What are we talking about?

1. Why is SPEED important? 2. Understanding the engine that powers your site. The full stack. 3. Performance Budgeting 4. How do you measure it? 5. Infrastructure or the ‘Puter 6. Applications and Caching 7. Common Front-End & Other Speed Traps

slide-4
SLIDE 4

Who is this for?

Developers & Technical Marketers Basically anyone who has a WordPress site on the Internet Focus: WordPress Oriented Difficulty: Intermediate - we’re going to get pretty nerdy here.

slide-5
SLIDE 5

Why is SPEED important?

slide-6
SLIDE 6

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.

slide-7
SLIDE 7

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.

slide-8
SLIDE 8

Understanding the Engine

slide-9
SLIDE 9

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.

slide-10
SLIDE 10

Most of the focus is usually placed on the Browser layer

But there are

  • ptimizations that

can be made at every layer in the stack.

slide-11
SLIDE 11

Performance Budgeting

slide-12
SLIDE 12
slide-13
SLIDE 13

How much would you pay for it?

slide-14
SLIDE 14
slide-15
SLIDE 15

How long would you wait for it?

slide-16
SLIDE 16

A feature is pointless if the value isn’t worth waiting for...

A Performance Budget forces you to justify every features against the performance

  • verhead it creates.

Performance budgeting requires buy-in from marketers, developers, product managers, engineers, leadership (basically everyone). The earlier a performance culture is implemented in a project the less effort, time and money needed on optimization.

slide-17
SLIDE 17

Must be less than 1MB

Setting a budget is not complicated...

Must load in under 3s on 3G

slide-18
SLIDE 18

https://codepen.io/robertliwpe/full/poorzBE https://www.performancebudget.io/

Don’t test for less than 20% difference between time. Set your budget in relation to competitors (e.g. 20% faster)

slide-19
SLIDE 19

How do you measure it?

slide-20
SLIDE 20

Front End Performance

slide-21
SLIDE 21

Front End Performance

slide-22
SLIDE 22

Application Performance

slide-23
SLIDE 23

Application Performance

slide-24
SLIDE 24

Infrastructure Performance

slide-25
SLIDE 25

Infrastructure Performance

slide-26
SLIDE 26

Infrastructure or the ‘Puter

slide-27
SLIDE 27

What is your website doing? Where is your website hosted? How is your website hosted?

slide-28
SLIDE 28

Where is your website hosted? Is your website hosted close to your intended audience.

https://submarine-cable-map-2019.telegeography.com/

slide-29
SLIDE 29

How is your website hosted? On Premises vs. Cloud Hosting

slide-30
SLIDE 30

What is your website doing? Optimized for Compute vs. Memory vs. General

slide-31
SLIDE 31

Application and Caching

slide-32
SLIDE 32

What is caching?

cache (n.) A cache is a store of items that is predicted to be accessed soon or is frequently accessed in a location that’s closer and/or faster to access.

https://medium.com/datadriveninvestor/all-things-caching-use-cases-benefits-strategies-choosing-a-caching-technology-exploring-fa6c1f2e93aa

Your MacBook does it So does your mail As do websites.

slide-33
SLIDE 33

Plugin based caching is easy to

  • use. Server level

caching is more effective.

vs.

slide-34
SLIDE 34
slide-35
SLIDE 35

Standard LAMP is

  • inefficient. Pages

are processed from scratch every time it’s requested.

slide-36
SLIDE 36

We can help APACHE out with web accelerators / reverse proxies.

slide-37
SLIDE 37

Save commonly compiled PHP bytecode in memory with OpCache.

slide-38
SLIDE 38

Save common data from MySQL with

  • bject caching like

Redis, Memcached

  • r Aerospike.
slide-39
SLIDE 39

Top Down + Test Step By Step

&

Test how each caching layer interacts with the stack and the improvement in performance before moving lower down the stack.

slide-40
SLIDE 40

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

slide-41
SLIDE 41

The Fastest Global CDNs

slide-42
SLIDE 42

Terminate SSL at the edge

Reduce latency and computational intensity by offloading TLS handshake at the EDGE.

It’s faster...

slide-43
SLIDE 43

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

slide-44
SLIDE 44

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.

slide-45
SLIDE 45

The Fastest DNS hosts

slide-46
SLIDE 46

Do you use GoDaddy or NameCheap?

slide-47
SLIDE 47

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

slide-48
SLIDE 48

Common Front End & Other Speed Traps

slide-49
SLIDE 49

Optimization Plugins

Still a good idea to minify and concatenate HTML and CSS, and control data serving strategy.

Easy to use High ROI

slide-50
SLIDE 50

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?

slide-51
SLIDE 51

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

slide-52
SLIDE 52

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.

slide-53
SLIDE 53

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.

slide-54
SLIDE 54

Be frugal with plugins

Don’t use plugins if possible. Choose lightweight plugins. Delete unused plugins. Best practice is less than 20.

slide-55
SLIDE 55

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!

slide-56
SLIDE 56

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.

slide-57
SLIDE 57

InnoDB is coming

MyISAM is the traditional MySQL engine, but it's incredibly inefficient. InnoDB locks off less data when accessing a table.

Greater concurrency Greater scalability

IF THE BOAT WAS THE DB

slide-58
SLIDE 58

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.

slide-59
SLIDE 59
slide-60
SLIDE 60

Questions?

Robert Li E: robert.li@wpengine.com P: +61-(0)-7-5613-1084 SM: LinkedIn (Look Left!)