How i improve my portafolio SEO

SEO is almost always a headache for developers. It’s that aspect of web development that no programmer likes to dive into. There’s no absolute solution to fix all SEO issues, but if you know them from the start, even before beginning to develop a page, building it will be easier. And yes, the cover of this post shows the real metrics of my portfolio.

Tools to measure SEO

Not long ago, Google released its "official" tool to measure the SEO of our websites: Page Speed Insights. Although it’s not under a Google domain, rest assured that they are involved in its maintenance and creation.

If your site isn’t public and therefore Page Speed Insights can’t access it, I recommend using Lighthouse, which can be run from the developer tools offered by Google Chrome. Just keep in mind that if you use it in your local environment, it might give worse scores due to load times and the development tools you have installed.

Performance

This could be said to be the most important SEO metric. It basically tells us how fast your page is. We can identify the object that takes the longest to load (LCP) and, in general, which other objects take time and how to optimize them. Here are some tips I applied to my portfolio that you should also consider:

Next-Gen images

Use image formats like webp and/or avif, as they usually weigh less and offer the same quality as png or jpeg.

Optimize your JS

When using JS frameworks, it’s hard to know how to optimize our code. But as a first step, don’t add code you won’t use. Avoid too many import or require statements—only import what’s necessary. Reuse functions and look for optimization sections in the documentation of the framework you’re using.

For example, for this portfolio, I’m using PrimeVue, and the best feature of the library, the Styled Mode, is also the heaviest in terms of load due to the large JS object containing the styles of all the library’s components. And what was the solution? Simply keeping only what I need:

// Here I list the components my portfolio uses  
const usedComponents = [  
    'button',  
    'floatlabel',  
    'drawer',  
    'textarea',  
    'tag',  
    'timeline',  
    'image',  
]  

// Here I reassign the components to only use the ones declared above  
theme.components = Object.fromEntries(  
    Object.entries(theme.components).filter(([key]) => usedComponents.includes(key))  
);  

// I get rid of unused colors  
theme.primitive = {  
    borderRadius: theme.primitive.borderRadius,  
    slate: theme.primitive.slate,  
    zinc: theme.primitive.zinc  
}  

// I export the theme without all the extra code I don’t need  
export default theme

Use appropriate image sizes

This is simple: don’t use an HD image (1920x1080) and then place it in a small frame on your website of just 192x108 pixels. Use an image editing tool to resize your images appropriately. If you’re using a framework, there might be a component that does this for you (e.g., NuxtImage). And always add the HTML properties height and width, even if you later use CSS to resize them. These properties help the browser give an initial size when rendering the page before loading your CSS.

Add asset caching

This is a tricky and risky point, especially if your site has frequent updates. Not all browsers may update to your latest features, so I recommend combining this with asset versioning. You can read the Webpack or Vite documentation to apply it to your project.

Don’t Overload HTML The more HTML tags you use, the harder it will be for the browser to render your page for the first time. Use the minimum necessary when structuring your page.

<!-- A single div could have been enough -->  
<div>  
    <div>  
        <div>  
            Your content  
        </div>  
    </div>  
</div>

Don’t overload your page with third-party assets

We know this point is more complicated. Sometimes we need external libraries, analytics, cookie management, and many other things. It’s inevitable, but definitely remember to periodically review your site’s needs and remove references to services you no longer use, such as Google Analytics, Hotjar, Google Ads, Ahrefs, and others.

Accessibility

Remember to keep your site easy to use for all audiences. Use appropriate colors, the best contrasts for readability, and HTML attributes related to accessibility.

Images with descriptions

Always add the alt attribute to all your <img> tags on your website.

Appropriate Colors Ensure a good color contrast between your background and text. The worst thing you can do is use yellow text on a white or neon green background. You can use this Coolors.co tool to check your colors.

Best practices

Remember to maintain good web development practices. Although most are quite obvious, it’s good to keep these points in mind.

Use a Content Security Policy to prevent XSS attacks

This is a deep topic in web security. However, if you’re just starting or don’t know much about it, just remember to always add this line of code to your HTML or the HTTP headers of your server responses:

<meta http-equiv="Content-Security-Policy" content="script-src 'none'">

If you want to dive deeper into this topic, the Google Developers documentation is perfect.

Robust libraries

If you feel capable of handling JS libraries like Vue, React, Angular, Astro, etc., use them. Many of them come prepared to meet the security points in this best practices section.

Source maps in JS

Always have source maps for your heaviest JS files. They help with debugging, especially when using compilers like Webpack and Vite.

Secure methods

Don’t forget to redirect all your HTTP traffic to HTTPS to ensure your site visitors always have encryption.

Avoid Third-Party Cookies

Privacy is important, and the fewer cookies from other sites you use, the better. If you still need them, remember to add cookie consent. If you’re not sure, Onetrust might help.

Taggin matters

It’s simple: always add the following tags to your website:

<!DOCTYPE html>  
<html lang="" dir="">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        ...  
    </head>  
    <body>  
        ...  
    </body>  
</html>

Font Size

Remember that most texts on your site should be at least 12px.

JS Errors

If errors start appearing in the browser console when loading your page, your code has issues, and it will be interpreted that your site isn’t working. Carefully review every script you have and ensure everything works properly. Using TypeScript is an excellent ally to deal with typing issues.

SEO

This is where most points related to your site’s indexing (specifically by Google) are concentrated.

Titles

Remember to use <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags proportionally on your page, starting with only one <h1> and growing proportionally from there.

Title Tag Always add a <title> tag to all your pages and a <description> tag.

Links Remember that if you use an <a> tag, it should always have an href attribute.

Robots.txt Always add this file to tell indexing robots how to behave with your site.

This is a small guide. There’s always more to explore, but if you apply all these points, I assure you’ll score at least 80 in each aspect of the statistics.