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

Super Fast WordPress Themes: WordCamp Omaha, 2015

Trevan Hetzel
October 10, 2015
Technology
0
190

Super Fast WordPress Themes: WordCamp Omaha, 2015

Trevan Hetzel

October 10, 2015
Tweet

More Decks by Trevan Hetzel

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

Other Decks in Technology

See All in Technology
Oracle Cloudの生成AIサービスって実際どこまで使えるの？ エンジニア目線で試してみた
minorun365
PRO
4
280
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
podman_update_2024-12
orimanabu
1
260
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
.NET 9 のパフォーマンス改善
nenonaninu
0
690
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
非機能品質を作り込むための実践アーキテクチャ
knih
3
840
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110

Featured

See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Mobile First: as difficult as doing things right
swwweet
222
9k
It's Worth the Effort
3n
183
28k
4 Signs Your Business is Dying
shpigford
181
21k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
BBQ
matthewcrist
85
9.4k
Docker and Python
trallard
42
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Cult of Friendly URLs
andyhume
78
6.1k
The Invisible Side of Design
smashingmag
298
50k
Into the Great Unknown - MozCon
thekraken
33
1.5k

Transcript

  1. Super fast WordPress themes

  2. Trevan Hetzel @trevanhetzel trevan.co

  3. Beautiful WordPress hosting built for designers

  4. Super fast WordPress themes

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

    front-end. Start there.” - Steve Souders

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

    cookies Dedicated host Minify HTML Database queries

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

    cookies Dedicated host Minify HTML Transients Database queries

  8. Perceived performance The most valuable metric

  9. How fast a user thinks your site loads

  10. None

  11. Test yourself before you wreck yourself

  12. None

  13. Images

  14. None

  15. No really, use CSS or icon fonts

  16. Sprite

  17. 5kb 4kb 4kb 3kb 6kb 5kb 5kb 3kb 6kb ✗

  18. 14kb ✓

  19. None

  20. Compress

  21. None

  22. OptiPNG PNGGauntlet

  23. None

  24. Don’t scale images in HTML

  25. <img src=“img-1280x800.png” width=“321” height="226">

  26. <img src=“img-1280x800.png” width=“321” height="226">

  27. <img src=“img-321x226.png” width=“321” height="226">

  28. What about retina & responsive design?

  29. <picture>

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

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

  32. Lazy load

  33. None

  34. • Reduce the amount of images used • Sprite •

    Compress • Don’t scale in HTML • Lazy load Summary

  35. JavaScript

  36. Is it necessary?

  37. Okay then, concatenate & minify

  38. Write performant code

  39. Defer loading of scripts

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

  41. <head> <script defer src=“app1.js”></script> </head> <body> </body>

  42. <head> <script async src=“app.js”></script> </head> <body> </body>

  43. Script loaders

  44. <script> var resource = document.createElement('script'); resource.src = "app.js"; var script

    = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); </script>

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

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

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

  47. • Don’t overuse libraries & frameworks • Concatenate • Minify

    • Write performant JS • Defer loading Summary

  48. CSS

  49. Follow some sort of standard

  50. Concatenate & minify

  51. None

  52. Stylesheets go in the <head>

  53. But Google says…

  54. Google’s right. Inline critical CSS

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

  56. <head> <style>*{box-sizing:border-box}html{padding: 1em;background-color:#f4d93a}body{font- family:’Helvetica Neue',sans-serif; padding:0;margin:0;font-size:100%;line-height: 140%; ... </style> </head>

  57. How to find critical CSS • critical by Addy Osmani

    • grunt-criticalcss by Filament Group

  58. What about the full stylesheet?

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

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

  61. But, but, inline styles aren’t cacheable…

  62. <?php if(isset($_COOKIE['critical_css'])): ?> <link href=“path/to/style.css" rel="stylesheet"> <?php elseif: ?> <style><!--

    Critical styles go here --></style> <script> // include loadCSS here... function loadCSS( href, before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/style.css” rel=“stylesheet”> </noscript> // Set cookie here <?php endif; ?>

  63. • Use a CSS methodology or standard • Concatenate •

    Minify • Inline critical CSS • Load full stylesheet asynchronously Summary

  64. Thanks! @trevanhetzel trevan.co