sgrh.com

Add an Open Graph image so links to this page render as a rich card on social platforms. Use 1200x630 px, JPEG/PNG, under 1MB.

<head>
  <!-- no og:image -->
</head>

<head>
  <meta property="og:image" content="https://yoursite.com/og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

Open Lighthouse in Chrome DevTools or PageSpeed Insights — the report lists specific opportunities ranked by impact.

Largest Contentful Paint should load within 2.5s. Optimise the largest above-the-fold element: compress hero images, preload critical assets, and eliminate render-blocking resources.

<img src="hero.jpg">

<link rel="preload" as="image" href="hero.webp">
<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="...">

Every page needs exactly one <h1> tag — the primary heading. It tells both users and search engines what the page is about, and is the strongest on-page ranking signal.

<body>
  <div>Page content with no H1</div>
</body>

<body>
  <h1>Your Main Page Heading</h1>
  <!-- rest of content -->
</body>

Cumulative Layout Shift should be under 0.1. Set explicit width/height on images, reserve space for embeds and ads, and avoid late-loading fonts that re-flow text.

<img src="photo.jpg">

<img src="photo.jpg" width="800" height="600" alt="...">

Headings should descend logically: H1 → H2 → H3, no jumps. Skipping levels (H1 → H3) breaks accessibility tools and confuses crawlers.

<h1>Page Title</h1>
<h3>Section</h3>  <!-- skipped H2 -->

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

First Contentful Paint should be under 1.8s. Inline critical CSS, defer non-critical CSS/JS, and use a CDN.

Enable gzip or Brotli compression on your server. Typically cuts text payload by 70-80% — easy LCP win.

Add rel="noopener noreferrer" to target="_blank" links. Without noopener, the linked page can manipulate your window object — security + perf risk.

<a href="https://other.com" target="_blank">External</a>

<a href="https://other.com" target="_blank" rel="noopener noreferrer">External</a>

Set explicit width/height on every <img> to prevent Cumulative Layout Shift. Browser reserves the box before the image loads.

<img src="photo.jpg" alt="...">

<img src="photo.jpg" width="800" height="600" alt="...">