
<h2>Table of Contents</h2>
<nav>
  <ul>
    <li><h3><a href="#what-is-it">What is WebP</a></h3></li>
    <li><h3><a href="#motivation">Motivation for WebP</a></h3></li>
    <li><h3><a href="#when-not-to-use-webp">When Not To Use WebP</a></h3></li>
    <li><h3><a href="#tools">Conversion Tools</a></h3></li>
    <li><h3><a href="#convert-to-webp">Convert Image File Format Using sharp Package API</a></h3></li>
    <li><h3><a href="#scale-image-file">Scale Image Files Width \ Height Using sharp Package API</a></h3></li>
    <li><h3><a href="#next-js-and-webp">Next js and WebP</a></h3></li>
    <li><h3><a href="#repository">Repository</a></h3></li>
    <li><h3><a href="#references">References</a></h3></li>
  </ul>
</nav>

<section id="what-is-it">
  <h2>What is WebP</h2>
  <p>Using WebP, webmasters and web developers can create smaller, richer images that make the web faster</p>
  <p>WPage speed insight recommendation considers WebP to be an advanced format.</p>
  <p>WebP was developed by Google and announced in September 2010</p>
  <p>The browser support for WebP is <a href='https://caniuse.com/webp'>very good</a></p>
  
</section>

<section id="motivation">
  <h2>Motivation for WebP</h2>
  In short, WebP makes the image file smaller and improves the performance

  <ul>
    <li>WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index</li>
    <li>Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG, supporting higher color depths, animated frames, transparency, etc. AVIF offers slightly better compression but could be better supported in browsers and supports progressive rendering. Support: Chrome, Edge, Firefox, Opera, Safari</li>
    <li>According to <a href='https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types'>mdn</a> WebP is the best among all image formats</li>
  </ul>

</section>

<section id="when-not-to-use-webp">
  <h2>When Not To Use WebP</h2>
  <h3>Lossless Compression for Photographs</h3>
  Although WebP supports lossless compression, the benefits might be less significant for photographs compared to lossy formats like JPEG. Lossless formats like PNG might be preferred when maintaining the highest quality is crucial.

  <h3>File Size Considerations</h3>
   In some cases, especially for tiny images or thumbnails, the overhead of the WebP format might not be justified compared to simpler formats like JPEG or PNG. Always consider the trade-off between file size and quality.
</section>

<section id="tools">
  <h2>Conversion Tools</h2>
  <ul>
  <li><a href='https://developers.google.com/speed/webp/docs/cwebp'>cwebp</a></li>
  <li><a href='https://sharp.pixelplumbing.com/'>sharp</a>
  <p> Note that sharp is a package also used by next.js Image component and has 4.3M weekly downloads as of Jan 2024</p>
  <p>A typical use case for this high-speed Node-API module is to convert large images in standard formats to smaller, web-friendly JPEG, PNG, WebP, GIF, and AVIF images of varying dimensions. But you can do much more; here are the complete API categories.
  <ul>
    <li>Input metadata</li>
    <li>Output options</li>
    <li>Resizing images</li>
    <li>Compositing images</li>
    <li>Image operations</li>
    <li>Color manipulation</li>
    <li>Channel manipulation</li>
  </ul>
  </p>
  <p>You can see below code samples for 'Output options' to convert image file to WebP format and 'Resizing images' to scale WebP file size</p>
  </li>
  <li><a href='https://chromewebstore.google.com/detail/webp-avif-image-converter/pbcfbdlbkdfobidmdoondbgdfpjolhci'>WebP / Avif image converter</a></li>

  </ul>
</section>

<section id="convert-to-webp">
  <h2>Convert Image File Format Using sharp Package API</h2>

The following code is an example from <a href='https://github.com/NathanKr/image-processing-with-sharp-playground/blob/main/src/utils/server/sharp-helper-utils.ts'>sharp-helper-utils.ts</a>

<pre>
<code class='language-typescript'>
  async function convertToWebP(
  inputImagePath: string,
  outputImagePath: string): Promise 
  {
    return sharp(inputImagePath).webp().toFile(outputImagePath);
  }
</code>
</pre>

</section>

<section id="scale-image-file">
  <h2>Scale Image Files Width \ Height Using Sharp Package API</h2>
  The following code is an example from <a href='https://github.com/NathanKr/image-processing-with-sharp-playground/blob/main/src/utils/server/sharp-helper-utils.ts'>sharp-helper-utils.ts</a>

<pre>
<code class='language-typescript'>
  async function scaleOne(
    newWidthPx: number,
    sourceImageFullPath: string,
    targetImageFullPath: string
  ): Promise<OutputInfo> {
    // Resize the image using sharp and await for the operation to finish
    return sharp(sourceImageFullPath)
      .resize({ width: Math.round(newWidthPx) })
      .toFile(targetImageFullPath);
  }
</code>
</pre>

</section>

<section id="next-js-and-webp">
  <h2>Next js and WebP</h2>
   WebP is used by default on the fly by next.js Image component
</section>

<section id="repository">
  <h2>Repository</h2>
  <a href='https://github.com/NathanKr/image-processing-with-sharp-playground'>image-processing-with-sharp-playground (tag 0.4)</a>
  <div style='max-width:768px;position:relative;aspect-ratio:709 / 518'>
    <img loading="lazy" 
      src='/images/posts/webp/repo.webp' 
      srcset='/images/posts/webp/repo.webp 709w,
              /images/scaled/posts/webp/repo-532w.webp 532w,
              /images/scaled/posts/webp/repo-355w.webp 355w'
      alt='project UI' title='project UI'/>
  </div>
</section>

<section id="references">
  <h2>References</h2>
  <ul>
    <li><a href='https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types'>'Image file type and format guide' , mdn</a></li>
    <li><a href='https://developers.google.com/speed/webp'>'An image format for the Web
' , Google</a></li>
    <li><a href='https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/'>'Using Modern Image Formats: AVIF And WebP' , Addy Osmani , sep 2021 </a></li>
  </ul>
</section>


Load Image Faster

Why Should You Use The Advanced WebP Image File Format

Responsive Image With srcset

srcset img Attribute and Responsive Images


<h2> Table of Contents</h2>
<nav>
<ul>

<li><h3><a href="#the-relation-between-css-file-size-and-web-performance">The Relation Between CSS File Size and Web Performance</a></h3></li>
    <li><h3><a href="#how-to-reduce-css-file">How to Reduce the CSS File Size</a></h3></li>
    <li><h3><a href="#css-files-vs-css-in-js-performance-wise">CSS Files vs CSS in JS -  performance-wise</a></h3></li>
    <li><h3><a href="#lets-improve-performance-for-this-use-case">Improve Performance for a Specific Use Case</a></h3></li>
    <li><h3><a href="#reduced-css-file-size">Size of Reduced CSS File</a></h3></li>
    <li><h3><a href="#how-to-measure-web-performance">How to Measure Web Performance</a></h3></li>
    <li><h3><a href="#how-to-analyze-web-performance">How to Analyze Web Performance</a></h3></li>
    <li><h3><a href="#use-npm-scripts-pre-post">Use npm Scripts pre/post</a></h3></li>
    <li><h3><a href="#repository">Repository</a></h3></li>
    <li><h3><a href="#production-website">Production website</a></h3></li>
    <li><h3><a href="#references">References</a></h3></li>
    </ul>
</nav>

<section id='the-relation-between-css-file-size-and-web-performance'>

<h2>The Relation Between CSS File Size and Web Performance</h2>
There are two main factors :

<h3>Download Time</h3>
Given a throughput rate, the smaller the CSS file, the quicker the browser can download it from the server.

<h3>Page Load Speed</h3>
Low-priority scripts, for example, might take time to download, but the browser does not require them to render the page. However, the user can see the page only after the browser renders it. Rendering relies on CSS files, and this issue, referred to as <a href='https://developer.mozilla.org/en-US/docs/Glossary/Render_blocking'>render-blocking</a>, also applies to JavaScript files
</section>

<section id='how-to-reduce-css-file'>
<h2 >How to Reduce the CSS File Size</h2>
<ul>
<li><a href='https://purgecss.com'>purgeCSS</a></li>
<li>assets compression (gzip)
<p>
  Done by default by next.js for assets served to the browser. check <a href='https://nextjs.org/docs/app/api-reference/next-config-js/compress'>gzip in next.js</a></p>
  <p>The browser also supports gzip check <a href='https://developer.mozilla.org/en-US/docs/Glossary/GZip_compression'>developer.mozilla.org</a>
  </p>
</li>
</ul>
</section>

<section id='css-files-vs-css-in-js-performance-wise'>
<h2>CSS Files vs CSS in JS - performance-wise</h2>
<p>Browsers are optimized to use CSS files, so CSS files look better for performance</p> 
<p>CSS in JS has js code, which also contributes to the performance penalty</p>
<p>To solve the global scope issue, you might use CSS modules</p>
</section>

<section id='lets-improve-performance-for-this-use-case'>
<h2>Improve Performance for a Specific Use Case</h2>
The use case is using a navbar with a react-bootstrap package. We have a few options :
<ol>
<li>Improve as is --> problematic purgeCSS-wise because react-bootstrap uses bootstrap classes as variables, making it complicated. You can use safelisting as done <a href='https://blog.openreplay.com/removing-unused-css-with-purgecss'>blog post removing-unused-css-with-purgecss</a>, but this needs to be more robust.</li>
<li>Use only bootstrap without react-bootstrap --> Pros: purgeCSS can identify better + less code without the package. Cons: require code change from react-bootstrap to bootstrap</li>
<li>Use CSS in js, e.g., MUI ---> Con: this is less preferred, performance-wise</li>
</ol>

Of the three options, I choose to go with the second option - bootstrap. I am also using CSS modules that handle the CSS global scope

</section>

<section id='reduced-css-file-size'>
  <h2>Size of Reduced CSS File</h2>
  <p>bootstrap.min.css is 228KB while bootstrap-with-purgecss.css (check bootstrap/dist/css/bootstrap-with-purgecss.css after build) is 18KB thus X12 smaller !!!</p>

  <p>Following the build phase, you see css/4ca23750ecaca193.css 4.27 kB, which is the total CSS file, and this is the result of next.js gzip</p>

  <div style='max-width:768px;position:relative;aspect-ratio:779 / 417'>
  <img loading="lazy" 
  src='/images/posts/reduce-css-file/css-file-after-purge-and-gzip.webp' 
  srcset='/images/posts/reduce-css-file/css-file-after-purge-and-gzip.webp 779w,
          /images/scaled/posts/reduce-css-file/css-file-after-purge-and-gzip-584w.webp 584w ,
          /images/scaled/posts/reduce-css-file/css-file-after-purge-and-gzip-390w.webp 390w'
  alt='css file after purge and gzip'>
  </div>
</section>

<section id='how-to-measure-web-performance'>
<h2>How to Measure Web Performance</h2>
<a href='https://pagespeed.web.dev/'>Page Speed Insight</a>

Final performance score - 100. You can not get better

<div style='max-width:768px;position:relative;aspect-ratio:1190 / 468'>
  <img loading="lazy" 
  src='/images/posts/reduce-css-file/performance-score.webp' 
  srcset='/images/posts/reduce-css-file/performance-score.webp 1190w,
          /images/scaled/posts/reduce-css-file/performance-score-832w.webp 832w ,
          /images/scaled/posts/reduce-css-file/performance-score-555w.webp 555w ,
          /images/scaled/posts/reduce-css-file/performance-score-277w.webp 277w'
  alt='performance score'>
</div>

</section>

<section id='how-to-analyze-web-performance'>
<h2>How to Analyze Web Performance</h2>
<a href='https://www.webpagetest.org/'>Web Page Test</a>

<p>Render (in green) does not start (render-blocking) until the CSS is downloaded and processed by the browser.

<div style='max-width:768px;position:relative;aspect-ratio:1110 / 533'>
  <img loading="lazy" 
  src='/images/posts/reduce-css-file/css-render-blocking.webp' 
  srcset='/images/posts/reduce-css-file/css-render-blocking.webp 1110w,
          /images/scaled/posts/reduce-css-file/css-render-blocking-833w.webp 833w ,
          /images/scaled/posts/reduce-css-file/css-render-blocking-555w.webp 555w ,
          /images/scaled/posts/reduce-css-file/css-render-blocking-278w.webp 278w'
  alt='css render blocking'>
</div>

</p>
</section>

<section id='use-npm-scripts-pre-post'>
<h2>Use npm Scripts pre \ post</h2>
<p>Npm scripts pre \ post are part of <a href='https://github.com/NathanKr/purge-css-next.js-playground/blob/main/package.json'>package.json</a>. The prebuild script will automatically execute before the build script</p>
<p>use "postbuild" script if you want to invoke a script automatically after the build script</p>

<pre>
<code class='language-json'>
"prebuild": "node scripts/remove-.next.js &amp;&amp; npm run build-css-with-purgecss-cli",
"build": "next build",
</code>
</pre>

In general, if you want to invoke a script before a script name script1, you name it "prescript1", and the same goes for the post via "postscript1"

<p>npm per \ post scripts work out of the box with npm</p>
<p>using pnpm, you need to add a .npmrc file on the project root(check <a href='https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm'>how-to-fix-post-pre-build-pnpm</a>)

<pre>
<code class='language-shell'>
enable-pre-post-scripts=true
</code>
</pre>

</p>
</section>

<section id='repository'>
<h2>Repository</h2>
This is a POC project for using bootstrap , purgeCSS , gzip and pre script

<a href='https://github.com/NathanKr/purge-css-next.js-playground'>purge-css-next.js-playground (tag 0.41)</a>

</section>

<section id='production-website'>
<h2>Production website</h2>
<p>At <a href='https://nathankrasney.com/'>www.nathankrasney.com</a> , I am using pre-script, purgeCSS, and bootstrap. I am using next.js, so gzip is done in build time on the CSS files out of the box by next.js</p>   
 <p>Feel free to check the performance of my website pages using <a href='https://pagespeed.web.dev/'>Page Speed Insight</a>. Note that there are fluctuations between sampling, so you can check a few times or use another way, as described in my blog post <a href='https://nathankrasney.com/posts/page-speed-insight-score-automation'>How to Automate Page Speed Insight Score></a></p>
</section>

<section id='references'>
<h2>References</h2>
<ul>
<li><a href='https://blog.openreplay.com/removing-unused-css-with-purgecss/'>'Removing unused CSS with PurgeCSS', Antonello Zanini  Jun 24, 2023</a></li>
<li><a href='https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts'>npm docs - Pre & Post Scripts</a></li>
<li><a href='https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm'>'How to fix "postbuild" and "prebuild" not working with pnpm?', David Dias, Jul 30, 2022</a></li>
<li><a href='https://blog.logrocket.com/css-vs-css-in-js/'>'CSS vs. CSS-in-JS: How and why to use each',  Rahul Chhodde, Nov 17, 2022</a></li>
<li><a href='https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b'>"Why We're Breaking Up with CSS-in-JS", Sam Magura,  Oct 16, 2022</a></li>
</ul>
</section>


Reduce CSS File

How to Reduce CSS File Size for Better Web Performance


<h2> Table of Contents</h2>
<nav>
    <ul>
      <li><h3><a href="#what-is-postcss">What is PostCSS</h3></a></li>
      <li><h3><a href="#motivation-for-postcss">Motivation for PostCSS</h3></a></li>
      <li><h3><a href="#How-to-invoke-postcss">How to Invoke PostCSS</h3></a></li>
      <li><h3><a href="#next.js-and-vite-with-postcss">Next.js and Vite Support for PostCSS</h3></a></li>
      <li><h3><a href="#popular-plugins-built-over-postcss">Popular Plugins Built Over PostCSS</h3></a></li>
      <li><h3><a href="#repositories">Repositories</h3></a></li>
      <li><h3><a href="#references">References</h3></a></li>
    </ul>
  </nav>

<section id="what-is-postcss">
  <h2>What is PostCSS</h2>
  <ul>
  <li>A tool for transforming CSS with JavaScript</li>
  <li>very popular- more than 77m weekly downloads (Jan 2023)</li>
  <li>The postcss workflow can be described as follows
  
  <div style='max-width:768px;position:relative;aspect-ratio:512 / 730'>
    <img loading="lazy" 
    src = "/images/posts/postcss/PostCSS_scheme.webp" alt="postcss workflow"/>
  </div>

  </li>

  </ul>
  </p>
</section>

 <section id="motivation-for-postcss">
  <h2>Motivation for PostCSS</h2>
  PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more
</section>

<section id="How-to-invoke-postcss">
  <h2>How to invoke PostCSS</h2>
  <ul>
  <li>Install postcss and postcss plugins (both using -D)</li>
  <li>create configuration file - postcss.config.js with postcss plugins</li>
  <li>run postcss from the command line as part of your build process</li>
  </ul>
    check <a href="#repositories">Repositories</a>
</section>

<section id="next.js-and-vite-with-postcss">
  <h2>Next.js and vite support for PostCSS</h2>
  
  <p>
  Next.js compiles CSS for its built-in CSS support using PostCSS. Check <a href='https://nextjs.org/docs/pages/building-your-application/configuring/post-css'>next.js documentation</a>
  <p>It is applied automatically to all imported CSS if the vite project contains valid PostCSS config (any format supported by postcss-load-config, e.g., postcss.config.js). Check <a href='https://vitejs.dev/guide/features#postcss'>vite documentation</a></p>
  </p>
</section>

<section id="popular-plugins-built-over-postcss">
  <h2>Popular plugins built over postcss</h2>
  <ul>
  <li><a href='https://www.npmjs.com/package/autoprefixer'>Autoprefixer</a> : PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.</li>
  <li><a href='https://github.com/cssnano/cssnano'>cssnano</a> : cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately</li>
  <li><a href='https://stylelint.io/'>stylint</a> : A mighty CSS linter that helps you avoid errors and enforce conventions.</li>
  <li><a href='https://purgecss.com/'>purgeCss</a> : PurgeCSS is a tool to remove unused CSS from your project</li>
  <li><a href='https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#readme'>PostCSS Preset Env</a> : lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments</li>
  </ul>
</section>

<section id="repositories">
  <h2>Repositories</h2>
  The following are repositories with sample code

  <h3><a href='https://github.com/NathanKr/post-css-playground'>post-css-playground</a></h3>
  post-css-playground is a Vanila js repo with postcss
  
  <h4>Motivation</h4>
  Experiment with postcss using the plugins nanocss and postcss-preset-env via postcss.config.js. postcss-cli invokes postcss via the package.json scripts

  <h4>Points of interest</h4>
  <ul>
    <li>Use packages postcss and postcss-cli to invoke the postcss plugin nanocss. </li>
    <li>Install packages postcss , postcss-cli and nanocss as dev dependencies because postcss is done on development </li>
    <li>Compare the size of styles.css before nanocss minimizing - 163B with the CSS file in dist after nanocss processing - 39B. These files are the same concerning the view</li>
    <li>Use postcss-preset-env here to convert CSS nesting to CSS format known to most browsers (e.g. CSS nesting is supported in chrom 120; check <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector'>mdn documentation</a>)</li>
  </ul>

  <h3><a href='https://github.com/NathanKr/post-css-vite-playground'>post-css-vite-playground</a></h3>

  <h4>Motivation</h4>
  <p>In <a href='https://github.com/NathanKr/post-css-playground'>post-css-playground</a>, you must install the packages postcss and postcss-cli and call postcss in the package.json script. You do this to invoke the plugins in postcss.config.js</p>
  <p>But in vite project, part of this is done out of the box, i.e., you do not need to install the packages postcss and postcss-cli, and you do not need to call postcss in package.json</p>

<h4>Points of interest</h4>
  <ul>
  <li> There is no need to use nanocss explicitly because vite minimizes the CSS out of the box. simply do 'npm run build' and look inside the dist/assets directory</li>
  <li> No need to use postcss-preset-env explicitly to translate nesting to a format known to the old browser. do 'npm run build' and look inside the dist/assets directory</li>
</ul>

  </ul>
  
  
</section>

<section id="references">
  <h2>References</h2>
  <ul>
  <li><a href='https://postcss.org/'>Official docs</a></li>
  <li><a href='https://www.npmjs.com/package/postcss'>npm</a></li>
  <li><a href='https://www.youtube.com/watch?v=WhCXiEwdU1A'>PostCSS in 100 Seconds</a></li>
  <li><a href='https://www.youtube.com/watch?v=Kn2SKUOaoT4'>Learn PostCSS In 15 Minutes</a></li>
  </ul>
</section>


Explore PostCSS

How to Use PostCSS With Stylesheets : A Quick Guide


<h2> Table of Contents</h2>
<nav>
<ol>
  <li><h3><a href="#what-is-turbopack">What is Turbopack</a></h3></li>
  <li><h3><a href="#motivation-for-turbopack">Motivation for Turbopack</a></h3></li>
  <li><h3><a href="#how-to-use-turbopack">How to Use Turbopack</a></h3></li>
  <li><h3><a href="#turbopack-status-for-next.js-14">Turbopack Status for next.js 14</a></h3></li>
  <li><h3><a href="#reopsitory">Repository</a></h3></li>
  <li><h3><a href="#references">References</a></h3></li>
  </ol>
</nav>

<section id="what-is-turbopack">
<h2>What is Turbopack</h2>
<p>Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of webpack and Next.js</p>
</section>

<section id="motivation-for-turbopack">
<h2>Motivation for Turbopack</h2>
<p>The motivation behind TurboPack is to address the limitations of Webpack in handling large applications and incremental builds. TurboPack introduces a new architecture to optimize cache validation and improve build efficiency</p>
</section>

<section id="how-to-use-turbopack">
<h2>How to Use Turbopack</h2>
<p>You simply add --turbo to your dev script in package.json as follows

before turopack

<pre>
<code class='language-shell'>
"dev" : "next dev"
</code>
</pre>

with turbopack

<pre>
<code class='language-shell'>
"dev" : "next dev --turbo"
</code>
</pre>

</p>
</section>

<section id="turbopack-status-for-next.js-14">
<h2>Turbopack Status for next.js 14</h2>
<ul>
  <li>5,000 tests passing for App & Pages Router</li>
  <li>53% faster local server startup</li>
  <li>94% faster code updates with Fast Refresh</li>
</ul>
<p>This benchmark is a practical result of performance improvements you should expect with a large application (and large module graph). With 90% of tests for next dev now passing, you should see faster and more reliable performance consistently when using next dev --turbo.

Once we hit 100% of tests passing, we'll move Turbopack to stable in an upcoming minor release. We'll also continue to support using webpack for custom configurations and ecosystem plugins</p>

</section>

<section id="reopsitory">
<h2>Repository</h2>
<a href='https://github.com/NathanKr/turbopack-next.js-playground'>turbopack-next.js-playground</a>

<h3>Installation</h3>

<pre>
<code class='language-shell'>
npm i
</code>
</pre>

<h3>Usage</h3>

run with turbopack

<pre>
<code class='language-shell'>
npm run dev
</code>
</pre>

run without turbo

<pre>
<code class='language-shell'>
npm run dev-no-turbo
</code>
</pre>

<h3>Performance</h3>
<p>After a few runs, it is stabilizing to these values. In this sample for turbopack the dev server is ready after 780s. Without turbopack, the dev server is ready after 2.7 seconds. Thus, x3 better with turbopack for this repository</p>

with turbo

<div style='max-width:768px;position:relative;aspect-ratio:1189 / 530'>
  <img loading="lazy" 
  src='/images/posts/next.js-turbopack/with-turbo.webp' 
  srcset= '/images/posts/next.js-turbopack/with-turbo.webp 1189w ,
          /images/scaled/posts/next.js-turbopack/with-turbo-892w.webp 892w ,
          /images/scaled/posts/next.js-turbopack/with-turbo-595w.webp 595w ,
          /images/scaled/posts/next.js-turbopack/with-turbo-297w.webp 297w 
          '
  alt='performance with turbopack'>
</div>

without turbo

<div style='max-width:768px;position:relative;aspect-ratio:1192 / 531'>
  <img loading="lazy" 
  src='/images/posts/next.js-turbopack/without-turbo.webp' 
  srcset= '/images/posts/next.js-turbopack/without-turbo.webp 1192w ,
          /images/scaled/posts/next.js-turbopack/without-turbo-894w.webp 894w ,
          /images/scaled/posts/next.js-turbopack/without-turbo-596w.webp 596w ,
          /images/scaled/posts/next.js-turbopack/without-turbo-298w.webp 298w 
          '
  alt='performance without turbopack'>

</div>

</section>

<section id="references">
<h2>References</h2>
<ul>
<li><a href='https://turbo.build/pack'>Official docs</a> </li>
<li><a href='https://nextjs.org/blog/next-14#nextjs-compiler-turbocharged'>Status in next.js 14</a></li>
</ul>

</section>


Get Better DX

How to Easily Get Faster next.js Development Server with Turbopack


<h2> Table of Contents</h2>
<nav>
  <ul>
    <li><h3><a href="#motivation">Motivation</a></h3></li>
    <li><h3><a href="#design">Design</a></h3></li>
    <li><h3><a href="#ui">UI</a></h3></li>
    <li><h3><a href="#fake-api">Fake Time API</a></h3></li>
    <li><h3><a href="#test_rest_api.rest">Invoke the API using REST Client Plugin</a></h3></li>
    <li><h3><a href="#installation">Installation</a></h3></li>
    <li><h3><a href="#usage">Usage</a></h3></li>
    <li><h3><a href="#e2e-test">E2E test using puputeer</a></h3></li>
    <li><h3><a href="#solution-scope">Solution Scope</a></h3></li>
    <li><h3><a href="#repository">Repository</a></h3></li>
    <li><h3><a href="#references">References</a></h3></li>
  </ul>
</nav>

<section id="motivation">
<h2>Motivation</h2>
<p>You want to test e2e a javascript \ typescript based server that performs time based tasks</p> 
<p>In my use case, I am developing a coupon system for my <a href='https://nathankrasney.com'>online courses web site</a> and I want to create a sale day every Wednesday</p>
<p>So the question is how to set the time on the server once for Wednesady and once for non Wednesday and perform tests</p>
</section>
<section id="design">
<h2>Design</h2>
The design must answer a few questions
<ol>
<li>How to fake time on the server --> use <a href='https://github.com/sinonjs/sinon'>sinon.js - fake time package</a></li>
<li>How to tell the server to change time and how to pass the desired time --> use REST API using POST and body <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/src/pages/api/e2e-fake-server-time.ts'>e2e fake time API : e2e-fake-server-time.ts</a></li>
<li>How to make sure that the fake time will not be invoked on production and will be invoked only for localhost --> add protection in <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/src/pages/api/e2e-fake-server-time.ts'>code</a> and <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/test/fake-timer.test.ts'>test</a></li>
<li>Which test runner invokes the <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/test/e2e.test.ts'>e2e test</a> and <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/test/fake-timer.test.ts'>unit test</a> --> <a href='https://vitest.dev/'>vitest</a></li>
<li>Which tool to use for e2e test --> <a href='https://pptr.dev/'>puppeteer</a></li>
</ol>
</section>
<section id="ui">
<h2>UI</h2>

<h3>regular</h3>
This is the true time
<div style='max-width:768px;position:relative;aspect-ratio:592 / 183'>
  <img loading="lazy" 
  src='/images/posts/next-js-fake-timer/ui-reg.webp' 
  srcset='/images/posts/next-js-fake-timer/ui-reg.webp 592w,
          /images/scaled/posts/next-js-fake-timer/ui-reg-444w.webp 444w'
  alt='ui for the current true time'/>
</div>

<h3>fake time to Wednesday</h3>
Notice isSaleDay is true because it is Wednesday  (1702458733000 ms from 1970)

<div style='max-width:768px;position:relative;aspect-ratio:591 / 158'>
  <img loading="lazy" 
  src='/images/posts/next-js-fake-timer/ui-test1.webp' 
  srcset='/images/posts/next-js-fake-timer/ui-test1.webp 591w,
          /images/scaled/posts/next-js-fake-timer/ui-test1-443w.webp 443'
  alt='ui for a faked time - Wedenesday'/>
</div>

<h3>fake time to Thursday</h3>
Notice isSaleDay is false because it is not Wednesday  (1702549920000 ms from 1970)
<div style='max-width:768px;position:relative;aspect-ratio:610 / 175'>
  <img loading="lazy" 
  src='/images/posts/next-js-fake-timer/ui-test2.webp' 
  srcset='/images/posts/next-js-fake-timer/ui-test2.webp 610w ,
          /images/scaled/posts/next-js-fake-timer/ui-test2-458w.webp 458w'
  alt='ui for a faked time - non Wedenesday'/>
</div>

</section>

<section id="fake-api">
<h2>Fake API</h2>

<h3>Source code</h3>

<a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/src/pages/api/e2e-fake-server-time.ts'>Source code</a>

<pre>
<code class='language-typescript'>
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import IServerFakeTime from "@/types/i-server-fake-time";
import { isProduction } from "@/utils/utils";
import type { NextApiRequest, NextApiResponse } from "next";
/* 
 Use this import; otherwise, I get an error from react, thinking useFakeTimers is a custom hook.
*/
import sinon from "sinon";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method == "POST") {
    const { serverFakeTimeMs } = req.body as IServerFakeTime;

    // -- We do not want this on production so protect production from mistakes ........
    const isLocalhost = req.headers.host?.includes("localhost");

    if (!isProduction() && isLocalhost) {
      sinon.restore(); // this is required; otherwise, you get an error on setting twice
      sinon.useFakeTimers({
        toFake: ["Date"],
        now: new Date(serverFakeTimeMs),
      });
    }

    res.status(200).json({ date: new Date() });
  } else {
    // Handle other HTTP methods if needed
    res.status(405).json({ error: "Method Not Allowed" });
  }
}
</code>
</pre>

<h3>How to protect yourself</h3>
In general, you do not want to invoke /api/e2e-fake-server-time, so how to protect yourself?

<ul>
<li>The fake timer package - sinon is installed as a dev dependency and thus can not appear in production
</li>
<li>Add code that does not allow the API to run on production, and using a host other than localhost</li>
<li>Create a separate project for the e2e test and add e2e-fake-server-time.ts only there
</li>
<li>Any developer should know what he is doing; if you need this for e2e, simply don't use it in production</li>
</ul>

</section>

<section id="test_rest_api.rest">
<h2>Invoke the API using <a href='https://marketplace.visualstudio.com/items?itemName=humao.rest-client'>rest client plugin</a></h2>
<a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/test_rest_api.rest'>test_rest_api.rest</a>

<h3>Call the fake time API with 13/Dec/23 - Wednesay</h3>
<div style='max-width:768px;position:relative;aspect-ratio:1242 / 520'>
  <img loading="lazy" 
  src='/images/posts/next-js-fake-timer/test1.webp' 
  srcset='/images/posts/next-js-fake-timer/test1.webp 1242w, 
          /images/scaled/posts/next-js-fake-timer/test1-932w.webp 932w ,
          /images/scaled/posts/next-js-fake-timer/test1-621w.webp 621w ,
          /images/scaled/posts/next-js-fake-timer/test1-443w.webp 443w '
  alt='Call the fake time API with 13/Dec/23 - Wednesay'>
</div>

<h3>Call the fake time API with 14/Dec/23 - Thursday</h3>
<div style='max-width:768px;position:relative;aspect-ratio:1280 / 720'>
  <img loading="lazy" 
  src='/images/posts/next-js-fake-timer/test2.webp' 
  srcset='/images/posts/next-js-fake-timer/test2.webp 1280w, 
          /images/scaled/posts/next-js-fake-timer/test2-960w.webp 960w ,
          /images/scaled/posts/next-js-fake-timer/test2-640w.webp 640w ,
          /images/scaled/posts/next-js-fake-timer/test2-320w.webp 320w'
  alt='Call the fake time API with 14/Dec/23 - Thursday'>

</div>

</section>

<section id="installation">
<h2>Installation</h2>

<pre>
<code class='language-shell'>
pnpm i
</code>
</pre>

</section>
<section id="usage">
<h2>Usage</h2>
<p>Run the app using</p>

<pre>
<code class='language-shell'>
npm run dev
</code>
</pre>

Run the tests

<pre>
<code class='language-shell'>
npm test
</code>
</pre>

</section>

<section id="e2e-test">
<h2>E2E test using puputeer</h2>

The following is one test ,all the other tests are in <a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e/blob/main/test/e2e.test.ts'>E2e tests : test/e2e.test.ts</a>

<pre>
<code class='language-typescript'>
let browser: Browser;

beforeEach(async () => {
  browser = await puppeteer.launch({ headless: "new" });
});

afterEach(async () => {
  await browser.close();
});

test("sale day is true for wednedsay", async () => {
  const page = await browser.newPage();
  // --- force sale day wedenesday 1702458733000 --> 13/12/23
  const body: IServerFakeTime = {
    serverFakeTimeMs: 1702458733000,
  };
  const baseUrl = "http://localhost:3000";
  const url = `${baseUrl}${InternalRelativeApi.E2eFakeServerTime}`;
  await axios.post(url, { ...body });
  await page.goto(baseUrl);
  await page.click(".get-info");
  const val: string = await page.$eval(
    ".sale-day",
    (elem) => (elem as HTMLParagraphElement).innerText
  );
  expect(val).toBe("true");
});
</code>
</pre>

</section>

<section id="solution-scope">
<h2>Solution Scope</h2>
The context of this post is faking time on a next.js server for an e2e test. However, the core design here is faking time using sinon.js via REST API ,and this can be applied to
<ul>
<li>Any server based javascript \ typescript e.g. node or express</li>
<li>not only e2e, currently i don't have good use case, but it may also be used in a production server (implement at your own risk)</li>
</ul>
</section>

<section id="repository">
<h2>Repository</h2>
<a href='https://github.com/NathanKr/next.js-server-fake-time-for-e2e'>next.js-server-fake-time-for-e2e (tag 0.5)</a> - this is a POC for the design
</section>

<section id="references">
<h2>References</h2>
<ul>
<li><a href='https://www.udemy.com/course/real-world-typescript-unit-testing/?referralCode=6B35B93853BC00B58172'>Real-World TypeScript Unit Testing</a></li>
</ul>
</section>


Fake Server Time

How to Fake the Time on next.js Server for E2E Tests


<h2> Table of Contents</h2>
<nav>
  <ul>
    <li><h3><a href="#what-is-object-group-by">What is Object.groupBy</h3></a></li>
    <li><h3><a href="#when-should-you-use-object-group-by">When Should You Use Object.groupBy</h3></a></li>
    <li><h3><a href="#sample1">Sample1</h3></a></li>
    <li><h3><a href="#sample2">Sample2</h3></a></li>
    <li><h3><a href="#sample3">Sample3</h3></a></li>
    <li><h3><a href="#browser-comatability">Browser Compatibility 1-Dec-2023</h3></a></li>
    <li><h3><a href="#does-it-works-in-node">Does it Work in Node.js</h3></a></li>
    <li><h3><a href="#repository">Repository</h3></a></li>
    <li><h3><a href="#references">References</h3></a></li>
  </ul>
</nav>

<section id="what-is-object-group-by">
  <h2>What is Object.groupBy</h2>
  <p>The Object.groupBy() static method groups the elements of a given iterable, such as array \ Map, according to the string values returned by a provided callback function. The returned object has separate properties for each group, containing arrays with the elements in the group</p>
  <p>Browsers started supporing Object.groupBy by sep 2023 check <a href='#browser-comatability'>browser compatibility</a></p>
</section>

<section id="when-should-you-use-object-group-by">
  <h2>When Should You Use Object.groupBy</h2>
  <p>This method should be used when strings can represent group names. If you need to group elements using a key that is some arbitrary value, use Map.groupBy() instead</p>
</section>

<section id="sample1">
  <h2>Sample1</h2>
 
  <h3>source code</h3>
   <a href='https://github.com/NathanKr/object-group-by-javascript-playground/blob/main/client/utils.js'>source code - sample1()</a>

<pre>
<code class='language-typescript'>
export function sample1() {
  const posts = [
    {
      name: "Why Should You Use Core Web Vitals in Your WebSite",
      category: "performance",
    },
    { name: "Object.groupBy", category: "javascript" },
    {
      name: "How to Automate Page Speed Insight Score",
      category: "performance",
    },
  ];

/_
--- group by category : javascript , performance
--- groups keys are categories and value are the original object
_/
const groups = Object.groupBy(posts, ({ category }) => category);
console.log(groups);
console.log(Object.keys(groups));
console.log(Object.values(groups));
}
</code>
</pre>

  <h3>output</h3>
  <div style='max-width:768px;position:relative;aspect-ratio:724 / 347'>
    <img loading="lazy" 
    src=   '/images/posts/javascript-object-group-by/sample1.webp' 
    srcset='/images/posts/javascript-object-group-by/sample1.webp 724w,
            /images/scaled/posts/javascript-object-group-by/sample1-543w.webp 543w 
            /images/scaled/posts/javascript-object-group-by/sample1-362w.webp 362w ,
            '
    alt='Object.groupBy sample1' title='Object.groupBy sample1' />
  </div>

</section>

<section id="sample2">
  <h2>Sample2</h2>
 
  <h3>source code</h3>
   <a href='https://github.com/NathanKr/object-group-by-javascript-playground/blob/main/client/utils.js'>source code - sample2()</a>

<pre>
<code class='language-typescript'>
export function sample2() {
  const inventory = [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "goat", type: "meat", quantity: 23 },
    { name: "cherries", type: "fruit", quantity: 5 },
    { name: "fish", type: "meat", quantity: 22 },
  ];

/_
--- group by type : vegetables , fruit , meat
--- groups keys are types and value are the original object
_/
const groups = Object.groupBy(inventory, ({ type }) => type);
console.log("groups", groups);
console.log("Object.keys(groups)", Object.keys(groups));
console.log("Object.values(groups)", Object.values(groups));
}
</code>
</pre>

  <h3>output</h3>
  <div style='max-width:768px;position:relative;aspect-ratio:729 / 393'>
    <img loading="lazy" 
      src='/images/posts/javascript-object-group-by/sample2.webp' 
      srcset='/images/posts/javascript-object-group-by/sample2.webp 729w,
              /images/scaled/posts/javascript-object-group-by/sample2-547w.webp 547w ,
            /images/scaled/posts/javascript-object-group-by/sample2-365w.webp 365w'
      alt='Object.groupBy sample2' title='Object.groupBy sample2'/>
  </div>

</section>

<section id="sample3">
  <h2>Sample3</h2>
 
  <h3>source code</h3>
   <a href='https://github.com/NathanKr/object-group-by-javascript-playground/blob/main/client/utils.js'>source code - sample3()</a>

<pre>
<code class='language-typescript'>
export function sample3() {
  const inventory = [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "goat", type: "meat", quantity: 23 },
    { name: "cherries", type: "fruit", quantity: 5 },
    { name: "fish", type: "meat", quantity: 22 },
  ];

/_
--- group by inventory : big , small
--- groups keys are quantity based and value are the original object
_/
const groups = Object.groupBy(inventory, ({ quantity }) => {
return quantity > 5 ? "big" : "small";
});
console.log("groups", groups);
console.log("Object.keys(groups)", Object.keys(groups));
console.log("Object.values(groups)", Object.values(groups));
}
</code>
</pre>

<h3>output</h3>
<div style='max-width:768px;position:relative;aspect-ratio:708 / 340'>
  <img loading="lazy" 
      src='/images/posts/javascript-object-group-by/sample3.webp' 
      srcset='/images/posts/javascript-object-group-by/sample3.webp 708w ,
            /images/scaled/posts/javascript-object-group-by/sample3-531w.webp 531w , 
            /images/scaled/posts/javascript-object-group-by/sample3-354w.webp 354w '
            alt='Object.groupBy sample3' title='Object.groupBy sample3'/>

</div>

</section>

<section id="browser-comatability">
  <h2>Browser Comatability 1-Dec-2023</h2>
  <div style='max-width:768px;position:relative;aspect-ratio:675 / 324'>
    <img loading="lazy" 
    src='/images/posts/javascript-object-group-by/object-group-by-browser-compatability.webp' 
    srcset='/images/scaled/posts/javascript-object-group-by/object-group-by-browser-compatability.webp 675w ,
            /images/scaled/posts/javascript-object-group-by/object-group-by-browser-compatability-506w.webp 506w ,
            /images/scaled/posts/javascript-object-group-by/object-group-by-browser-compatability-338w.webp 338w
            '
    alt='browser compatability of Object.groupBy 1-Dec-2023' title='browser compatability of Object.groupBy 1-Dec-2023' />
  </div>

</section>

<section id="does-it-works-in-node">
  <h2>Does it Work in node.js</h2>
 <p>node.js does not support it out of the box. you can use Polyfill of Object.groupBy in core-js<p> 
   <h3>Node.js sample</h3>
    <a href='https://github.com/NathanKr/object-group-by-javascript-playground/blob/main/server/index.js'>source node.js Object.groupBy polyfill</a>

<pre>
<code class='language-typescript'>
import "core-js/features/object/group-by.js";

const posts = [
  {
    name: "Why Should You Use Core Web Vitals in Your WebSite",
    category: "performance",
  },
  { name: "Object.groupBy", category: "javascript" },
  {
    name: "How to Automate Page Speed Insight Score",
    category: "performance",
  },
];

const groups = Object.groupBy(posts, ({ category }) => category);
console.log(groups);
</code>
</pre>

</section>

<section id="repository">
  <h2>Repository</h2>
  <a href='https://github.com/NathanKr/object-group-by-javascript-playground'>object-group-by-javascript-playground (tag 0.2)</a>
</section>

<section id="references">
  <h2>References</h2>
  <ul>
  <li><a href='https://tc39.es/proposal-array-grouping/#sec-object.groupby'>Object.groupBy specification</a></li>
  <li> <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy'>Object.groupBy mdn web docs</a></li>
  </ul>
</section>


New 2023 Javascript Method

How to Use Object.groupBy in Javascript


<h2> Table of Contents</h2>
<nav>
  <ul>
    <li><h3><a href="#introduction">Introduction</a></h3></li>
    <li><h3><a href="#understanding-core-web-vitals">Understanding Core Web Vitals</a></h3></li>
    <li><h3><a href="#improving-ui-experience">Improving UI Experience through Core Web Vitals</a></h3></li>
    <li><h3><a href="#boosting-google-ranking">Boosting Google Ranking with Core Web Vitals</a></h3></li>
    <li><h3><a href="#measuring-core-web-vitals">Measuring Core Web Vitals</a></h3></li>
    <li><h3><a href="#conclusion">Conclusion</a></h3></li>
    <li><h3><a href="#references">References</a></h3></li>
  </ul>
</nav>

<section id="introduction">
  <h2>Introduction</h2>
  <p>In the dynamic landscape of the internet, user experience plays a pivotal role in determining a website's success. Core Web Vitals, a set of user-centered metrics introduced by Google, has become a key factor not only in enhancing the user experience but also in influencing search engine rankings. In this blog post, we'll delve into the significance of Core Web Vitals and explore how they can be leveraged to improve both the UI experience and Google ranking of your website.</p>
</section>

<section id="understanding-core-web-vitals">
  <h2>Understanding Core Web Vitals</h2>

  <article>
    <h3>What are Core Web Vitals?</h3>
    <p>Core Web Vitals are a set of specific factors that Google considers important in evaluating a website's performance and user experience. These vitals include:</p>
    <ol>
      <li><strong>Largest Contentful Paint (LCP):</strong> Measures the time it takes for the main content of a page to load.</li>
      <li><strong>First Input Delay (FID):</strong> Measures the time it takes for a page to become interactive.</li>
      <li><strong>Cumulative Layout Shift (CLS):</strong> Measures the visual stability of a page, focusing on unexpected layout shifts.</li>
    </ol>
  </article>

  <article>
    <h3>Why do Core Web Vitals matter?</h3>
    <p>Google has increasingly emphasized the importance of providing a positive user experience. Websites that meet or exceed the Core Web Vitals benchmarks are more likely to rank higher in search results. As a result, optimizing for these metrics not only enhances user satisfaction but also positively impacts your website's visibility.</p>
  </article>
</section>

<section id="improving-ui-experience">
  <h2>Improving UI Experience through Core Web Vitals</h2>

  <article>
    <h3>Optimizing for Largest Contentful Paint (LCP)</h3>
    <p>To enhance LCP, consider:</p>
    <ul>
      <li>Optimizing images and videos.</li>
      <li>Implementing lazy loading for non-essential resources.</li>
    </ul>
  </article>

  <article>
    <h3>Enhancing First Input Delay (FID)</h3>
    <p>To improve FID, focus on:</p>
    <ul>
      <li>Minimizing JavaScript execution time.</li>
      <li>Utilizing browser caching for faster load times.</li>
    </ul>
  </article>

  <article>
    <h3>Addressing Cumulative Layout Shift (CLS)</h3>
    <p>For better CLS, implement:</p>
    <ul>
      <li>Specifying image dimensions to prevent layout shifts.</li>
      <li>Loading and resizing images appropriately.</li>
    </ul>
  </article>
</section>

<section id="boosting-google-ranking">
  <h2>Boosting Google Ranking with Core Web Vitals</h2>

  <article>
    <h3>User Experience and SEO</h3>
    <p>Google's algorithms increasingly prioritize user experience as a ranking factor. By optimizing for Core Web Vitals, you align your website with these criteria, positively impacting its search engine ranking.</p>
  </article>

  <article>
    <h3>Mobile Friendliness</h3>
    <p>Core Web Vitals are particularly crucial for mobile devices. Given the rise in mobile searches, a mobile-friendly and fast-loading website is more likely to rank higher in Google's mobile search results.</p>
  </article>
</section>

<section id="measuring-core-web-vitals">
  <h2>Measuring Core Web Vitals</h2>

  <div>
    <h3>Google PageSpeed Insights</h3>
    <p><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">Google PageSpeed Insights</a> is a powerful tool for analyzing the performance of your web pages. It provides a comprehensive report on Core Web Vitals, highlighting areas that need improvement.</p>
  </div>

  <div>
    <h3>Chrome DevTools</h3>
    <p><a href="https://developer.chrome.com/docs/devtools/" target="_blank" rel="noopener noreferrer">Chrome DevTools</a> offers a variety of features to help developers measure and optimize web performance. Use the Lighthouse tool within Chrome DevTools for in-depth audits of your site's Core Web Vitals.</p>
  </div>

  <div>
    <h3>Web Vitals Extension</h3>
    <p>The <a href="https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma" target="_blank" rel="noopener noreferrer">Web Vitals Chrome Extension</a> is a handy tool that provides real-time feedback on Core Web Vitals as you browse your website. It's a quick way to spot issues and improvements.</p>
  </div>
</section>

<section id="conclusion">
  <h2>Conclusion</h2>
  <p>In conclusion, Core Web Vitals are not just metrics to monitor; they are integral to the success of your website. By prioritizing user experience through optimization for LCP, FID, and CLS, you not only create a smoother UI experience but also position your website for higher rankings on Google. </p>
  <p><em>Happy Optimizing!</em></p>
  </section>

<section id="references">

  <h2>References</h2>

  <div>
    <p>1. Google. (2021). <em><a href="https://web.dev/vitals/" target="_blank" rel="noopener noreferrer">Web Vitals</a></em>.</p>
  </div>

  <div>
    <p>2. Addy Osmani (2020). <em><a href="https://youtu.be/AQqFZ5t8uNc?si=cUIMTqr1gC5AaZUW" target="_blank" rel="noopener noreferrer">Optimize for Core Web Vitals</a></em></p>
  </div>
</div>
</section>


Core Web Vitals

Why Should You Use Core Web Vitals in Your WebSite

<aside id="table-of-contents">
  <h2>Table of Contents</h2>
  <ul>
    <li><h3><a href="#what-is-page-speed-insight-and-score">What is Page Speed Insight and Score</a></h3></li>
    <li><h3><a href="#motivation-for-page-speed-insight-score">Motivation for Page Speed Insight Score</a></h3></li>
    <li><h3><a href="#why-would-you-want-to-compute-the-score-automatically">Why Compute the Score Automatically</a></h3></li>
    <li><h3><a href="#which-api-i-am-using">Which API am I Using</a></h3></li>
    <li><h3><a href="#how-did-i-get-the-api-key">How Did I Get the API Key</a></h3></li>
    <li><h3><a href="#a-repository-you-can-clone-and-tweak">Repository You Can Clone and Tweak</a></h3></li>
    <li><h3><a href="#result-output">Result Output</a></h3></li>
    <li><h3><a href="#how-can-you-tweak-it-yourself">How Can You Tweak It Yourself</a></h3></li>
  </ul>
</aside>

<hr>
<h2 id='what-is-page-speed-insight-and-score'>What is page speed insight and score</h2>
The following is the result you get after you navigate to <a href='https://pagespeed.web.dev/'>https://pagespeed.web.dev/</a>enter a page url e.g. https://www.nathankrasney.com/ and click tha Analyze button

<div style='max-width:768px;position:relative;aspect-ratio:1044 / 518'>
  <img loading="lazy" 
  src='/images/posts/page-speed-insight-score-automation/pagespeed.web.dev.webp' 
  srcset='/images/posts/page-speed-insight-score-automation/pagespeed.web.dev.webp 1044w,
          /images/scaled/posts/page-speed-insight-score-automation/pagespeed.web.dev-783w.webp 783w,
          /images/scaled/posts/page-speed-insight-score-automation/pagespeed.web.dev-522w.webp 522w,'
  alt='https://pagespeed.web.dev/' title='https://pagespeed.web.dev/'/>
</div>

<span>Figure : https://pagespeed.web.dev/</span>

<h3>PageSpeed Insights</h3>
        <h4>Tool by Google</h4> PageSpeed Insights is a tool provided by Google to assess the performance of web pages
        <h4>Analysis for Mobile and Desktop</h4> It evaluates web pages for both mobile and desktop devices, providing insights into their loading speed and user experience

<h3>Performance Score</h3>
        <h4> 0-100 Scale</h4> PageSpeed Insights assigns a performance score ranging from 0 to 100, indicating the webpage's speed and overall performance.
        <h4>Score Categories</h4> Scores are categorized as Good (90-100), Needs Improvement (50-89), or Poor (0-49), helping website owners understand their page's performance relative to optimization best practices.

<h3>Metrics Evaluated</h3>
        <h4>Key Metrics</h4> The tool considers various metrics such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) to assess and provide recommendations for improving webpage performance.
        
<hr>
<h2 id="motivation-for-page-speed-insight-score">Motivation for page speed insight score</h2>
<h3>User Experience Enhancement</h3>

<h4>Faster Loading Times</h4> Improving the PageSpeed Insights score results in faster loading times for web pages, enhancing the overall user experience.
<h4>Reduced Bounce Rates</h4> Users are more likely to stay and engage with a site that loads quickly, leading to lower bounce rates.

<h3>SEO and Search Rankings</h3>

<h4>Search Engine Visibility</h4> Google considers page speed as a ranking factor, and a higher PageSpeed Insights score can positively impact search engine rankings.
<h4>Improved Discoverability</h4> Websites with faster loading times are more likely to be prioritized by search engines, potentially increasing visibility in search results.

<h3>Conversion Rate Optimization:

<h4>Higher Conversions</h4> Faster-loading pages contribute to a positive user experience, leading to higher conversion rates, whether that involves making a purchase, filling out a form, or other desired user actions.

<hr>
<h2 id='why-would-you-want-to-compute-the-score-automatically'>Why would you want to compute the score automatically</h2>
<p>In short, it saves you time and effort</p>
<p>You can navigate to <a href='https://pagespeed.web.dev/'>https://pagespeed.web.dev/</a> insert a url and wait for about 15 sec. if you have 10 pages to check you need to wait at least 150 sec, not including the time it takes you to enter each page URL</p> 
<p> But by using the automation tool you can do it 3 times faster and in one go</p>

<hr>
<h2 id='which-api-i-am-using'>Which API i am using</h2>
Google provides an <a href='https://developers.google.com/speed/docs/insights/v5/get-started'>api</a>

<hr>
<h2 id='how-did-i-get-the-api-key'>How did i get the api key</h2>
Navigate to <a href='https://developers.google.com/speed/docs/insights/v5/get-started#APIKey'>get-started#APIKey</a> and click on the button "Get a Key"

<hr>
<h2 id='a-repository-you-can-clone-and-tweak'>A repository you can clone and tweak</h2>
<a href='https://github.com/NathanKr/page-speed-insight-api-playground'>github repository</a>. The tag for the time of this post is <a href='https://github.com/NathanKr/page-speed-insight-api-playground/releases/tag/0.26'>0.26</a>

<hr>
<h2 id='result-output'>Result output</h2>
Following are two run 5 minutes apart and there are some deviations e.g for the home page

<div style='max-width:768px;position:relative;aspect-ratio:1248 / 352'>
  <img loading="lazy" 
  src='/images/posts/page-speed-insight-score-automation/psi-score-1.webp'  
  srcset='/images/posts/page-speed-insight-score-automation/psi-score-1.webp 1248w ,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-1-936w.webp 936w,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-1-624w.webp 642w,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-1-312w.webp 312w,
          '
  alt='first page speed insight score automation' 
  title='first page speed insight score automation'>
</div>
<span>Figure : Page speed insight score 1</span>

<div style='max-width:768px;position:relative;aspect-ratio:1224 / 356'>
  <img loading="lazy" 
  src='/images/posts/page-speed-insight-score-automation/psi-score-2.webp' 
  srcset='/images/posts/page-speed-insight-score-automation/psi-score-2.webp 1224w ,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-2-918w.webp 918w,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-2-612w.webp 612w,
          /images/scaled/posts/page-speed-insight-score-automation/psi-score-2-306w.webp 306w
          '
  alt='second page speed insight score automation' 
  title='second page speed insight score automation'> 
</div>

<span>Figure : Page speed insight score 2 (after 5 minutes)</span>

<hr>
<h2 id='how-can-you-tweak-it-yourself'>How can you tweak it yourself</h2>

navigate to data/infos.ts and change according to your needs

<pre>
<code class='language-typescript'>
const baseUrl = "https://nathankrasney.com";

const tabs: string[] = [
  "/",
  "/about",
  "/contact",
  "/courses",
  "/quiz",
  "/testimonials",
  // "/blog",
  "/events",
];

const catChosen = {
  performance: true,
  accessibility: true,
  bestPractices: true,
  seo: true,
};

const strategy = StrategyGoogleApi.mobile;
</code>
</pre>