4 เคล็ดลับในการปรับปรุงประสิทธิภาพของหน้า

Feb 3, 2026

วิธีการ

Web-performance expert Henri Helvetica sitting with his laptop

นักวิเคราะห์ประสิทธิภาพเว็บ Henri Helvetica จะแบ่งปันเคล็ดลับโปรของเขาเกี่ยวกับวิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณที่ สร้างนิวยอร์ก ปี 2018 รับตั๋วของคุณตอนนี้ .

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

โชคดีที่นักพัฒนาอิสระและนักวิเคราะห์การแสดงเว็บ HENRI Helvetica (ชื่อจริง Henri Brisard) อยู่ในมือเพื่อเสนอเคล็ดลับยอดนิยมของเขาในการประกบประสิทธิภาพของเว็บไซต์ของคุณ

01. พยายามวัด

Helvetica ชี้ให้เห็นว่าก่อนอื่นคุณต้องแน่ใจว่าคุณวัด "คุณไม่สามารถพัฒนาสิ่งที่คุณไม่ได้วัด" เขาอธิบาย "เมื่อคุณทำการวัดและข้อมูลที่วางไว้คุณต้องคิดออกว่าองค์ประกอบสำคัญในการวัด คุณสามารถมีสองหน้าที่โหลดในเก้าวินาที แต่หนึ่งอาจมีวิวพอร์ตที่เติมเต็มเร็วขึ้นดังนั้นคุณจึงมีประสบการณ์การใช้งานที่ดีขึ้น

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

เมื่อเขาดูโหลดหน้าเว็บซึ่งช่วยให้เขารับได้อย่างไรและเมื่อโหลดบางรายการขั้นตอนต่อไปของ Helvetica มักจะยิง Chrome DevTools เพื่อประเมินว่าเกิดอะไรขึ้น มันเป็นตัวเลือกที่ชัดเจนเพราะอยู่ที่นั่นและฟรี - คุณไม่จำเป็นต้องข้ามไปที่เครื่องมืออื่นเพื่อพยายามค้นพบว่าทำไมหน้าอาจช้า แต่นักพัฒนาจำนวนมากแทบจะไม่ใช้งาน "DevTools เป็นเหมือนเครื่องตรวจจับควัน" Helvetica โต้แย้ง "หากมีไฟ DevTools จะบอกคุณ อย่างน้อยก็จะแสดงให้คุณเห็นว่าควันอยู่ที่ไหน "

02. ลดน้ำหนักหน้า

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

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

Web-performance expert Henri Helvetica coding on his laptop

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

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

03. ดูว่าคุณซ้อนกันอย่างไร

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

จากนั้นมีฟิล์ม (ทั้งใน DevTools หรือเครื่องมือประสิทธิภาพเว็บเพจ) ที่แสดงภาพหน้าจอที่เพิ่มขึ้นของเบราว์เซอร์การเรนเดอร์ไซต์ดังนั้นคุณสามารถดูว่าหน้าเว็บมีลักษณะอย่างไรเมื่อโหลด โดยการตรวจสอบพวกเขาคุณสามารถทราบว่าสินทรัพย์ใดที่ถูกโหลดเมื่อใดและมองหาวิธีการโหลดบางส่วนในเวลาก่อนหน้าในไทม์ไลน์

ใน WebPageTest - Helvetica ที่ชื่นชมในระดับที่สร้างแรงบันดาลใจของรายละเอียด - คุณสามารถส่งออกวิดีโอของโหลดและเปรียบเทียบฟิล์มที่มีคู่แข่งได้ "เมื่อคุณเชื่อมต่อจุดคุณสามารถสำรวจวิธีการปรับปรุงประสบการณ์การใช้งานโดยการนำสินทรัพย์เหล่านี้เข้าสู่วิวพอร์ตได้เร็วขึ้น" Helvetica อธิบาย

04. ตัดความยุ่งเหยิง

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

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

"ตรวจสอบให้แน่ใจว่าคุณเก็บ SVG ของคุณให้เป็นอิสระมากที่สุด" Helvetica แสดงให้เห็นถึงตัวอย่าง "จากนั้นคุณจะมีรหัสน้อยลงเมื่อคุณแสดง SVG ของคุณ ฉันได้ยินสิ่งนี้จากนักพัฒนาตลอดเวลา พวกเขาจะได้รับ SVG จากนักออกแบบและต้องส่งกลับเพราะมันจะมีผลต่อประสิทธิภาพ "

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 303 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อ ปัญหา 303 หรือ สมัครสมาชิกสุทธิ .

ต้องการข้อมูลเชิงลึกเพิ่มเติมเพื่อเพิ่มความเร็วไซต์ของคุณหรือไม่

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica ทำให้ดาวเคราะห์พูดถึง APIS: เรื่องราวของประสิทธิภาพและแอมป์; ประสบการณ์การใช้งานที่สร้างนิวยอร์กตั้งแต่ 25 - 27 เมษายน 2018

หากคุณสนใจที่จะตรวจสอบให้แน่ใจว่าหน้าเว็บของคุณโหลด Lightning อย่างรวดเร็วตรวจสอบให้แน่ใจว่าคุณคว้าตั๋วสำหรับ สร้างนิวยอร์ก . HENRI Helvetica จะบุกรุกการปฏิบัติในปัจจุบันและแม้กระทั่งการทดลองใช้ในการวัดแอปพลิเคชันเว็บและให้ประสบการณ์การใช้งานของผู้ใช้งานเช่นเดียวกับการเสนอข้อมูลเชิงลึกเกี่ยวกับการวัดเช่นสีแรกสีและเวลาที่มีความหมายและเวลาในการโต้ตอบ

สร้างนิวยอร์กเกิดขึ้นตั้งแต่วันที่ 25-27 เมษายน 2561 รับตั๋วของคุณตอนนี้ .

บทความที่เกี่ยวข้อง:

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

4 เคล็ดลับในการปรับปรุงประสิทธิภาพของหน้า

01. พยายามวัด

02. ลดน้ำหนักหน้า

03. ดูว่าคุณซ้อนกันอย่างไร

04. ตัดความยุ่งเหยิง

ต้องการข้อมูลเชิงลึกเพิ่มเติมเพื่อเพิ่มความเร็วไซต์ของคุณหรือไม่

วิธีการ - บทความยอดนิยม

วิธีการจัดอันดับใน Google

รับมากขึ้นจาก Artrage 6: เคล็ดลับยอดนิยมในการเพิ่มเวิร์กโฟลว์ของคุณ

ถ่ายภาพบุคคล: วิธีการถ่ายภาพบุคคลที่สมบูรณ์แบบ

ภาพประกอบแผนที่: คู่มือทีละขั้นตอน

สร้าง UI ควบคุมด้วยเสียง

ใช้ถุงเครื่องมือ Marmoset เพื่อนำเสนอรุ่นใน VR

คู่มือที่ดีที่สุดในการรวบรวมภาพใน Photoshop

วิธีการใช้โลโก้เวกเตอร์ของคุณจาก 2D เป็น 3D

หมวดหมู่