ประสิทธิภาพเว็บ- จาก 27 ถึง 99

May 01 2023

การมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมคือปัจจัยหลักในการปรับปรุงการเข้าชมเว็บไซต์และธุรกิจของลูกค้า บล็อกนี้มีรายการสิ่งที่ฉันทำเพื่อปรับปรุงคุณภาพและประสิทธิภาพของเว็บไซต์ NextJS ของฉัน

การมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมคือปัจจัยหลักในการปรับปรุงการเข้าชมเว็บไซต์และธุรกิจของลูกค้า

บล็อกนี้มีรายการสิ่งที่ฉันทำเพื่อปรับปรุงคุณภาพและประสิทธิภาพของเว็บไซต์ NextJS ของฉัน

ประสิทธิภาพเว็บ- จาก 27 ถึง 99

ฉันใช้PageSpeed Insightsเพื่อตรวจสอบเว็บไซต์ของฉัน โดยจะวิเคราะห์เว็บไซต์ภายใต้สี่ประเภท ได้แก่ ประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดีที่สุด และ SEO

ผลงาน:

ประสิทธิภาพจะคำนวณตามเมทริกซ์ 5 รายการ:
1. First Contentful Paint (FCP)— เวลาสำหรับข้อความหรือรูปภาพแรกจะถูกระบายสี
2. Largest Contentful Paint(LCP) — เวลาที่มีการระบายสีข้อความหรือรูปภาพที่ใหญ่ที่สุด
3. Total Blocking Time (TBT) — ผลรวมของช่วงเวลาทั้งหมดระหว่าง FCP และ Time to Interactive เมื่อความยาวของงานเกิน 50ms แสดงเป็นมิลลิวินาที
4. Cumulative Layout Shift (CLS) — Cumulative Layout Shift วัดการเคลื่อนไหวขององค์ประกอบที่มองเห็นได้ภายในวิวพอร์ต
5. ดัชนีความเร็ว (SI)— แสดงให้เห็นว่าเนื้อหาของหน้าถูกเติมข้อมูลอย่างรวดเร็วเพียงใด

เกณฑ์ทั่วไปสำหรับเมทริกซ์เหล่านี้:
ที่มา:https://developers.google.com/speed/docs/insights/v5/about#categories

เกณฑ์ประสิทธิภาพ

ขั้นตอนที่ฉันทำเพื่อปรับปรุงประสิทธิภาพ:

เมตาแท็กของวิวพอร์ต —
เมตาแท็กของวิวพอร์ตจะควบคุมความกว้างและขนาดของวิวพอร์ตเพื่อให้เว็บไซต์มีขนาดที่ถูกต้องบนอุปกรณ์ทั้งหมด หากไม่มีเมตาแท็กของวิวพอร์ต อุปกรณ์เคลื่อนที่จะแสดงหน้าเว็บที่ความกว้างหน้าจอเดสก์ท็อปทั่วไป จากนั้นลดขนาดหน้าเว็บลง
ฉันเพิ่มแท็กวิวพอร์ตในส่วนหัวของเอกสาร:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

แท็กรูปภาพ NextJS — แสดง srcset พร้อมรูปภาพที่มีความกว้างต่างกัน

ครึ่งหน้าบนยังใช้ในการออกแบบเว็บไซต์ (พร้อมกับ “เหนือแถบเลื่อน”) เพื่ออ้างถึงส่วนของหน้าเว็บที่มองเห็นได้โดยไม่ต้องเลื่อน
- ที่มา: วิกิพีเดีย

ตามค่าเริ่มต้น รูปภาพ NextJS จะโหลดแบบขี้เกียจ หากภาพอยู่ในครึ่งหน้าบน การโหลดแบบสันหลังยาวอาจทำให้เกิดผลกระทบสองประการ:
ก) เพิ่มการหน่วงเวลาให้กับ Largest Contentful Paint (LCP)
ข) ทำให้เกิดการเลื่อนแบบสะสมเมื่อโหลดภาพ
เพื่อลดสิ่งนี้ ฉันได้เพิ่มคุณสมบัติลำดับความสำคัญให้กับรูปภาพ ช่วยให้ NextJS จัดลำดับความสำคัญของการโหลดรูปภาพนั้น

4. ลดขนาดรูปภาพ —
ใช้รูปภาพขนาดเล็กหากทำได้ เราสามารถใช้ WebP หรือ SVG แทน PNG และ JEPG

5) Lazy load ทรัพยากรของบุคคลที่สาม —
การฝังของบุคคลที่สาม เช่น วิดีโอ YouTube ที่ไม่จำเป็นทันทีหลังจากโหลดหน้าเว็บสามารถโหลดแบบ Lazy Loading ได้ วิธีทั่วไปในการโต้ตอบกับการฝังคือ:
a) เพิ่มองค์ประกอบแบบคงที่ (ส่วนหน้า) ที่มีลักษณะเหมือนการฝังจริงในหน้าที่โหลด
b) เมื่อผู้ใช้วางเมาส์เหนือส่วนหน้า ผู้ใช้จะโหลดทรัพยากรของบุคคลที่สาม
c) เมื่อผู้ใช้คลิกที่ส่วนหน้า ผู้ใช้จะแทนที่ด้วยการฝังจริง สำหรับราย ละเอียด
เพิ่มเติมเกี่ยวกับเรื่องนี้ คุณสามารถดูเอกสารได้ที่นี่ ฉัน
ใช้แพ็คเกจ npm lite-youtube-embed

<Script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js"
 />

...

<lite-youtube videoid={videoid} />

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

import { Roboto } from 'next/font/google';
import '../styles/globals.scss';

const roboto = Roboto({ subsets: ['latin'], weight: ['400', '500', '600'] });

export default function App({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

เนื้อหาเว็บไซต์ควรเข้าถึงได้สำหรับผู้ใช้ทุกประเภท (แม้แต่ผู้ใช้ที่มีความพิการ) เราสามารถตรวจสอบชื่อการช่วยสำหรับการเข้าถึงขององค์ประกอบใดๆ ได้โดยใช้เครื่องมือ dev: (คลิกขวา → ตรวจสอบ → การช่วยสำหรับการเข้าถึง)

บานหน้าต่างการเข้าถึงในเครื่องมือ dev

บางจุดที่ฉันตรวจสอบและเครื่องมือที่ฉันใช้มีดังนี้:

คอนทราสต์ของสี —
สีพื้นหลังและพื้นหน้าควรมีคอนทราสต์เพียงพอเพื่อให้อ่านได้ชัดเจน ฉันใช้ส่วนขยายของ Chrome 'ตัวตรวจสอบความคมชัดของสี'สำหรับสิ่งนี้

ตัวตรวจสอบความคมชัดของสี

3. [lang] —
แท็ก Html ควรมีแอตทริบิวต์ภาษาที่กำหนดไว้ หากไม่มีโปรแกรมอ่านหน้าจอจะถือว่าหน้านั้นเป็นภาษาเริ่มต้นของผู้ใช้

<Html lang="en">
  <Head />
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

แผนที่หัวเรื่อง

5. รหัสและป้ายกำกับ —
ทุกองค์ประกอบควรมีรหัสเฉพาะ ช่วยระบุองค์ประกอบในหน้า องค์ประกอบแบบฟอร์มทั้งหมดควรมีป้ายกำกับ

ปฏิบัติที่ดีที่สุด:

คะแนน 'วิธีปฏิบัติที่ดีที่สุด' นั้นสูงอยู่แล้ว ดังนั้นฉันจึงไม่ต้องเปลี่ยนแปลงอะไรที่เฉพาะเจาะจง แต่ปัจจัยบางอย่างที่ต้องพิจารณาได้แก่:

ไซต์ควรได้รับการป้องกันโดยใช้ HTTPS
รูปภาพควรแสดงด้วยอัตราส่วนภาพที่ถูกต้อง
ควรรวมรูปแบบการเข้ารหัสอักขระ ใน <Head> ของเอกสาร (สูงที่สุดเท่าที่จะเป็นไปได้)
<meta charset="UTF-8">
ข้อผิดพลาดไม่ควรเข้าสู่คอนโซล
ควรหลีกเลี่ยงการเขียนตัวพิมพ์ใหญ่เว้นแต่จะเป็นตัวย่อ หากต้องการแสดงข้อความเป็นตัวพิมพ์ใหญ่ ให้ใช้การแปลงข้อความ CSS

การเพิ่มประสิทธิภาพกลไกค้นหาเป็นหนึ่งในปัจจัยที่สำคัญที่สุดในการปรับปรุงการแปลงการเข้าชม บางสิ่งเพื่อเพิ่มคะแนน SEO คือ: