Back in 2020, I wrote an article about improving the SEO score for your developer portfolio. It resonated with many, sparking discussions among fellow developers on how to improve their portfolio’s visibility and technical SEO. However, the SEO landscape has evolved since then, and there are even more opportunities to enhance performance beyond just optimizing meta tags and keywords.
In this article, I'll cover some of my learnings on this topic, focusing on technical SEO improvements that not only boost your portfolio’s visibility in search engines but also enhance its overall user experience. My portfolio follows a simple structure, using only HTML, CSS, and JavaScript, but these optimizations can be applied to more complex setups as well—keeping in mind that heavily hydrated JavaScript can pose SEO challenges.
Structured Data: helping search engines understand your portfolio
How to implement Schema Markup for your portfolio
Structured data (JSON-LD) helps search engines better understand the content on your site. By implementing schema markup, you can improve the way your portfolio appears in search results with rich snippets, making it more attractive to potential employers and recruiters. I’ve seen this strategy used effectively in e-commerce websites, where product, collection, and Local Business schemas enhance visibility in search results. For developer portfolios, I am currently testing it out to see if it makes a measurable difference. If you're interested in learning more, you can explore the official documentation at Schema.org and check out their open-source repository on GitHub.
How to implement Schema Markup for your portfolio
Adding structured data can highlight your name, job title, websites (personal portfolio, LinkedIn, Github etc.), and projects. Here’s an example of how you can use Schema.org’s Person schema:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"image": "./assets/image",
"jobTitle": "Front End Engineer",
"name": "Your Name",
"url": "https://yourportfolio.com",
"sameAs": [
"https://github.com/yourusername",
"https://linkedin.com/in/yourusername"
]
}
</script>
Test your structured data using Google’s Rich Results Validator to ensure it’s properly set up.
Core Web Vitals: the metrics that matter in 2025
Google now places a greater emphasis on user experience metrics, including Core Web Vitals. Core Web Vitals are a set of key performance metrics that measure how users experience the speed, responsiveness, and stability of a webpage. Unlike Lighthouse, which provides lab data based on simulated environments, Core Web Vitals are field data, gathered from real users interacting with your site. These include:
LCP (Largest Contentful Paint): Measures how quickly the largest visible content (like an image or heading) loads.
CLS (Cumulative Layout Shift): Evaluates how much elements shift around as the page loads, affecting visual stability.
INP (Interaction to Next Paint): The newest metric that focuses on how fast the page responds to user interactions like clicks and keypresses.
How Core Web Vitals affect your portfolio
A well-optimized developer portfolio should load quickly, feel responsive, and remain visually stable to create a good impression on potential employers. Poor Core Web Vitals scores can lead to a lower ranking in Google search results, making your portfolio harder to find.
To improve your Core Web Vitals:
- Optimize images and assets to reduce LCP
- Minimize layout shifts by specifying dimensions for media and fonts, therefore improving the CLS parameter
- Reduce JavaScript execution time and defer non-essential scripts to improve responsiveness
You can use PageSpeed Insights and Chrome User Experience Report (CRUX) to track real-user performance data. Google also recently added the "Performance" tab in the Google Chrome developer tools, and you can check out your page's LCP, CLS and INP directly from your browser.
One note for low traffic websites, the field data/CRUX will probably return "not enough data", it means that there is not enough traffic to generate a reliable report - in that case I recommend to use WebPageTest to analyse the website.
Preloading & optimizing assets for speed
Here are a couple of recommendations on how to handle assets like fonts and images - optimizing these can be a quick win for performance.
Preloading Fonts to Reduce CLS (Cumulative Layout Shift)
CLS issues often stem from fonts loading too slowly, causing page elements to shift unexpectedly. You can preload fonts like this:
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Also, set font-display: swap; in your CSS to prevent invisible text while fonts load.
Lazy loading & optimized image formats
Images often account for the largest portion of page weight, so optimizing them is essential.
Modern formats like WebP and AVIF provide better compression than JPEG and PNG, reducing file size without sacrificing quality.
Implement lazy loading for images and iframes
Lazy loading defers the loading of images and iframes until they are about to be viewed. This drastically improves initial page speed:
<img src="project-thumbnail.jpg" loading="lazy" alt="Project Preview">
Internal linking & site navigation: boosting discoverability
Search engines rely on clear site structure and internal linking to understand the relationship between pages. If your portfolio has multiple sections—such as an "About" page, a "Projects" page, and a "Blog"—proper internal linking can help search engines crawl and index your content more efficiently.
Best Practices for Internal Linking:
Ensure every page is accessible within a few clicks from the homepage.
Use descriptive anchor text when linking to other pages (e.g., instead of “Click here,” use “View my latest React project”). Non-descriptive links can also lower your Lighthouse SEO score, so ensuring clarity in your anchor text benefits both usability and search rankings.
If you have more than 5 pages in your portfolio, add breadcrumb navigation to help users and search engines understand your site hierarchy.
Include an HTML sitemap or footer navigation links to reinforce discoverability.
Note: Since my portfolio is a two-page site, a sitemap may not be necessary in this case, but for multi-page portfolios, it can be highly beneficial. I will implement it if for example I decide to host my blog on my portfolio website
Conclusion & key takeaways
SEO for developer portfolios goes beyond just adding keywords and meta tags. To stand out in 2024, focus on:
- Structured data to enhance search engine visibility.
- Core Web Vitals to ensure a smooth user experience.
- Optimized assets and lazy loading to boost page speed.
- Internal linking and clear navigation to improve search engine crawling.
Thank you for reading, I hope this list can be helpful.
Here is the link to my portfolio website
Feel free to ask questions and add any other recommendation you think might be useful ⚡️
_
[Cover image Photo by Nick Morrison on Unsplash]_
Top comments (0)