How I optimized my portfolio website using @Gatsbyjs to get a 100 on all Lighthouse audits.

— a thread [1/12]

#100DaysOfCode #webdev #a11y #SEO #lighthouse #Webdesign

First off, let's start with the technologies used in creating my portfolio:
• Markdown
• Gatsby.js (uses React and GraphQL)
• FontAwesome
That's pretty much it. It’s deployed on @netlify using @github (amazing duo btw) [2/12]

Now moving on to some honorable mentions:

1) Gatsby's plugin for React Helmet helped a lot with setting up titles automatically for every page improving its SEO. This significantly boosted the SEO score on Lighthouse. [3/12]

2) The sitemap plugin — no configuration whatsoever, just added the plugin to gatsby-config.js and it took care of the rest. Sitemaps helps with SEO by allowing Google's crawlers to index your website. [4/12]

3) The robots.txt plugin — again, no configuration at all. This helps with informing search engines which pages of your website to crawl (in most cases you want all). [5/12]

4) Not much to do with optimization, but still needs a shoutout: The feed plugin — super easy to set up, gives your website a /feed.xml file with all your blog posts. Why would you need this? Because some users prefer to use RSS readers, and this allows for just that. [6/12]

5) The CSP plugin — super important for security purposes, also one of the things that Lighthouse tests. By setting up the right policies, you can reduce the risk of XSS attacks and Click Jacking (read more: https://content-security-policy.com/ ) [7/12]

6) The offline plugin — allows for offline support by loading a server worker into the client. Helps with caching pages for faster loading times and gets you that green tick for having a PWA :) [8/12]

7) Optimizing images is super important for speed, there are many plugins that take care of that, however I currently use @cloudinary to optimize any images that I think will be requested a lot (e.g. blog post cover images and project logos). [9/12]

A few months ago I wrote a blog post about using CSS sprites for social media icons. I've received a lot of feedback from the wonderful @ThePracticalDev community and learned that it is more efficient to use SVGs instead, so do that :D [10/12]

It's 2020, please make your websites more accessible, and continue to educate yourself on #a11y in general. I learn something new everyday by reading a few articles from people like @SaraSoueidan . Read more about the accessibility audits at https://web.dev/accessibility-scoring/ [11/12]

Final thoughts — you don't need to use static site generators like Gatsby.js in order to achieve this, this could be done the old fashioned way using plain HTML, CSS and Javascript. All it takes is a bit of research. A great place to start is https://web.dev/learn/  [12/12]