Super Fast WordPress Themes: WordCamp Minneapolis, 2015

Super fast WordPress themes

Trevan Hetzel @trevanhetzel trevan.co

Beautiful WordPress hosting built for designers

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

Super fast WordPress themes

getﬂywheel.com 75% increase in speed

Before After

Because SEO.   Because ACCESSIBILITY.     

whatdoesmysitecost.com

Because SEO.   Because ACCESSIBILITY.   Because MONEY.   

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

The most valuable metric

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

Fill your testing tool belt

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

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)

WebPageTest

Developer tools

Let’s dive in

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

Images

Use sprites • Minimizes requests

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

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

Picturefill • A polyfill from Scott Jehl & the RICG
for <picture> • Picturefill

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

JavaScript

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

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

Load smart • Scripts go before closing <body> tag

Load smart <head> </head> <body> <!— sweet markup —> <script
src=“app.js”></script> </body>

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

Load smart • Concatenate • Minify • Load smart

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

Compress

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

• Styles that are needed for the ﬁrst, above-the-fold view
are inlined in the <head> • 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

Caching headers

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

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

The other 20%

Time To First Byte

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

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

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

GZIP • A ﬁle format used for compression

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

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

Thanks! @trevanhetzel trevan.co

Super Fast WordPress Themes: WordCamp Minneapolis, 2015

Super Fast WordPress Themes: WordCamp Minneapolis, 2015

More Decks by Trevan Hetzel

Other Decks in Design

Featured

Transcript