Performance and SEO basics

A beautiful portfolio that takes ten seconds to load, or that nobody can find, defeats its purpose. In this last lesson before the project, you will learn the habits that make a site fast and easy for search engines and social networks to understand: optimizing images, loading wisely, writing good titles and descriptions, adding social previews and an icon, and validating your HTML.

Why speed matters

Visitors leave slow pages, particularly on mobile connections. A fast site is more pleasant, uses less data and less energy, and is better regarded by search engines. The good news is that a small static site starts fast: HTML and CSS are light. The usual culprits are heavy images, too many fonts and unnecessary third-party content.

A useful principle: the fastest request is the one you do not make, and the next best is a small one.

Optimizing images

For a portfolio, images are by far the biggest share of the page weight. Four rules go a long way.

1. Resize before you upload. A photo straight from a camera can be many times larger than any screen needs. If the largest size it will be displayed at is 1200 pixels wide, do not publish a 6000 pixel original.
2. Choose the right format. JPEG for photos, SVG for logos and icons, and modern formats such as WebP or AVIF, which compress better, where they suit you.
3. Compress. Use an image editor or a free compression tool and compare the result visually: a small quality reduction often saves a lot of weight without a visible difference.
4. Name files meaningfully: street-portrait-lyon.jpg helps both you and search engines.

Responsive images

A phone does not need the same file as a large monitor. The srcset and sizes attributes let the browser choose:

<img
  src="images/street-800.jpg"
  srcset="images/street-400.jpg 400w,
          images/street-800.jpg 800w,
          images/street-1600.jpg 1600w"
  sizes="(min-width: 64em) 30vw, 90vw"
  alt="A cyclist crossing a rainy street at dusk"
  width="800" height="533">

Each candidate is listed with its real width (400w), and sizes tells the browser how wide the image will be displayed, so it can pick the best file. The src remains the default for browsers that ignore srcset.

When you want to offer a different format, or a differently cropped image, use picture:

<picture>
  <source srcset="images/hero.webp" type="image/webp">
  <img src="images/hero.jpg" alt="Maya photographing a market stall" width="1200" height="800">
</picture>

The browser takes the first source it supports and otherwise falls back to the img, which is always required.

Lazy loading

There is no need to download images far down the page before the visitor scrolls there. Add loading="lazy":

<img src="images/project-3.jpg" alt="Ink drawing of a fern" width="800" height="533" loading="lazy">

Two cautions. First, do not lazy-load the images that are visible when the page opens, such as the hero image: they should load right away. Second, keep width and height set so that the browser reserves space and the layout does not jump when images arrive. The same attribute works on iframe elements.

Loading CSS and fonts wisely

• Link your stylesheet in the head, so the page is styled as it first appears.
• Use one stylesheet for a small site, to avoid extra requests.
• Limit fonts to one or two families and a few weights; use font-display: swap. System fonts cost nothing.
• Delete CSS you do not use.

Measuring

You do not have to guess. The Network panel in your developer tools shows the size and time of every request. Sort by size to see what is heaviest. Browsers also include auditing tools that produce a report on performance, accessibility and best practices, with concrete suggestions. Treat scores as guidance rather than a goal in themselves, and test on a slower connection setting to feel what a visitor on a phone may experience.

SEO: helping people find you

SEO (search engine optimization) is the practice of making your site understandable to search engines, so that it can appear for relevant searches. Nobody can promise a rank, and tricks do not replace good content. But some fundamentals are within your control, and most of them overlap with good HTML and accessibility.

The title

The title element is shown in the browser tab and often as the clickable headline in search results. Write a unique, descriptive title for each page, with the most important words first, short enough not to be cut off:

<title>Street portraits – Maya Carter, photographer in Lyon</title>

The meta description

The description is a summary of the page that search engines may show under the title. It is not a ranking trick, but a good one entices people to click.

<meta name="description" content="Portfolio of Maya Carter, photographer and illustrator in Lyon: street portraits, botanical drawings and commissions.">

Write it in natural language, make it specific and different on each page. Search engines may choose to display a different excerpt if it fits the search better.

Content and structure

• One clear h1 per page, and a logical outline of headings.
• Descriptive link text rather than “click here”.
• Useful alt text and meaningful file names for images.
• Readable URLs: /projects/street-portraits.html instead of /p?id=7.
• Real, original, helpful text. Content is what people (and search engines) come for.
• HTTPS and a site that works on mobile, which you are doing already.

Social previews: Open Graph

When someone shares your link in a message or social network, the platform builds a preview card. It reads Open Graph meta tags in your head to know what to show:

<meta property="og:title" content="Maya Carter – Photographer and illustrator">
<meta property="og:description" content="Street portraits, botanical drawings and commissions.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.org/">
<meta property="og:image" content="https://www.example.org/images/share-card.jpg">

Note that og:url and og:image need full absolute URLs, which means you will fill them in once you know your final address. Prepare a share image that is wide and clearly legible when small.

The favicon

The favicon is the small icon in browser tabs and bookmarks. A simple version needs one line in the head:

<link rel="icon" href="favicon.svg" type="image/svg+xml">

An SVG icon scales to any size. Keep the design extremely simple, such as your initials on a colored square, as it will be displayed tiny. Some platforms ask for additional PNG sizes, which you can add as needed.

A complete head

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maya Carter – Photographer and illustrator</title>
  <meta name="description" content="Portfolio of Maya Carter: street portraits, botanical drawings and commissions.">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta property="og:title" content="Maya Carter – Photographer and illustrator">
  <meta property="og:description" content="Street portraits, botanical drawings and commissions.">
  <link rel="stylesheet" href="css/style.css">
</head>

Validating your HTML

Because browsers forgive mistakes, an invalid page can look fine. The W3C offers a free online checker, the Nu HTML Checker, where you can paste your code or enter an address. It reports problems such as unclosed elements, missing alt attributes, duplicate IDs and misplaced tags. Fix errors first, then warnings. Make validation a final step before every publication. Browsers’ developer tools and your editor can help you spot a missing closing tag earlier.

Your turn

1. Resize and compress two of your images, and note the file sizes before and after.
2. Add loading="lazy" to images below the fold, but not to your hero image. Keep width and height on all of them.
3. Write a unique title and meta description for each page of your portfolio.
4. Add basic Open Graph tags and a favicon to the home page.
5. Validate each page with the W3C checker and fix all errors.

<title>Services and rates – Maya Carter</title>
<meta name="description" content="Portrait sessions, event coverage and illustration commissions, with prices and what to expect.">

<img src="images/project-2.jpg" alt="Ink drawing of a fern" width="800" height="533" loading="lazy">