การออกแบบเว็บไซต์ที่ยั่งยืนคืออะไรและจะบรรลุได้อย่างไร

“ฉันต้องการรถยนต์ไฟฟ้าจริงๆ แต่ฉันไม่สามารถจ่ายได้” เพื่อนของฉันคนหนึ่งกล่าวอย่างสำนึกผิดเมื่อไม่กี่เดือนก่อน เขากับฉันคุยกันเรื่องการเปลี่ยนแปลงสภาพอากาศและการเปลี่ยนแปลงนิสัยของเราทั้งคู่

ฉันหัวเราะเบา ๆ

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

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



“เอาไงดี ฉันบอกวิธีลดการปล่อยคาร์บอนผ่านโลกดิจิทัลได้” ฉันแนะนำ เขามองฉันอย่างงุนงง จากนั้นฉันก็บอกเขาว่าตามสถิติ ผู้ใช้อินเทอร์เน็ตโดยเฉลี่ยสร้าง CO2 ในปริมาณที่เท่ากันกับการเดินทาง 1,000 กม. ด้วยรถยนต์ทั่วไป และมีกิจกรรมต่างๆ

เขาต่อสู้กับความคิดนี้เกือบสิบนาทีจนกระทั่งฉันดึงข้อมูลในโทรศัพท์ออกมา พูดตามตรง ฉันไม่ได้ตำหนิเขาเพราะฉันจำได้ว่าฉันมีปฏิกิริยาแบบเดียวกันในวันที่ฉันตระหนักว่าหน้าเว็บแต่ละหน้าที่ฉันเข้าชมมีค่าใช้จ่ายแอบแฝง นั่นคือพลังงานที่ใช้ในการรักษาหน้าเว็บ

ความลับสกปรกของอินเทอร์เน็ตก็ว่าได้

ตามเว็บไซต์ Carbon Carbon Calculator เว็บไซต์โดยเฉลี่ยสร้าง CO2 ประมาณ 0.5 กรัมต่อการดูหน้าเว็บ ดังนั้นสำหรับเว็บไซต์ที่มีการดู 100,000 ครั้งต่อเดือน นั่นคือ 500 กิโลกรัมต่อปี โปรดทราบว่าเป็นรายเว็บไซต์!

สำหรับการอ้างอิง รถยนต์โดยเฉลี่ยปล่อย CO2 1200 กก. ต่อ 1,000 กม. คุณจึงเห็นได้ว่าอินเทอร์เน็ตมีผลกระทบที่ชัดเจนมากต่อการเปลี่ยนแปลงสภาพภูมิอากาศและภาวะโลกร้อนเนื่องจากการปล่อยก๊าซคาร์บอนไดออกไซด์จำนวนมหาศาล

ดังนั้นคำถามก็คือ: คุณสามารถทำอะไรได้บ้างในฐานะเจ้าของเว็บไซต์เพื่อลดผลกระทบของไซต์ของคุณต่อสภาพแวดล้อมของเรา

แน่นอนว่าการออกแบบเว็บที่ยั่งยืน

ที่ Kualo เราเชื่อมโยงอย่างแนบแน่นกับแนวคิดเรื่องความยั่งยืน จนเรารู้สึกว่าเป็นเรื่องธรรมดาที่จะสำรวจหัวข้อนี้ ในบทความนี้ เราจะได้เรียนรู้:

• การออกแบบเว็บที่ยั่งยืนคืออะไร?
• ทำไมเราต้องมีการออกแบบเว็บที่ยั่งยืน?
• ประโยชน์ของการออกแบบเว็บอย่างยั่งยืนคืออะไร?
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเว็บไซต์อย่างยั่งยืน

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

การออกแบบเว็บที่ยั่งยืนคืออะไร?

“การออกแบบเว็บที่ยั่งยืนคือแนวทางการออกแบบบริการเว็บที่ให้ความสำคัญกับผู้คนและโลกเป็นอันดับแรก โดยนำเสนอผลิตภัณฑ์และบริการดิจิทัลที่เคารพหลักการของ Sustainable Web Manifesto: สะอาด มีประสิทธิภาพ เปิดเผย ซื่อสัตย์ สร้างสรรค์ใหม่ และยืดหยุ่น”



นี่คือสิ่งที่เราสามารถอ่านได้ในแถลงการณ์การออกแบบเว็บไซต์ที่ยั่งยืน โดยเว็บไซต์จะอธิบายสั้น ๆ ว่าลัทธินี้จะครอบคลุมอะไรบ้าง ไปอย่างรวดเร็วกว่า 6 จุด:

1. สะอาด: บริการที่ใช้โดยเว็บไซต์ของคุณควรใช้พลังงานจากแหล่งพลังงานหมุนเวียน ซึ่งหมายความว่าเว็บโฮสติ้งของคุณควรใช้พลังงานจากสิ่งแวดล้อม
2. มีประสิทธิภาพ: บริการที่คุณมอบให้ควรได้รับการปรับปรุงอย่างเต็มที่เพื่อใช้พลังงาน (และวัสดุ) ในปริมาณที่น้อยที่สุดเท่าที่จะเป็นไปได้
3. เปิด: บริการที่คุณมอบให้ควรเข้าถึงได้ทุกคนและควรอนุญาตให้ผู้ใช้ควบคุมข้อมูลของตนได้อย่างเต็มที่
4. ซื่อสัตย์: เว็บไซต์ของคุณจะไม่นำเสนอเนื้อหาที่ทำให้เข้าใจผิดและ/หรือพยายามทำให้ผู้ใช้เข้าใจผิดผ่านการออกแบบเว็บไซต์
5. ปฏิรูป: บริการของคุณจะมีส่วนร่วมในเศรษฐกิจที่มุ่งเน้นการสนับสนุนชุมชนและสิ่งแวดล้อม
6. ยืดหยุ่น: บริการของคุณจะได้รับเมื่อใดและที่ไหนที่พวกเขาต้องการมากที่สุด

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

กล่าวอีกนัยหนึ่ง หากคุณต้องการออกแบบเว็บไซต์ที่ยั่งยืน คุณควร:

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

เหตุใดการออกแบบเว็บไซต์ที่ยั่งยืนจึงมีความสำคัญ

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

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

แต่คุณรู้ไหมว่าเราสามารถแลกเปลี่ยนอะไรได้บ้าง?

การออกแบบเว็บไซต์ของเราแน่นอน

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

ประโยชน์ของการออกแบบเว็บไซต์อย่างยั่งยืน

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

แต่มีประโยชน์เพิ่มเติมในการเปลี่ยนวิธีการของเราในการออกแบบเว็บไซต์หรือไม่?

ฉันจะบอกว่าใช่อย่างแน่นอน



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

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

วิธีทำให้เว็บไซต์ของคุณยั่งยืน

1. เริ่มต้นด้วยการวางแผนการเดินทางของผู้ใช้ของคุณ

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

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





(เครดิตรูปภาพ: https://www.appcues.com/blog/user-journey-map)

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

ประสบการณ์ผู้ใช้ (UX) ที่ดีที่หลีกเลี่ยงจุดเสียดทานจะส่งผลให้ทั้งการใช้พลังงานลดลงและลูกค้ามีความสุขมากขึ้นอย่างหลีกเลี่ยงไม่ได้

2. เลือกผู้ให้บริการโฮสติ้งที่เป็นมิตรกับสิ่งแวดล้อม

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



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

3. แคชทุกอย่าง!

หากคุณใช้แอปพลิเคชันที่ขับเคลื่อนด้วย PHP เช่นเดียวกับที่เว็บไซต์ต่างๆ ทำ (WordPress, Magento, Drupal เป็นต้น) การแคชเป็นสิ่งที่ต้องทำเพื่อความยั่งยืน

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

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



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

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

มีหลายวิธีในการแคชเว็บไซต์ ที่ Kualo เราชอบ LiteSpeed ​​Cache สำหรับการแคชหน้า และเรายังมี Redis และ Memcached เพื่อแคชการสืบค้นฐานข้อมูล เว็บไซต์ที่เร็วเป็นพิเศษ และ ความยั่งยืนที่ดีกว่า - มีอะไรที่จะไม่รัก?

4. หากคุณกำลังเขียนโค้ด ตรวจสอบให้แน่ใจว่าเป็นโค้ดที่สะอาด

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

5. หลีกเลี่ยงปลั๊กอินและส่วนเสริมที่ไร้ประโยชน์

สิ่งนี้เกี่ยวข้องกับกฎข้างต้น แต่สำหรับผู้ที่ใช้ CMS เช่น WordPress, Magento, Craft, Laravel และอื่น ๆ บางครั้งเราอาจตื่นเต้นเกินไปกับความเป็นไปได้ทั้งหมดที่ตลาดปลั๊กอินเสนอให้เรา และทำให้เว็บไซต์ของเราจมอยู่กับปลั๊กอินที่ไม่จำเป็น

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

6. หลีกเลี่ยงหรือใช้แบบอักษรที่กำหนดเองให้น้อยที่สุด

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



(ฟอนต์แบบกำหนดเองที่สร้างขึ้นสำหรับ Duolingo โดยหน่วยงาน Johnson Banks)

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

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

7. ใช้ไฟล์สื่ออย่างชาญฉลาด (และเพิ่มประสิทธิภาพ)

ควรดำเนินการโดยไม่บอกว่าภาพทั้งหมดบนเว็บไซต์ของคุณควรปรับขนาดให้เหมาะสม เราทราบจากแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับความเร็วของเว็บไซต์ (และต่อมาคือ SEO) บางครั้งเราเห็นลูกค้าถามว่าทำไมไซต์ของพวกเขาถึงช้า เพียงเพื่อจะพบว่าหน้าแรกมีรูปภาพ 4MB เนื่องจากพวกเขาได้อัปโหลดต้นฉบับขนาดใหญ่พิเศษ! ภาพเดียวกันเหล่านั้นอาจแสดงได้โดยไม่ลดคุณภาพลงด้วยการปรับให้เหมาะสม

https://youtu.be/eY-VyLd2t-Q

LiteSpeed ​​Cache สำหรับ WordPress มีการเพิ่มประสิทธิภาพรูปภาพโดยอัตโนมัติ คุณจึงไม่ต้องกังวลเกี่ยวกับการทำเช่นนี้ด้วยตัวเอง ยิ่งไปกว่านั้น ยังสามารถแปลงรูปภาพเป็นรูปแบบไฟล์ที่ทันสมัย ​​เช่น WebP ซึ่งมีขนาดเล็กกว่าประมาณ 25% เมื่อเทียบกับรูปภาพ PNG หรือ JPG

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

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

8. Lazy load ใต้เนื้อหาครึ่งหน้า

หน้าเว็บแต่ละหน้าของคุณอาจมีเนื้อหาจำนวนมาก 'ครึ่งหน้าล่าง' กล่าวคือ เนื้อหาที่ไม่สามารถมองเห็นได้เว้นแต่ผู้เข้าชมจะเลื่อนหน้าลงมา

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



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

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

แอปพลิเคชั่นบางตัวมาพร้อมกับการโหลดแบบขี้เกียจในตัวหรือสามารถเชื่อมต่อกับปลั๊กอินได้ สำหรับ WordPress นั้น LiteSpeed ​​Cache มีฟีเจอร์การโหลดแบบ Lazy Loading ที่สามารถโหลดอะไรก็ได้จากรูปภาพ วิดีโอ เนื้อหาที่ฝังไว้ หรือแม้แต่บล็อก HTML ทั้งหมด หากเพจของคุณยาวมาก

9. จำกัดการใช้วิดีโอและภาพเคลื่อนไหว

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

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

10. ลดขนาด HTML, CSS และ Javascript บนไซต์ของคุณ

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

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

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

สำหรับ WordPress LiteSpeed ​​Cache จะจัดการด้านนี้ให้กับคุณ แต่แอปพลิเคชันอื่นๆ ส่วนใหญ่จะมีคุณสมบัติที่คล้ายคลึงกันผ่านปลั๊กอิน

11. ลบ CSS และ Javascript ที่ไม่จำเป็นออก

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

คุณอาจเคยใช้ธีมหรือตัวสร้างเพจซึ่งมีเลย์เอาต์ สไตล์ หรือฟังก์ชันต่างๆ มากมายที่คุณไม่เคยใช้ในไซต์ของคุณ

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



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

Javascript อาจซับซ้อนกว่าในการตัดออก แม้ว่าอย่างน้อย LiteSpeed ​​ก็สามารถชะลอการโหลดจนกว่าจะตรวจพบกิจกรรมของผู้ใช้ สิ่งนี้อาจเหมาะสม หากไม่จำเป็นสำหรับเนื้อหาครึ่งหน้าบน

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

12. ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณทำงานได้อย่างถูกต้องในอุปกรณ์ต่างๆ

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

พวกเขาจะใช้เวลามากขึ้นในการค้นหาสิ่งที่พวกเขากำลังมองหา ซึ่งส่งผลให้มีการใช้พลังงานมากขึ้น

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

13. ใช้ CDN เพื่อให้บริการเนื้อหาของคุณ

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

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

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



สิ่งสำคัญคือต้องเลือก CDN ที่ใช้พลังงานหมุนเวียน เช่น Cloudflare

14. ตรวจสอบเนื้อหาของคุณเพื่อให้แน่ใจว่าเป็นไปตามกลยุทธ์

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

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

15. ลดการปล่อย CO2 ของคุณโดยการชดเชยรอยเท้าคาร์บอนของคุณ

การเป็นธุรกิจที่เป็นมิตรกับสิ่งแวดล้อมอาจเป็นหนึ่งในการตัดสินใจที่ดีที่สุดที่เราเคยทำในแง่ของการยกระดับความยั่งยืนของเรา จนถึงขณะนี้ เราได้ปลูกต้นไม้มากกว่า 50,000 ต้น และชดเชย CO2 ได้มากกว่า 2,000 ตัน ด้วยความตั้งใจที่จะเดินทางต่อไปในปีต่อๆ ไป

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

เราขอเชิญคุณเยี่ยมชมพันธมิตรของเราที่ Ecologi (หรือองค์กรอื่นที่คล้ายคลึงกัน) และเริ่มปลูกต้นไม้เหล่านั้น!