Open Navigation Menu

## Improving My Old Project: A Focus on User Experience I am a big fan of frontend mentor’s challenges. My favorite thing about the concept is that each person can use the challenge as a means to learn aspects of frontend development that are relevant to them. Inspired by this [video on technical SEO for developers](https://www.youtube.com/watch?v=BkDH55WDiDU), I came back to my previously completed [News homepage challenge](https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl) in order to focus on an aspect that I've overlooked when building personal projects. ![frontend mentor News Homepage challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zq88afrhizf43wm2bng.png) Check out the deployed version [on Github pages](https://catalina-hasnas.github.io/news-homepage-main/). As frontend developers, we are also responsible for ensuring that our sites are performant, accessible, and optimized for search engines. This not only enhances the user experience but also increases the visibility of our sites, ultimately leading to higher traffic and engagement. For the purpose of this article, we’re going to focus on the user experience part of SEO, with Accessibility and Performance being a part of it. Google's [PageSpeed Insights](https://pagespeed.web.dev/) provides a comprehensive report on the user experience of a page on both mobile and desktop devices, offering suggestions for improvement. These metrics are among the many factors Google considers when [ranking your website](https://developers.google.com/search/docs/appearance/page-experience). ![PageSpeed Insights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hftzsb24o5nwnqyqnc5g.png) This article serves as a beginner’s checklist, a practical guide that can be immediately implemented into your existing projects to enhance these metrics. Having said that, here are the changes I implemented to my News HomePage in order to get a perfect score of 100 on all categories of PageSpeed Insights: - [Semantic HTML](#semantic-html-a-foundation-for-accessibility-and-seo) - [Image Optimization](#optimize-images-prioritizing-contentful-paint-and-layout-stability) - [Font Optimization](#optimize-fonts-tackling-layout-shifts-and-load-times) - [Javascript improvements](#efficient-javascript-reducing-overhead-and-enhancing-performance) ## Semantic HTML: A Foundation for Accessibility and SEO Semantic HTML is the proper use of HTML to emphasize the meaning of content in web pages and web applications rather than simply defining its appearance. ![Semantic HTML meme with the bird](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m7wp2htfkl3ocokiflz.png) For more information on this, I find [Semantic HTML: What It Is and How to Use It Correctly](https://www.semrush.com/blog/semantic-html5-guide/) to be a good introduction into the subject. Or check out this article in the mdn documentation: [Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) By using a logical hierarchy of `headings` and key structural elements like `

`,`

`, and `

catalinahasnas

Improve performance, accessibility and SEO of your projects

Join Our Newsletter. No Spam, Only the good stuff.