A presentation at Toronto Web Performance Meetup in in Toronto, ON, Canada by Kristen Spencer
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”
Our alumni are noticing the improvements! “Wow it’s fast”
10/10, Would Use Again
Thank you!
Hacker You Lead Instructor Kristen Spencer walks us through the HackerYou.com rebuild and redesign, and how GatsbyJS solved all of their performance woes.
for free. You
can too.