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
180
Front-end Performance: NebraskaJS, 2015
trevan
2
240
Super Fast WordPress Themes: WordCamp Minneapolis, 2015
trevan
1
200

Other Decks in Design

See All in Design
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
290
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
48k
Карта реализации историй — убийца USM
ashapiro
0
200
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
450
Arborea Art Book
thebogheart
1
290
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.2k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
290
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
130
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
330
情報設計からのデザインアプローチ ～ユーザーの声を聞くよりも、もっとデータの声を聞け～
securecat
4
2.3k
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
250
TUNAG BOOK 2024
stmn
0
320

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Designing for Performance
lara
604
68k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Being A Developer After 40
akosma
86
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Building Applications with DynamoDB
mza
90
6.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Happy Clients
brianwarren
98
6.7k
We Have a Design System, Now What?
morganepeng
50
7.2k
Visualization
eitanlees
145
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Cult of Friendly URLs
andyhume
78
6k

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