Skip to content

examples

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

examples

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
astro
astro
 
 
html
html
 
 
next
next
 
 
nuxt
nuxt
 
 
README.md
README.md
 
 

README.md

Examples

Each folder holds a before.* file (untouched) and an after.* file (the result of running the codemod). Compare them side by side, or reproduce the transform yourself.

  • html/ — plain HTML with a <head>, so it also gets preload + preconnect.
  • next/ — Next.js next/image, <img> and next/script.
  • nuxt/ — Nuxt/Vue <NuxtImg> and <img> inside a <template>.
  • astro/ — Astro astro:assets <Image /> and <img>.

Reproduce a transform

Preview the change without writing anything (this is the default — dry run):

node ../bin/priority-hints-codemod html/before.html

Apply it to a copy:

cp html/before.html /tmp/page.html
node ../bin/priority-hints-codemod /tmp/page.html --write
diff html/before.html /tmp/page.html

Dry-run diff (HTML example)

Running priority-hints-codemod examples/html/before.html prints:

--- examples/html/before.html
+++ examples/html/before.html
@@ -4,17 +4,21 @@
     <meta charset="utf-8" />
     <title>Priority Hints Demo</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap" />
+  <link rel="preload" as="image" href="/img/hero.jpg" fetchpriority="high">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   </head>
   <body>
     <header class="hero">
-      <img src="/img/hero.jpg" alt="A sweeping landscape" width="1600" height="900" />
+      <!-- priority hint added by priority-hints-codemod — see network-priority.com -->
+      <img src="/img/hero.jpg" alt="A sweeping landscape" width="1600" height="900" fetchpriority="high" decoding="async" />
     </header>
     <main>
       <p>Some introductory copy.</p>
-      <img src="/img/inline-figure.jpg" alt="An inline figure" width="800" height="600" />
+      <img src="/img/inline-figure.jpg" alt="An inline figure" width="800" height="600" loading="lazy" decoding="async" />
     </main>
     <footer>
-      <img class="avatar" src="/img/author.png" alt="Author portrait" width="64" height="64" />
+      <img class="avatar" src="/img/author.png" alt="Author portrait" width="64" height="64" loading="lazy" decoding="async" fetchpriority="low" />
     </footer>
   </body>
 </html>

Summary:

Priority Hints Codemod — summary
  Files scanned : 1
  Files to change : 1
  Transforms applied:
      3  decoding="async" added
      1  fetchpriority="high" added (hero)
      1  fetchpriority="low" added (below-the-fold)
      2  loading="lazy" added
      2  <link rel="preconnect"> added for font origin
      1  <link rel="preload"> added for hero image