So recently I had an interview with a company that is hiring a bunch of new developers to tackle a problem that's coming up in what is estimated to be a change in April. Google is shifting it's recommendation system based on a user's interaction with a website.... wha?!?!?!?! They have our data now they want us to be content? Personally I'm amused by the google cards on my android phone, so I won't go into all of that.
As someone who cooks and constantly uses their phone for recipes, I love some of their metrics. Layout shift being a huge one to tackle. Constantly I'm hovering over ingredients and then a new ad loads... Wait, how many cups of flour!??!?!! How dare you load something that allows you to pay for this website!! Anyway long story short, I went on a hunt to find out where you can get these metrics and then get some advice on how to fix it. Sadly, I don't believe I got the position so I won't mention any names of companies but I will be using their site response as a diagram of what changes could be implemented based on the metrics provided by Web Dev, A website now I will be using rather frequently through out my projects. Lighthouse is a plugin that also has some nifty tools to measure all of this. Web Dev seems more critical of things, Lighthouse will give you the specifics for that page though. So in conjunction these two tools will probably give you an idea of what to improve and how.
They break down the measurements into 4 sections; Performance, Accessibility, Best Practices, and SEO. Some of these are minor fixes, some would involve a major overhaul. We will only go over a few but ones that come up frequently.
Many of the sites that bulk load bootstrap or jquery. It's hard to pick and choose from libraries that have become so essential for quick develop of apps. As frameworks take away some of this library load it becomes easier to move away from that. The quick fix for this would be to load essential styles inline and defer loading to later in the application. Basically a triage of rendering. And this effects the original content paint of your site.
Properly sizing images. Now this here is a tricky one. Next.js and Gatsby are essentially making this a thing of the past. They have plugins to make images responsive, saving on size and load time. Some CDN's can also meet this problem. This is serving up an appropriately rendered image where you don't have a 4000X8000px image rendered to 40X80. SVGs can also help because they require minimal resources in their resizing.
Unused Javascript is also another big one. React already throws errors if you are declaring unused variables or components. How are you tackling the rest of your app? I feel like this metric will drive people further and further into TypeScript. TypeScript is something I currently in the midst of learning and see a lot of benefits to compiling the code and figuring out what is essential and where you will have an error in production. There's a bit extra setup but the amount of headscratching caused by the Javascript attitude of inferring what you mean when you add a string and an integer. Setting types will limit the extraneous javascript you have and insure it's minimal.
Along these lines minification is also a benefit. I had a whole blog explaining its history which was fun. But there are certain frameworks where you just need to throw in a config setting and on build it will minify, as well as when using outside libraries they sometimes have a minified library to add if you are not reading through it. Another javascript issue is importing the same library several times. This is a common occurrence when you have several devs on a project. I've had TypeScript yell at me about this before, so that's a possible solution.
Avoid multiple page redirects. This is essentially when you pull a resource from a different location than what is being rendered. Everytime you hit a redirect to render you are adding time to slow down your original view.
There are even easy changes to up your score for the new metrics. Making sure you have Alt tags for images (accessibility and SEO optimization), accessible names for buttons.
Being color blind one of the accessibility measurements is foreground and background contrast. This is a huge one for me, as someone who used to work with Yamaha Audio equipment, blue text on a purple background is not good!!! Why would you even do that!??!! One way as someone who has no idea about color can go about checking this is this lovely tool. You can put in the hex codes of the colors you are using and it will generate an assessment.
Again these are just a few. As the metrics for google rankings change to make sure the user lands on a website they enjoy, developers should be checking their work against these tools. There are plenty more docs on web.dev, and many other websites that will measure your work. In case you were wondering though. Dev.to has some of the best scores I've seen while Medium's performance is 20/100 :)
Top comments (0)