A holistic approach to web performance

A Holistic Approach to
Web Performance

About Me
Austin Gil (@Stegosource)
Lead developer at Visceral
(www.thisisvisceral.com)
I build kick-ass websites
and web apps that make life
better for clients and users.
I also break things sometimes....

Overview
1. Why performance matters
2. Concepts related to performance
3. Optimization throughout a project
4. Testing & recap
5. Questions & recommended tools

Performance: Why Do We Care?
(Super quick overview)

User Experience
Faster loading websites
have been proven to
keep visitor on the site
and interacting longer.
Visitors also are more
likely to return to fast
sites, or avoid slow sites.
SEO
In 2010, Google decided
that page speed would
be incorporated in their
page ranking algorithm.
It is not the most
important ranking signal,
but worth noting.
Money
Performance factors
directly affect conversion.
Speed affects time spent
on site management.
Lightweight sites are
easier on data.

The Cost of Latency
“In 2008, Amazon found that every 100ms of
latency cost them 1% in sales.”
Amazon earns over $100 BILLION per year
...so 100ms = $1 billion

1. Choose a good host
2. Enable Gzip compression
3. Minimize redirects
4. Combine JS files
5. Defer JS parsing
6. Off-load the assets
7. Remove unused plugins
8. Use image srcset
9. Optimize database
19. Minify HTML
20. Minify CSS
21. Minify Javascript
22. Avoid CSS @import
23. Remove query strings
24. Specify image dimensions
25. Use data URIs
26. Serve scaled images
27. Specify character set
28. Reduce database calls
10. Use image sprites
11. Styles in header
12. Scripts in footer
13. Lazy load images
14. Enable caching
15. Optimize Images
16. Optimize WP_Query
17. Reduce DNS Lookups
18. Combine CSS files
COMMANDMENTS OF WEB
PERFORMANCE!!!“Thou shalt not take the name of thy lord,
Performance, in vain”

Optimization Simplified to 3 Rules
Send fewer things
Send smaller things
Send things efficiently

Optimize During Each Stage
Item 2
Project Planning - PM’s / Clients
Production - Developers
Architecture & Design - Designers

Big Players
- Client “requirements” (see: sliders)
- CDN (Cloudflare)
- Client uploads
- Hosting

Be the Expert
Item 2Designers
- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)

Show Up Prepared
Item 2Designers
- Know your hosts (PHP 7, SSD, HTTP/2)
- Know your CDN’s (cost & effort)
- Know your client (budget & needs)

Make Things Easy
Item 2Designers- Manage uploads
- Share useful tools
- Provide detailed documentation
- Do it for them...with a maintenance plan :)
- Image dimensions (Imsanity)
- Image quality (EWWW)
- Image editors (Pixlr, GIMP)

Big Players
- Amount of content
- Multimedia (images, videos, audio)
- Complexity

Content & Layouts
Item 2Designers- Grids
- Break up content (multi-page, AJAX)
- Replace images

Less is More
Item 2Designers
- Font families (System Fonts, Google fonts)
- Icon libraries (Fontello, Icomoon)
- 3rd party elements (ads, maps, social)

0.3s load time - Motherfuckingwebsite.com

Icon Libraries Compared
Item 2 Designers
Font Awesome:
Font + CSS
270kb
Fontello (10):
Font + CSS
-93%
Glyphicons:
Font + CSS
-60%
108kb 19kb

Sliders/Carousels
Item 2Designers- Just don’t
- There are alternatives
- They bloat your page
- They’re bad for SEO (Yoast agrees)
- They’re bad for accessibility
- They don’t convert (about 1% after first slide)

Images
Item 2Designers- Save for web
- Automate
- Simpler images (flat design)
- Know your file types (jpg, png, svg)

Item 2Designers
Image Optimization Example
Original
621 kb
Save for web (60%)
275 kb
-56%
Original Image = 1250 x 877px, complex, many colors
Optimization tool (TinyPNG)
192 kb
-69%

The Affect of Image Effects
(we can go even smaller)

Transparent
Overlay
135kb
-30%

Big players
Item 2Designers
- Caching
- How you <img>
- Unnecessary resources
- Database

Caching
Item 2Designers
- Manually…
- WP Rocket (Paid)
- WP Fastest Cache
- W3 Total Cache
- The WordPress way

Image Markup
Item 2Designers
- Image sizes (Settings > Media)
- Use srcset: <img src=“...” srcset=“...” />
- get_post_thumbnail( $post_id )
- wp_get_attachment_image( $img_id )
- Match to major breakpoints
- Responsive background images (Gist)(Pen)

Lazy Load Images
Item 2Designers- Lazy Load (Lazy Load)
- Progressive Lazy Load (Gist)(Pen)
- Load thumbnail overlay (blur with CSS)
- Javascript load full size
- Fade out thumbnail
- Load tiny transparent img
- User interaction (scroll, click)
- Use JS to replace with actual image
- Accessibility...?

Scripts & Styles
Item 2Designers
- Minify & concatenate
- Conditional load
- Plugins (Autoptimize)
- Taks runners (Gulp, Grunt, Webpack)
- Manually (Shrinker)
- If ( is_font_page() ) { wp_enqueue_script(“...”) }
- Only when a shortcode is present (Article)(Gist)
- Plugins (Plugin Organizer, WP Asset Clean Up)
- It’s ok to dequeue

CSS Grids Compared
Item 2 Designers
Bootstrap:
CSS & JS:
152kb
Custom Grid:
CSS: 5kb
-97%
PureCSS:
CSS: 27kb
-82%
More cool CSS info and tools at CSSPurge.com

Queries
Item 2Designers- Learn WP_Query (Codex)
- Reuse same query
- wp_reset_query()
- Filter in query (post_type, posts_per_page, meta_query, tax_query, etc.)
- WP_Query optimization tricks
- Optimize database (Optimize Database after Deleting Revisions)

Offload Resources
Item 2Designers
- Understand what you’re doing
- Images (Flickr, ImageEngine)
- Videos (YouTube, Vimeo)
- Audio (SoundCloud)
- Scripts & styles (JSDelivr) (Gist)
- Take advantage of hosted services

What About Servers?
Item 2Designers
- A look at the modern WordPress server stack
- Carl Alexander is AWESOME

Item 2Designers
- Query Monitor - Too much goodness to write
Testing Tools
- GT Metrix - Webpage grades and advice
- P3 - Compare plugin load times
- Bitcatcha - Server speed testing

Item 2Designers
Address Biggest Impactors First
- Upgrade your host
- Enable caching
- Check your file sizes

Item 2Designers
- Swap out plugins
Low Hanging Fruit
- Optimization plugins
- Remove unnecessary everything

Designers
Image Optimization Tools - TinyPNG or Kraken: Support batch uploads/downloads. Results vary.
Image Optimization Plugins (choose one):
EWWW: Plug n’ play. Free. Good for agencies with lots of projects.
Compress JPEG & PNG images: Better performance. Freemium. Requires account.
Imsanity (plugin): Automatically resize super large uploads. Plug n’ play.
WP ImageEngine Responsive Image Resizer (plugin): Image hosting service
File Minification & Concatenation Tools:
Autoptimize (plugin): Easy to use, but be careful, it can break things sometimes. Test it.
Gulp, Grunt, or Webpack: Task runners. Add to workflow to automate file optimization (advanced)
Shrinker: Online tool. Supports inserted code, upload files, or upload from URL
Conditional Load Assets Plugins (choose one):
Plugin Organizer: Lot’s of setup work. Good for individuals fine tuning.
WP Asset Clean Up: Not as powerful, but much more simple to set up.
JSDelivr: Scripts & styles CDN. Also can minify and concatenate.
Optimize Database after Deleting Revisions: Database optimization plugin. Supports schedules.
Cloudflare: Free CDN

A holistic approach to web performance

More Related Content

What's hot

Viewers also liked

Similar to A holistic approach to web performance

Recently uploaded

A holistic approach to web performance