Rebuilding hackeryou.com

Slide 1

rebuilding hackeryou.com

Slide 2

i’m Kristen Spencer @_kristenspencer / @hackeryou

Slide 3

the old wordpress website...

Slide 4

the old (wordpress) website... The business outgrew the site leading to… - Too many plugins - Too much hacky code to add afterthought features - A dev team that’s teaching most of the time instead of maintaining the site - Huge performance issues

Slide 5

hackeryou.com/ ? Cool! First just let me first... 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Load wp-config file Setup default constants Load advanced-cache.php file Load wp-content/db.php file Connect MySQL and Select Database Load object-cache.php file Load localization library Load active plugins Load pluggable.php file Do Action ‘plugins_loaded’ Load rewrite rules Instantiate $wp_query, $wp_rewrite, $wp Do Action ‘setup_theme’ Load child theme’s functions.php 15. 16. 17. 18. 19. 20. 21. 22. 26. 27. 28. 29. Load parent theme’s functions.php Do Action ‘after_setup_theme’ Setup Current User Object Do Action ‘init’ Do Action ‘widget_init’ Run wp() Parse request Run Query Do Action ‘template_redirect’ Load Feed Template Load Template Do Action ‘shutdown’

Slide 6

Slide 7

This is embarrassing! We are an internet school.

Slide 8

It’s not Wordpress’s fault! But was there something better for our team of technical and tech savvy people?

Slide 9

Slide 10

come for the dev experience stay for the performance benefits

Slide 11

slow shared hosting bloated CMS bulky real time application

Slide 12

Slide 13

write some code merge to master branch gatsby build runs & site is deployed Speedy AF Static site webhook notifies netlify update some content webhook notifies netlify

Slide 14

hackeryou.com/ ? Cool! First just let me first... 1. Load html, css, js, images from a CDN.

Slide 15

Slide 16

That’s a little better!

Slide 17

static site generator pages are all react components plug & play with the CMS of your choice (we chose Contentful)

Slide 18

easy cli setup hot reloading performance minded from the start

Slide 19

hey how u so speedy? Static files cached on CDN with Netlify Out of the box pre-fetching which loads the next links content in the background

Slide 20

hey how u so speedy? Out of the box page caching Progressive image loading Inlines critical CSS

Slide 21

Built in image optimization alone was enough to sell us on choosing Gatsby to build our new site.

Slide 22

The problem: >500 alumni.

Slide 23

The solution: gatsby image - React component - Grabs images in multiple sizes with GraphQL - Loads an appropriately sized image based on device size - Lazy loads images with a blur up effect