perf: improve performance and best practice based on lighthouse recom…

…endation #273
jerensl · Jun 27, 2022 · 24b815f · 24b815f
1 parent a76cddd
commit 24b815f
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 26 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -10,27 +10,32 @@
  {
  "src": "/icons/icon-48x48.png",
  "sizes": "48x48",
- "type": "image/png"
+ "type": "image/png",
+ "purpose": "any maskable"
  },
  {
  "src": "/icons/icon-72x72.png",
  "sizes": "72x72",
- "type": "image/png"
+ "type": "image/png",
+ "purpose": "any maskable"
  },
  {
  "src": "/icons/icon-96x96.png",
  "sizes": "96x96",
- "type": "image/png"
+ "type": "image/png",
+ "purpose": "any maskable"
  },
  {
  "src": "/icons/icon-128x128.png",
  "sizes": "128x128",
- "type": "image/png"
+ "type": "image/png",
+ "purpose": "any maskable"
  },
  {
  "src": "/icons/icon-144x144.png",
  "sizes": "144x144",
- "type": "image/png"
+ "type": "image/png",
+ "purpose": "any maskable"
  },
  {
  "src": "/icons/icon-152x152.png",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -10,7 +10,7 @@ import { LinkURL } from './LinkURL'
 function SitemapSection() {
  return (
  <div>
- <h4 className="text-lg font-semibold text-gray-500">Sitemap</h4>
+ <h2 className="text-lg font-semibold text-gray-500">Sitemap</h2>
  <div className="mt-2 flex flex-col gap-1">
  <LinkURL className="text-lg" href="/">
  Home
@@ -32,7 +32,7 @@ function SitemapSection() {
 function ContactSection() {
  return (
  <div>
- <h4 className="text-lg font-semibold text-gray-500">Contact</h4>
+ <h2 className="text-lg font-semibold text-gray-500">Contact</h2>
  <div className="mt-2 flex flex-col gap-1">
  <LinkURL
  className="text-lg"
@@ -60,35 +60,44 @@ function ContactSection() {
 function AboutSection() {
  return (
  <div>
- <h4 className="text-xl font-bold text-center sm:text-left">
+ <h1 className="text-xl font-bold text-center sm:text-left">
  Jerens S. Lensun
- </h4>
+ </h1>
  <p className="text-secondary text-center sm:text-left mb-4 md:mb-6 max-w-md text-2xl">
  Software Engineering
  </p>
  <div className="flex space-x-6 h-10 justify-center sm:justify-start py-1">
- <LinkURL href="https:/jerensl">
+ <LinkURL href="https:/jerensl" aria-label="Github">
  <FontAwesomeIcon
  className="hover:text-red-600 cursor-pointer"
  icon={faGithubSquare}
  size="2x"
  />
  </LinkURL>
- <LinkURL href="https://twitter.com/jerensl22">
+ <LinkURL
+ href="https://twitter.com/jerensl22"
+ aria-label="Twitter"
+ >
  <FontAwesomeIcon
  className="hover:text-red-600 cursor-pointer"
  icon={faTwitterSquare}
  size="2x"
  />
  </LinkURL>
- <LinkURL href="https://www.linkedin.com/in/jerensl/">
+ <LinkURL
+ href="https://www.linkedin.com/in/jerensl/"
+ aria-label="Linkedin"
+ >
  <FontAwesomeIcon
  className="hover:text-red-600 cursor-pointer"
  icon={faLinkedin}
  size="2x"
  />
  </LinkURL>
- <LinkURL href="https://www.jerenslensun.com/rss.xml">
+ <LinkURL
+ href="https://www.jerenslensun.com/rss.xml"
+ aria-label="RSS"
+ >
  <FontAwesomeIcon
  className="hover:text-red-600 cursor-pointer"
  icon={faRssSquare}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -25,11 +25,11 @@ export const Header = ({
  loader={imageLoader}
  placeholder="blur"
  blurDataURL={blurDataURL}
- alt="Person"
+ alt="A man looking to a beautiful river and mountain"
+ quality="80"
  objectFit="contain"
- width="1000px"
- height="667px"
- className="transition duration-300 ease-in-out"
+ width="1080px"
+ height="720px"
  />
  </div>
  <div className="col-span-full items-center grid gap-10 pt-10 lg:gap-5 lg:pt-0 lg:col-start-1 lg:row-start-1 lg:col-span-5 w-full max-w-sm m-auto text-center">

diff --git a/src/components/NavbarMobile.tsx b/src/components/NavbarMobile.tsx
@@ -14,7 +14,7 @@ export const NavbarMobile = (): React.ReactElement => {
  <div className="flex justify-between w-full">
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-400 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
  href="/"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -25,7 +25,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-400 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
  href="/blog"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -36,7 +36,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-400 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
  href="/project"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -50,7 +50,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-400 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
  href="/about"
  >
  <span className="block px-1 pt-1 pb-2">

diff --git a/src/components/career-card.tsx b/src/components/career-card.tsx
@@ -28,7 +28,7 @@ export const CareerCard = ({
  }}
  >
  <motion.div variants={childrenVariants}>
- <h3 className="text-xl font-bold">{organization}</h3>
+ <h2 className="text-xl font-bold">{organization}</h2>
  </motion.div>
  <motion.div variants={childrenVariants}>
  <p>{role}</p>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -5,6 +5,7 @@ import Document, {
  NextScript,
  DocumentContext,
 } from 'next/document'
+import Script from 'next/script'
 
 const APP_NAME = 'Jerens'
 const APP_DESCRIPTION =
@@ -20,15 +21,17 @@ class MyDocument extends Document {
  return (
  <Html lang="en-US">
  <Head>
- <script
+ <Script
+ id="gtm"
+ strategy="afterInteractive"
  dangerouslySetInnerHTML={{
  __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-PKW49NT');`,
  }}
- ></script>
+ ></Script>
  <meta name="application-name" content={APP_NAME} />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta
@@ -119,12 +122,22 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  content="/icons/ms-icon-144x144.png"
  />
  <meta name="theme-color" content="#FFFFFF" />
- <link
+ <style
+ id="katex"
+ dangerouslySetInnerHTML={{
+ __html: `</style>
+ <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
  integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn"
  crossOrigin="anonymous"
- />
+ media="print"
+ onload="this.media='all'; this.onload=null;"
+ />
+ <style>
+ `,
+ }}
+ ></style>
  <link
  rel="preconnect"
  href="https://fonts.googleapis.com"