Super Fast WordPress Themes: WordCamp Minneapolis, 2015

Slide 1

Slide 1 text

Super fast WordPress themes

Slide 2

Slide 2 text

Trevan Hetzel @trevanhetzel trevan.co

Slide 3

Slide 3 text

Beautiful WordPress hosting built for designers

Slide 4

Slide 4 text

A podcast dedicated to front-end development A podcast dedicated to front-end development word-break:

Slide 5

Slide 5 text

Super fast WordPress themes

Slide 6

Slide 6 text

getﬂywheel.com 75% increase in speed

Slide 7

Slide 7 text

Before After

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Because SEO.   Because ACCESSIBILITY.     

Slide 10

Slide 10 text

whatdoesmysitecost.com

Slide 11

Slide 11 text

Because SEO.   Because ACCESSIBILITY.   Because MONEY.   

Slide 12

Slide 12 text

Because SEO.   Because ACCESSIBILITY.  Because MONEY.  Because SPEEEEED.

Slide 13

Slide 13 text

The most valuable metric

Slide 14

Slide 14 text

Perceived performance Performance should be thought of in terms of both quantitative measured time AND how a page is perceived.

Slide 15

Slide 15 text

Fill your testing tool belt

Slide 16

Slide 16 text

Tools

Slide 17

Slide 17 text

Pagespeed Insights My go-to tool for examining how optimized your site is. Lets you know: • if images need optimized • if scripts and stylesheets are loaded properly • and much more

Slide 18

Slide 18 text

WebPageTest • My go-to tool for testing actual performance • Speed index is great for measuring perceived performance • Shoot for a low Speed Index (1000 is a good goal)

Slide 19

Slide 19 text

WebPageTest

Slide 20

Slide 20 text

Developer tools

Slide 21

Slide 21 text

Let’s dive in

Slide 22

Slide 22 text

“80-90% of the end- user response time is spent on the front-end. Start there.” - Steve Souders

Slide 23

Slide 23 text

Images

Slide 24

Slide 24 text

Use sprites • Minimizes requests

Slide 25

Slide 25 text

Compress • Photoshop is not good enough • TinyPNG, OptiPNG, ImageOptim, jpegtran • Use a WP plugin if needed

Slide 26

Slide 26 text

Resize • Don’t make the browser resize images • Only load the size necessary for the current viewport • The new picture element and its attributes are great for this

Slide 27

Slide 27 text

Picturefill • A polyfill from Scott Jehl & the RICG for • Picturefill

Slide 28

Slide 28 text

RICG Responsive Images WP Plugin • Yay, there’s a plugin for this! • https://wordpress.org/plugins/ricg-responsive- images/

Slide 29

Slide 29 text

JavaScript

Slide 30

Slide 30 text

Determine necessities • Be leery of plugins • jQuery is not always necessary

Slide 31

Slide 31 text

Concatenate & Minify • Serve as few JavaScript ﬁles as possible, by concatenating • Use Uglify to minify • Task runners work like magic for these tasks

Slide 32

Slide 32 text

Load smart • Scripts go before closing tag

Slide 33

Slide 33 text

Load smart

Slide 34

Slide 34 text

Load smart • Scripts go before closing tag • Defer loading of JS where possible • loadJS • Use defer and async attributes

Slide 35

Slide 35 text

Load smart • Concatenate • Minify • Load smart

Slide 36

Slide 36 text

CSS

Slide 37

Slide 37 text

Concatenate & Minify • Serve as few CSS ﬁles as possible, by concatenating • Using Sass is beneﬁcial • Compression (removing whitespace) • Task runners work like magic for these tasks

Slide 38

Slide 38 text

Compress

Slide 39

Slide 39 text

Load smart • The foolproof way is to serve stylesheets in the head • However, this blocks the loading of other resources • Enter “critical CSS”

Slide 40

Slide 40 text

• Styles that are needed for the ﬁrst, above-the-fold view are inlined in the • The full stylesheet is then loading asynchronously, not blocking the rest of the page (loadCSS is perfect for this) • critical by Addy Osmani • grunt-criticalcss by Filament Group Critical CSS

Slide 41

Slide 41 text

Caching headers

Slide 42

Slide 42 text

Caching headers

Slide 43

Slide 43 text

Caching headers • Expires and max-age • Instructs the browser to load already downloaded assets • Tell the browser when to stop caching • Far Future Expiry Header WP plugin

Slide 44

Slide 44 text

CDN

Slide 45

Slide 45 text

CDN • Delivers content to the user from the closest and fastest server available • Your assets are hosted on a network of servers throughout the world

Slide 46

Slide 46 text

The other 20%

Slide 47

Slide 47 text

Time To First Byte

Slide 48

Slide 48 text

“The duration from the user making an HTTP request to the ﬁrst byte of the page being received by the browser”

Slide 49

Slide 49 text

Host Managed WP hosts provide: • Security • Nginx • Robust caching • And much more

Slide 50

Slide 50 text

Caching • Different from the browser cache • Stores your posts and pages as static ﬁles

Slide 51

Slide 51 text

GZIP • A ﬁle format used for compression

Slide 52

Slide 52 text

Theme logic • Write performant PHP • Reduce calls to the database • Use transients

Slide 53

Slide 53 text

Plugins • Plugins can dramatically slow down your TTFB • Be cautious • Quantity is not bad, but poor quality is • Watch for database queries and complex operations • Watch for assets loaded by plugins • P3 Proﬁler

Slide 54

Slide 54 text

Thanks! @trevanhetzel trevan.co