บทความ IT เจ๋งๆ
Web Performance Resources ที่มีประโยชน์สำหรับ Front End Developers
07-ก.ค.-23
คัมภีร์เทพ IT
หนึ่งในวิธีที่ดีในการยกระดับอาชีพการพัฒนา Front End ก็คือ การเลือกที่จะเชี่ยวชาญในด้านใดด้านหนึ่ง หรือเลือกที่จะเชี่ยวชาญหลากหลายด้านไปเลย และการเชี่ยวชาญในเรื่อง Web Performance ก็เป็นหนึ่งในสิ่งที่ช่วยทำให้คุณก้าวหน้าได้เช่นกัน ซึ่งบทความนี้จะมาแนะนำ Web Performance Resources ที่มีประโยชน์สำหรับ Front End Developers
Resources สำหรับการเริ่มต้น
มาเริ่มกันที่ Core Web Vitals มันเป็นส่วนหนึ่งของโครงการที่ริเริ่มโดย Google เพื่อเตรียม Metrics ระดับสูงซึ่งทำหน้าที่เป็นตัวชี้วัดคุณภาพของ Website พวกเขาได้เลือก Metrics ที่แสดงความเร็วในการมองเห็น Page ของคุณ (First Contentful Paint), การเปลี่ยนแปลงของ Layout (Largest Contentful Paint, Cumulative Layout Shift) และความเร็วของ Page ที่มีต่อการโต้ตอบ (First Input Delay) สิ่งเหล่านี้ล้วนมีความสำคัญอย่างยิ่ง เนื่องจากคะแนนของ Metrics เหล่านี้จะส่งผลต่ออันดับ Website ของคุณใน Google Search Results
Courses
นี่คือการแนะนำที่ดีเกี่ยวกับพื้นฐานของ Web Performance: อะไรที่ทำให้ (รู้สึก) ว่า Website เร็วหรือช้า, วิธีวัดประสิทธิภาพ, วิธีปรับปรุงประสิทธิภาพ และวิธีเพิ่มประสิทธิภาพเฉพาะ Metrics ที่ต้องการ
นี่เป็นการเจาะลึกเพื่อทำความเข้าใจ JavaScript Performance ซึ่งประกอบไปด้วย การแนะนำสั้นๆ เกี่ยวกับ Web Performance, การเจาะลึกเกี่ยวกับประสิทธิภาพของ JavaScript, ส่วนต่าง ๆ ที่เน้นไปที่การแสดงประสิทธิภาพ, ประสิทธิภาพของการ Load และเครื่องมือต่าง ๆ โดยเฉพาะอย่างยิ่งส่วนของการแสดงประสิทธิภาพและประสิทธิภาพของการ Load มีความเกี่ยวข้องมากที่สุดสำหรับ Front End Developers ที่ต้องการทำความเข้าใจในวิธีการวัด, การวินิจฉัย และการปรับปรุงประสิทธิภาพบน Client
Course ที่ใช้วิดีโอเพื่อการ Develop, Debug & Performance Audit ใน Websites ของคุณ ซึ่งจะช่วยยกระดับทักษะและสร้างประสบการณ์ใน Web Development ที่รวดเร็วของคุณ อีกทั้งยังมีคำแนะนำในเชิงปฏิบัติที่ยอดเยี่ยมสำหรับการใช้ Dev Tools เพื่อระบุและแก้ไขปัญหาในด้านของประสิทธิภาพ
นี่คือ Course ฟรี (ที่นำโดย Scott Jehl) ที่เริ่มต้นด้วยสิ่งที่เป็นพื้นฐาน หรืออาจจะเรียกว่าเหมาะสำหรับคนที่ไม่มีความรู้มาก่อนเกี่ยวกับ Concept ในเรื่องของประสิทธิภาพ
Advanced Topics
มี Libraries และ Frameworks ของ Front End เป็นจำนวนมากที่มีความสามารถในการสร้าง HTML และ CSS บน Server เพื่อเพิ่มความเร็วของ First Contentful Paint จากนั้นจึงมีขั้นตอน "Hydration" ที่ JavaScript ถูก Load, Parse และ UI ที่ถูกสร้างแบบโต้ตอบ ซึ่งจะว่าไปแล้ว Progressive Hydration ถือเป็น Concept ที่สำคัญเมื่อคุณพยายามลดเวลาในการโต้ตอบ (เพราะมันจะเลือก Load Components ต่าง ๆ ตามความสำคัญของสิ่งเหล่านั้น แทนที่จะ Load Components ทั้งหมดพร้อมกันทีเดียว)
Books
หนังสือเกี่ยวกับ Networking ของ Ilya Grigorik ซึ่งถูกตีพิมพ์ในปี 2013 มีเนื้อหาครอบคลุมในเรื่องที่เป็นพื้นฐานของวิธีการทำงานของ Browsers ซึ่งเหมาะสำหรับผู้ที่อยากเชี่ยวชาญในสิ่งที่เกิดขึ้นเบื้องหลังในทุก ๆ Requests ที่ส่งไปยัง Website ของคุณ
มันเป็นการแนะนำเกี่ยวกับการใช้ Service Workers เพื่อทำให้ Website ของคุณมีความยืดหยุ่นและทนทาน ต่อความไม่น่าเชื่อถือของ Network
Tools
Lighthouse เป็นเครื่องมือ Open Source ที่ถูกพัฒนาโดย Google โดยมันจะช่วยปรับปรุงคุณภาพของ Web Pages โดยการวัด Performance, Accessibility, SEO และ Progressive Web Apps คุณสามารถ Run Lighthouse Test ได้โดยตรงจาก Chrom DevTools
มันมีประโยชน์อย่างมากในการดูว่า Metrics แต่ละรายการมีผลต่อ Lighthouse Score อย่างไรบ้าง มันจะแสดงให้คุณเห็นว่า การวัดแต่ละรายการนั้นมีการถ่วงน้ำหนักอย่างไร, การถ่วงน้ำหนักได้มีการพัฒนาขึ้นอย่างไรบ้างใน Lighthouse เวอร์ชันใหม่ ๆ และมี Benchmarks ใดบ้างที่จะเป็นตัววัดว่า ผ่านหรือไม่ผ่าน
PageSpeed Insights เป็นเครื่องมือจาก Google ที่ช่วยให้คุณสามารถ Run การ Test ประสิทธิภาพของการวัด Core Web Vitals, รวมข้อมูลของ User Experience ทีเกิดขึ้นจริงสำหรับ User ที่เข้าถึง Website ของคุณ ดังนั้น คุณจึงสามารถเห็นข้อมูลที่เกิดขึ้นจริงของประสิทธิภาพ นอกจากนี้ PageSpeed Insights ยังสามารถให้คำแนะนำเกี่ยวกับจุดที่ควรมุ่งเน้นเพื่อเพิ่มประสิทธิภาพ Website ของคุณ ซึ่งมันเป็นวิธีที่ง่ายและรวดเร็วในการ Run Lighthouse Test จากบน Web
WebPage Test เป็นเครื่องมือที่ให้คุณสามารถ Run การ Test หลากหลายประเภท เช่น Core Web Vitals, Lighthouse, Visual Comparison ระหว่าง 2 Pages และ Traceroute นอกจากนี้คุณยังสามารถปรับแต่ง Device Type, Network Speed และ Location ที่ Match กับ Users ของคุณ และช่วยให้รับรู้ถึงประสิทธิภาพในโลกของความเป็นจริง
Calibre จะทำการ Test, Report และ Alert ให้โดยอัตโนมัติ แน่นอนว่าคุณไม่ต้องทำเอง คุณยังสามารถตั้งค่าการ Test แบบอัตโนมัติสำหรับ Page ที่ต้องการของ Website ใดก็ได้, ตั้ง Performance Budgets เพื่อกำหนดเป้าหมายและเพื่อให้บรรลุเป้าหมายของคุณ รวมทั้งติดตามความคืบหน้าเมื่อเวลาผ่านไป
Speedcurve มีเครื่องมือสำหรับวัดประสิทธิภาพของ Website หรือ App ของคุณไม่ว่าจะผ่าน Lab (หรือที่เรียกว่า Synthetic Monitoring) รวมถึงการตรวจสอบ User จริง ซึ่งมันจะรวบรวมข้อมูลที่เกี่ยวข้องจาก User จริง ๆ ใน Website ของคุณ เพื่อแสดงให้เห็นว่าพวกเขาได้รับประสบการณ์เกี่ยวกับประสิทธิภาพของ App ของคุณอย่างไร สิ่งนี้0tช่วยให้คุณสามารถตัดสินใจอย่างมีกลยุทธ์และตรงเป้าหมายเพื่อปรับปรุงประสิทธิภาพสำหรับผู้ที่เข้าเยี่ยมชมของคุณ
Libraries ยอดนิยม
Webpack Bundle Analyzer เป็นเครื่องมือที่ช่วยให้คุณเห็นภาพของ Output ของ Webpack Config ของคุณและดูว่าจริง ๆ แล้ว อะไรที่ถูกรวมอยู่ใน JavaScript Bundles แต่ละชุดของคุณ
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด