rebuilding hackeryou.com

i’m Kristen Spencer @_kristenspencer / @hackeryou

the old wordpress website...

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

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’

This is embarrassing! We are an internet school.

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

come for the dev experience stay for the performance benefits

slow shared hosting bloated CMS bulky real time application

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

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

That’s a little better!

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

easy cli setup hot reloading performance minded from the start

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

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

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

The problem: >500 alumni.

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

Gatsby Image in action

We’re still not quite as speedy as we’d like to be, though...

What’s slowing us down? Marketing & SEO!

we e t e g a p b g r o st.

google tag manager Linkedin ads g r o st. e t e g a p b we Pardot scripts Pinterest analytics Facebook analytics Pinterest analytics

It’s still so much better than before!

Our dev team is stoked. “I’ve never been excited to work on a webSITE before now”

  • Karley, Head of PT JavaScript who prefers Application Development and was just onboarded

Our alumni are noticing the improvements! “Wow it’s fast”

  • Miguel Bautista, HackerYou Alumnus

10/10, Would Use Again

Thank you!