Can you guess what's wrong with my Highschool's website?

The Breakdown

In order to fully understand why I had such a bad relationship with my Highschool website, we need to look at the finer things. In this blog post, I will be referencing a website called web.dev. Web.dev is a performance monitoring website that runs any site using a given URL and spits out scores 1-100 based on four major categories; Performance, Accessibility, Best Practices, and SEO. Now I had a personal disdain for my Highschool website (scasd.org/highschool:scahs for short), and now I'm going to show you why using logic instead of emotion.

The Start

The scahs website has improved since my graduation 3 years ago, but it still has the same fundamental problems. The first of those being the amount of render-blocking resources there are. Lighthouse provides us with the exact amount of time is being used and how it compares to other problems. Render-blocking resources are our greatest concern in the worst scored category: Performance.

Render-blocking resources are any files within the CSS or JS code that would end up taking the website longer to load. In my case, the scahs website has 3.81 seconds of loading those files every time I open the webpage. That might not seem like a lot of time but having to go to that website every day for 12 years, added up. The most common way to eliminate render-blocking resources is to use an application that does it automatically. One app I've seen used is WordPress which is a plugin that automatically helps eliminate those slow resources. If you wanted to do it yourself, another solution would be to use async/defer on your body or script tags in order to load everything at the same time rather than waiting for the CSS/JS to load.

Anotha One

The 11/100 Performance score showed me that my frustrations growing up using the scahs site wasn't just nonsense and that I was the true genius among kids who didn't fall for their pretty layout charade. With that in mind, I decided to investigate what else was wrong internally. As you can see from the first picture, my school administration loved big pictures to cascade everything. This brings us to our next problem: image proportion.
Here we can see that every time I loaded to do homework or check if I had a snow day, I was wasting 1 second to load some overly sized pictures. What a waste. I found that a way to resolve this could be using responsive images so that multiple versions of each image are made which allows you to specify which version you would want to use in your HTML/CSS. You could also use Image CDNS; another strategy used to combat image proportion which utilizes API functionality to help cut down on 40-80% of image size so the site runs smoother.

Dagger

To finish, I wanted to branch out to a different category, so what I ended up going with was the second-worst scored category: Best Practices. The largest problem within this category was links to cross-origin destinations are unsafe, and I'm going to explain why that was a problem. In Highschool, homework, and links were non-negotiable. Whatever online site my teacher trusted, I was forced to click. Though this never affected me personally, seeing something as potentially risky as a rouge virus link makes me a bit uneasy. Especially because it could have been avoided. From what I read, the best way to combat this is to add noopener and noreferrer typing to the rel attribute within the link tags. This will prevent a new page from being able to access the window opener property and ensures it runs in a separate process.