Improve Page Performance

- Fix "Eliminate render-blocking resources" - Add "Preconnect to required origins" - Fix "Image elements do not have explicit width and height" - Add lazy loading to about/ images Signed-off-by: Randy <randymoralesg@gmail.com>
randymorales · Jul 19, 2021 · bb42e50 · bb42e50
1 parent 9a3b05d
commit bb42e50
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/pages/_document.js b/pages/_document.js
@@ -16,9 +16,12 @@ export default class MyDocument extends Document {
             title='RSS feed for blog posts'
             href='https://randymorales.dev/rss-en.xml'
           />
+          <link rel='preconnect' href='https://fonts.googleapis.com' />
+          <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
           <script
             src='https://kit.fontawesome.com/2c36e9b7b1.js'
             crossOrigin='anonymous'
+            async
           ></script>
         </Head>
         <body>

diff --git a/pages/about.js b/pages/about.js
@@ -73,20 +73,23 @@ export default function About() {
             width='320'
             height='680'
             priority
+            loading="lazy"
           />
           <Image
             src='/images/mtb.jpg'
             alt='moravia mtb photo'
             width='490'
             height='680'
             priority
+            loading="lazy"
           />
           <Image
             src='/images/alajuela.jpg'
             alt='iberico photo'
             width='450'
             height='680'
             priority
+            loading="lazy"
           />
         </div>
       </div>

diff --git a/pages/blog/[id].js b/pages/blog/[id].js
@@ -2,7 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-import React, { useEffect } from 'react'
+import {createRef, useEffect } from 'react'
 
 import {
   CommentsRepo,
@@ -21,7 +21,7 @@ import blogStyles from '@/styles/blog.module.css'
 export default function Post({ postData }) {
   const router = useRouter()
   const { locale } = router
-  const commentBox = React.createRef()
+  const commentBox = createRef()
   const prism = require('prismjs')
   const pageInfo = {
     url: SiteBaseURL + `/${locale}` + PostsDirectory + postData.id,

diff --git a/styles/blog.module.css b/styles/blog.module.css
@@ -181,6 +181,8 @@
 
 .postContent p img {
   border: 1px solid var(--content-text-color);
+  height: auto;
+  width: 100%;
 }
 
 /* ******** Media Queries ******** */

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,4 +1,4 @@
-@import 'https://fonts.googleapis.com/css?family=Inter&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Inter&display=swap';
 
 /* ******** Global CSS ******** */