4 เทคนิคช่วยเพิ่มความเร็วของเว็บไซต์ให้ดียิ่งขึ้น

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

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

มุมมองในการเพิ่มประสิทธิภาพในแต่ละด้าน

การพิจารณาใช้ SVGs แทน PNGs

ยกตัวอย่างเช่น: การใช้ SVG images สำหรับไอคอนของการขนส่ง

SVG images เป็น Vector Images ดังนั้นจึงเหมาะอย่างยิ่งที่จะนํามาใช้กับไอคอนมากกว่า PNG เพราะว่ารูป SVG นั้นสามารถประหยัดขนาดไฟล์ได้ถึง 60% ถึงแม้ว่าจะไม่ได้ดีเสมอไป

ไอคอนเหล่านี้มีขนาดประมาณ 1.2k ซึ่งค่อนข้างมีขนาดเล็ก มีส่วนช่วยในเรื่องความเร็วได้ แต่อาจจะไม่เคยถูกพูดถึงมาก่อน ขนาดเว็บไซต์ชื่อดังอย่างเช่น Page Speed Insights หรือ GTMetrix ก็ไม่ได้มีการพูดถึงเรื่องนี้เลย

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

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

Inline images

GTMetrix ได้ให้คำแนะนำเกี่ยวกับการ Inline CSS หรือ JS แค่เพียงเล็กน้อย แต่ไม่ได้กล่าวถึงการ Inline แบบ Images ซึ่งการ Inline images นั้นสามารถแทรกรูปภาพได้ และอาจเป็นตัวที่เลือกที่น่าสนใจ

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

เว็บไซต์นี้ไม่ได้ใช้ HTTP2 จึงทำให้มีระยะเวลารอนาน ดังนั้นรูปภาพที่มีขนาด 1.2kb ใช้เวลาในการโหลดเกือบ 600 มิลลิวินาที โดยมีภาพทั้งหมดสามภาพ ซึ่งระหว่างการโหลดภาพแต่ละภาพนั้นอาจส่งผลกระทบอย่างมากต่อความเร็วของหน้าเพจ

ในตอนนี้เราได้ลองบีบอัดไฟล์เหล่านี้ให้เหลือเพียงแค่สองสามร้อยไบต์ต่อไฟล์ และ จริงๆ แล้วรูปภาพ SVG นั้นประกอบขึ้นจากการ Markup ในลักษณะที่คล้ายกับ HTML

คุณสามารถใส่ Markup SVG ลงในเอกสาร HTML ได้โดยตรง ถ้าเราทำเช่นนี้กับการส่งภาพทั้งสามภาพ HTML ที่บีบอัดสำหรับหน้านี้ที่ส่งจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ของเราจะเพิ่มขึ้นจาก 31,182 ไบต์เป็น 31,532 ไบต์ มันเพิ่มขึ้นถึง 350 ไบต์ สําหรับแค่สามรูปเท่านั้น

สรุป :

• HTML request ของเราเพิ่มขึ้นถึง 350 ไบต์ 
• เราสามารถลดเวลาการส่งรูปภาพไปเซิฟเวอร์ได้ถึงสามรอบ

บางคนอาจทราบแล้วว่าหากรูปภาพไม่อยู่ในบรรทัด พวกมันสามารถแคชแยกออกจากกันได้ ดังนั้น Page Requests ในอนาคตจึงไม่จำเป็นต้องดึงข้อมูลใหม่ แต่ถ้าเราพิจารณาจาก

• แต่เดิมแต่ละภาพมีขนาดประมาณ 1.5kb บน Network โดยที่ไม่ได้ทำการ gzipping SVG และมีส่วนหัว HTTP อยู่ประมาณ 350 ไบต์ ซึ่งรวมการถ่ายโอนทั้งหมดประมาณ 5.5kb ดังนั้นโดยรวมแล้ว เราได้ลดปริมาณเนื้อหาใน Network ลง

• นอกจากนี้ยังหมายความว่า การใช้เวลาดูหน้าเว็บเพจมากกว่า 20 หน้าเพื่อให้ได้ประโยชน์จากการแคช

Takeaway : พิจารณาว่ามีโอกาสตรงส่วนไหนที่จะใช้ SVG แทน PNG ได้

Takeaway : เช็คให้แน่ใจว่าคุณปรับภาพ SVG ให้เหมาะสมกับเครื่องมือฟรีที่เราแนะนําไป

Takeaway : การใส่รูปภาพขนาดเล็กดูสมเหตุสมผล และนำมาซึ่งประสิทธิภาพที่เพิ่มขึ้น

Note : คุณยังสามารถทำ Inline PNG — ดูคู่มือนี้

Note : สำหรับการปรับภาพ PNG/JPG ที่ต้องการให้เหมาะสม ลองใช้ Kraken

JavaScript ไม่จำเป็น เพราะสามารถใช้ HTML ได้

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

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

• Combo Box ที่มาพร้อมกับช่อง Search
• Dropdown Boxes ที่มีตัวเลือกการค้นหาข้อความเป็นองค์ประกอบอินเทอร์เฟซทั่วไปในปัจจุบัน

โดยในบทความล่าสุดที่เราพบ ได้อธิบายวิธีใช้ Select 2 Javascript Library เพื่อสร้างรายการ Dropdown นี้

เป็นองค์ประกอบ UI ที่มีประโยชน์ และสามารถช่วยเหลือผู้ใช้งานของคุณได้ อย่างไรก็ตาม Select2 Library เป็น JavaScript Library ซึ่งอาศัย CSS และ JQuery Library บางตัว โดยนี่หมายถึงการเดินทางไปกลับของข้อมูลมากกว่าสามครั้งเพื่อรวบรวมไฟล์ที่มีขนาดต่างกัน

• JQuery – 101kb
• Select2 JavaScript – 24kb
• Select2 CSS – 3kb

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

โดยสิ่งนี้ช่วยให้ผู้ใช้งานสามารถค้นหาผ่านรายการ หรือพิมพ์คำตอบของตนเองได้อย่างอิสระ และมีฟังก์ชันการทำงานเหมือนกัน นอกจากนี้ยังมีอินเทอร์เฟซดั้งเดิมบนสมาร์ทโฟนอีกด้วย สามารถดูเพิ่มเติมได้จาก Codepen นี้

Detail / Summary

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

อย่างที่เห็นสิ่งนี้ใช้ได้กับการใช้งานเกือบทุกอย่าง พวกเขาเลือกที่จะใช้ JavaScript Library ในการใช้งาน และ สิ่งนี้มาพร้อมกับค่า Overheads จำนวนมาก

อย่างไรก็ตาม HTML มีแท็กในตัวที่เรียกว่า รายละเอียด และข้อมูลสรุป หรือ Detail/Summary ซึ่งใช้งานได้ฟรี มันถูกออกแบบมาเพื่อใช้งานฟังก์ชันนี้ตั้งแต่แรก ไม่มีค่า Overheads และการเข้าถึงได้มากขึ้นสำหรับผู้ใช้ที่ต้องการใช้โปรแกรมอ่านหน้าจอ ในขณะเดียวกันก็ถ่ายทอดความหมายไปยัง Google ได้ แท็กเหล่านี้สามารถจัดรูปแบบได้หลากหลายรูปแบบด้วย CSS และ สร้างเวอร์ชัน JS ส่วนใหญ่ที่เคยเห็นขึ้นมาใหม่ ตัวอย่าง : https://codepen.io/TomAnthony/pen/GRRLrmm

ตัวอย่างเพิ่มเติมของฟังก์ชันการทำงานที่คุณสามารถทำได้ด้วย HTML แทน JS

• http://youmightnotneedjs.com/
• https://dev.to/ananyaneogi/html-can-do-that-c0n

Takeaway : ตรวจสอบฟังก์ชันการทำงานของเว็บไซต์คุณ และ ดูว่ามีโอกาสที่จะลดการพึ่งพาจาก JavaScript Libraries ขนาดใหญ่ที่มีตัวเลือก HTML/CSS ดั้งเดิมได้อย่างไร

Takeaway : อย่าลืมว่าขนาดของไฟล์ JavaScript ไม่ใช่เพียงปัญหาเดียว แต่ยังมีจำนวนรอบการเดินทางของข้อมูลที่ต้องการด้วย

Note : มีหลายกรณีที่คุณควรใช้โซลูชัน JS ดังนั้นสิ่งสำคัญที่ควรคํานึงถึงคือการชั่งน้ำหนัก ข้อดี และ ข้อเสียของมัน

การปรับแต่ง Network

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

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

TLS 1.3

TLS หรือ SSL เป็นเทคโนโลยีการเข้ารหัสที่ใช้เพื่อรักษาความปลอดภัยการเชื่อมต่อ HTTPS ในอดีตข้อมูลผ่านเบราว์เซอร์และเซิร์ฟเวอร์ต้องเดินทางไปกลับสองครั้งเพื่อตั้งค่าการเข้ารหัส หากผู้ใช้อยู่ห่างจากเซิร์ฟเวอร์ 50 ms นั่นหมายความว่าต้องใช้เวลา 200 ms ต่อการเชื่อมต่อ ทําให้ Google เองก็แนะนำให้ตั้งเป้าไว้ที่ 200 ms เพื่อส่ง HTML ซึ่งการทำแบบนี้เสียเวลาเป็นอย่างมาก

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

คุณสามารถใช้เครื่องมือนี้เพื่อตรวจสอบเวอร์ชันของ TLS ที่คุณเปิดใช้งานอยู่

QUIC / HTTP 3

ในช่วง 2-3 ปีที่ผ่านมา เราได้เห็นเว็บไซต์จำนวนมากย้ายจาก HTTP 1.1 เป็น HTTP 2 ซึ่งเป็นการอัปเกรดหลังบ้าน และมันช่วยปรับปรุงความเร็วเว็บไซต์ได้อย่างมาก ในทางตรงกันข้าม มีมาตรฐานคู่ใหม่ที่เรียกว่า QUIC + HTTP/3 ซึ่งจะช่วยเพิ่มประสิทธิภาพการเชื่อมต่อระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ให้เหมาะสมยิ่งขึ้น และยังช่วยลดการเดินทางไปกลับของข้อมูลอีกด้วย

สิ่งเหล่านี้เพิ่งจะเริ่มใช้ได้เมื่อไม่นานมานี้ แต่ถ้าเกิดคุณเป็นลูกค้าของ CloudFlare คุณก็สามารถเปิดใช้งานมันได้เลยทันที และในอีก 6 เดือนข้างหน้าเมื่อ Chrome และ Firefox เปิดให้ใช้งาน ผู้ใช้งานของคุณจะได้รับความเร็วที่เพิ่มขึ้น

อ่านเพิ่มเติมได้ที่ : https://blog.cloudflare.com/http3-the-past-present-and-future/

Super Routing

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

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

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

Takeaway : ประโยชน์มากมายเหล่านี้หาได้ง่ายมาก ถ้าหากคุณใช้ CDN แต่ถ้าคุณไม่ได้ใช้ CDN คุณควรพิจารณาเริ่มใช้ได้ อีกทั้ง CloudFlare ก็เป็นตัวเลือกที่ยอดเยี่ยม เช่นเดียวกับ CloudFront หากคุณใช้งาน AWS และ ถ้าหากคุณเป็นมือโปรในด้านนี้ Fastly เป็นทางเลือกที่ดีที่สามารถกำหนดค่าได้มากที่สุด

Takeaway : ในตอนนี้ TLS 1.3 ได้รับการสนับสนุนอย่างกว้างขวาง และยังมีการปรับปรุงความเร็วในการเชื่อมต่อใหม่ที่สำคัญอีกด้วย

Takeaway : QUIC / HTTP3 ถึงแม้จะพึ่งเริ่มได้รับการสนับสนุนมาไม่นาน แต่ในอีกไม่กี่เดือนข้างหน้า ฟีเจอร์นี้จะเปิดตัวในวงกว้างยิ่งขึ้น โดยตัว QUIC จะรวมประโยชน์ของ TLS 1.3 และอื่นๆอีกมากมาย ในขณะที่การเชื่อมต่อ HTTP2 ทั่วไปในปัจจุบันจำเป็นต้องใช้การส่งข้อมูลไปกลับถึงสามรอบ แต่ QUIC ใช้เพียงแค่รอบเดียวเท่านั้น

Takeaway : หากคุณใช้ CloudFlare หรือ AWS สามารถที่จะเพิ่มความเร็วเพียงแค่กดสวิตช์เพื่อเปิดฟีเจอร์ Smart Routing

ให้ CSS ทำสิ่งต่างๆ ได้มากขึ้น

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

การใช้ภาพซ้ำ

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

จากรูปภาพด้านล่างคุณจะเห็นลูกศรที่ชี้ไปยังไอคอนที่มีลักษณะคล้ายกันสองจุด ซึ่งทั้งสองไอคอนนั้นใช้เพื่อการข้ามหรือถอยหลังของหนังนั่นเอง

เช่นเดียวกับตรรกะที่ใช้ข้างต้น แม้ว่าไฟล์ภาพเหล่านี้จะมีขนาดเล็ก แต่ก็ยังต้องมีการเดินทางไปกลับของข้อมูลเพื่อดึงข้อมูลจากเซิร์ฟเวอร์อยู่ดี

อย่างไรก็ตาม ลูกศรเหมือนกันเพียงแต่ชี้ไปในทิศทางตรงกันข้าม เป็นเรื่องง่ายสำหรับเราที่จะใช้ฟังก์ชันการแปลงของ CSS เพื่อใช้รูปภาพเดียวสำหรับทั้งสองทิศทาง

คุณสามารถดู Codepen นี้เป็นตัวอย่างได้

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

มี Codepen ที่แสดงเทคนิคนี้ในการใช้งานจริง หากคุณต้องการคำนวณค่าตัวกรอง CSS เพื่อให้ได้สีตามต้องการลองใช้ Color Calculator ได้เลย

การโต้ตอบ เช่น เมนู แท็บ

บ่อยครั้งที่องค์ประกอบการนำทาง เช่น เมนู และ แท็บ ถูกนำมาใช้ใน JavaScript แต่สิ่งเหล่านี้ก็สามารถทำได้ใน CSS เช่นกัน ลองดูได้จากตัวอย่าง Codepen นี้

Animations

CSS3 นําเสนอความสามารถแอนิเมชั่นที่มีประสิทธิภาพมากในตัวโปรแกรมเอง บ่อยครั้งสิ่งเหล่านี้ไม่เพียงเร็วกว่าเวอร์ชันของ JavaScript เท่านั้น แต่ยังทำงานได้ราบรื่นกว่าอีกด้วย เนื่องจากสามารถเรียกใช้ใน Native Code ของระบบปฏิบัติการได้เลย รวมถึงไม่จําเป็นต้องรันตัว JavaScript ที่ค่อนข้างช้าให้เสียเวลาอีกด้วย

ลองดู Dozing Bird เป็นตัวอย่าง:

คุณสามารถหาข้อมูลเพิ่มเติมได้จากบทความนี้ ซึ่ง CSS animations สามารถเพิ่มตัวอักษรจำนวนมากให้กับหน้าเพจได้อย่างมีประสิทธิภาพในราคาที่ต่ำ

ตัวอย่างเพิ่มเติมของฟังก์ชันการทำงานคุณสามารถทำได้โดยใช้โซลูชัน CSS

• http://youmightnotneedjs.com
• https://dev.to/ananyaneogi/css-can-do-that-18g7m

Takeaway : ใช้ CSS เพื่อเพิ่มประสิทธิภาพจำนวนไฟล์ที่คุณต้องโหลดโดยใช้ Rotations หรือ Filters

Takeaway : ภาพเคลื่อนไหว CSS สามารถเพิ่มตัวอักษรลงในหน้าเพจได้ และใช้ทรัพยากรน้อยกว่า
JavaScript

Takeaway : CSS สามารถใช้องค์ประกอบ UI แบบโต้ตอบ Interactive ได้อย่างดีเยี่ยม

สรุป

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

• Facebook
• Twitter
• Line