Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Super Fast WordPress Themes: WordCamp Maine, 2015

Trevan Hetzel
May 16, 2015
Design
1
160

Super Fast WordPress Themes: WordCamp Maine, 2015

Today’s web users have the need for speed. With internet and cellular connections getting faster and faster, users expect sites to feel snappy and not make them wait. We as developers must make sure we’re doing our very best to serve those pages quickly. This talk will focus on the things you should be doing, both on the front-end and back-end, when building WordPress themes.

Trevan Hetzel

May 16, 2015
Tweet

More Decks by Trevan Hetzel

See All by Trevan Hetzel
Super Fast WordPress Themes: WordCamp Omaha, 2015
trevan
0
190
Front-end Performance: NebraskaJS, 2015
trevan
2
250
Super Fast WordPress Themes: WordCamp Minneapolis, 2015
trevan
1
200

Other Decks in Design

See All in Design
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
600
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
230
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
210
Improve a service workshop
mastervicedesign
1
130
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k
Карта реализации историй — убийца USM
ashapiro
0
260
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
600
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.3k
Night Shift concept 9/15/2024
cpineda57
0
750
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
180

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Being A Developer After 40
akosma
87
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Agile that works and the tools we love
rasmusluckow
328
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
KATA
mclloyd
29
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
50
6.1k

Transcript

  1. Super fast WordPress themes

  2. Trevan Hetzel @trevanhetzel trevan.co

  3. Beautiful WordPress hosting built for designers

  4. A podcast dedicated to front-end development A podcast dedicated to

    front-end development word-break:

  5. Super fast WordPress themes

  6. None

  7. 300% decrease in load time

  8. Before After

  9. The most valuable metric

  10. Perceived performance

  11. Perceived performance

  12. Test yourself before you wreck yourself

  13. Tools

  14. 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

  15. Pagespeed Insights

  16. 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)

  17. WebPageTest

  18. Developer tools

  19. whatdoesmysitecost.com

  20. Let’s dive in

  21. “80-90% of the end- user response time is spent on

    the front-end. Start there.” - Steve Souders

  22. Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Transients Database queries

  23. Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Transients Database queries

  24. Images CSS JavaScript

  25. Images

  26. Before loading

  27. None

  28. Sprite

  29. None

  30. Compress

  31. None

  32. OptiPNG PNGGauntlet

  33. None

  34. Loading

  35. Don’t make the browser resize images

  36. 1280x800 361x226

  37. 361x226 361x226

  38. What about retina & responsive design?

  39. <picture>

  40. <picture> <source srcset=“examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> <img

    srcset=“examples/images/medium.jpg" alt="Description"> </picture>

  41. There’s a WP plugin for this!

  42. https://wordpress.org/plugins/ricg-responsive-images/

  43. JavaScript

  44. Before loading

  45. Is it necessary?

  46. Okay then, concatenate & minify

  47. Loading

  48. Defer loading of scripts

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

  50. defer and async

  51. https://github.com/filamentgroup/loadJS loadJS

  52. <head> ... <script> // include loadJS here... function loadJS( src

    ){ ... } // load a file with loadJS loadJS( "path/to/script.js" ); </script> ... </head>

  53. CSS

  54. Before loading

  55. Follow some sort of standard

  56. OOCSS SMACCSS BEM

  57. Concatenate & minify

  58. None

  59. Loading

  60. Stylesheets go in the <head>

  61. But Google says…

  62. Google’s right. Inline critical CSS

  63. Critical CSS • Styles that are needed for the first,

    above-the-fold view are inlined in the <head> • The full stylesheet is then loading asynchronously, not blocking the rest of the page

  64. • critical by Addy Osmani • grunt-criticalcss by Filament Group

    Critical CSS tools

  65. https://github.com/filamentgroup/loadCSS loadCSS

  66. <head> ... <script> // include loadCSS here... function loadCSS( href,

    before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/mystylesheet.css” rel=“stylesheet"> </noscript> ... </head>

  67. HTTP/2

  68. Thanks! @trevanhetzel trevan.co