This discussion looks at different opportunities and techniques where project managers, designers, and developers can improve performance. The techniques presented range from beginner to advanced so just about anyone can walk away with something to apply to their next project. Topics cover concepts and planning, workflows, tools and services, plugin recommendations, and there are links to code examples as well.
Austin Gil (@Stegosource)
Lead developer at Visceral
I build kick-ass websites
and web apps that make life
better for clients and users.
I also break things sometimes....
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)
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.
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.
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
Be the Expert
- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)
Show Up Prepared
- 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)
Icon Libraries Compared
Item 2 Designers
Font + CSS
Font + CSS
Font + CSS
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)
Item 2Designers- Save for web
- Simpler images (flat design)
- Know your file types (jpg, png, svg)
Image Optimization Example
Save for web (60%)
Original Image = 1250 x 877px, complex, many colors
Optimization tool (TinyPNG)
The Affect of Image Effects
(we can go even smaller)
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