FITC Article for COMP2112
Tags: javascript, gatsby, beginners, codenewbie
Published: 2020-12-06 15:50:08

# Master Gatsby

##### What I already knew.
The session I’m writing about is **[Master Gatsby.](https://www.gatsbyjs.com/)** It was talked about by **[Wes Bos](https://fitc.ca/speaker/wesbos/)** as he just finished making a course on Gatsby. Everything I know about this topic is an assumption. I assume it has something to do with JavaScript and it might be a framework. I’m hoping to learn what it is, what it can do and how it can be used.

##### I found out.
I have learned that Gatsby is indeed a JavaScript framework for making websites but it can be used with **[React.js.](https://reactjs.org/)** This was surprising to me as I thought React.js was already a framework. According to the video React does templating, state management, change and update data as well as other things. It seems more of a basic framework compared to Gatsby. Gatsby adds things on top of react. From my small knowledge this seems like a very good thing to have.

##### Image compression and loading.
Gatsby does image compression and progressive image loading with an official plugin called "gatsby-image". I knew web design would deal with image files sizes but always just assumed it was more of a optimize the image and then add it to the site. Gatsby can save a smaller, low resolution version to be loaded very fast, then load in the larger original image and fade it in as it loads. It can also convert the photo into more friendly format for the browser. This would be huge for making a site load faster before a user decides to look elsewhere.

##### Optimize your CSS
Gatsby will look through your CSS before the HTML is rendered and only load the CSS for what is needed. So if you have redundant or unused CSS it will not load it. So if you change a class name from .mainSectionContent and then want something shorter so it gets changed to .mainSection and then you decided to add in new styles but forget to take out the older class name and styles they will not be loaded. This will save time with your browser not looking over the whole HTML for a class that doesn’t exist. This might save a few milliseconds but on large pages and repeated viewing or refreshing it will add up.

##### Final Thoughts
Gatsby seems like it can be a very powerful way to make new fast sites but still allowing them to be content heavy, have lots of pictures, styles and JavaScript functionality while still being fast enough to retain users. You have about **[3 seconds](https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/)** to load a site. If a user has to wait for a site to load they will look elsewhere. If a user is always waiting on something to happen on a site after a click they will look elsewhere for the content they need. Very few sites are the only place for the content a user has searched for so having a site people don’t want to leave is very important and something like Gatsby can make the difference in user retention.

This was written for a class at Georgian College in Barrie Ontario

This was from a video watched at the 2020 FITC Web Unleashed conference
**https://fitc.ca/event/webu20/**