หลีกเลี่ยง CSS ที่ 'สิ้นเปลือง' ในโครงการของคุณ

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

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

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

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

การจัดการกับ Bloat ที่สร้างขึ้นในธีมและกรอบงาน

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

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

เว็บไซต์สมัยใหม่มักสร้างขึ้นจากผลิตภัณฑ์ที่สร้างไว้ล่วงหน้า นั่นอาจเป็นเฟรมเวิร์ก CSS เช่น Bootstrap หรือธีม WordPress ที่ซับซ้อน ในบางกรณี ธีม CMS อาจรวมเฟรมเวิร์กด้วย

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

ดังนั้น สิ่งที่สามารถทำได้เพื่อปรับปรุงสถานการณ์?

ใช้เฟรมเวิร์กแบบคอมโพเนนต์หรือเฟรมเวิร์กที่มีน้ำหนักเบา หากเป็นไปได้

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

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

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

จะทำอย่างไรกับธีม CMS?

ผลิตภัณฑ์ต่างๆ เช่น ธีม WordPress เชิงพาณิชย์อาจดูยุ่งยาก เนื่องจากมักจะมีสไตล์มากมาย ไม่ว่าคุณจะต้องการหรือไม่ก็ตาม

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

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

Declutter สไตล์ชีตที่มีอยู่

การเปลี่ยนโฟกัสไปที่เว็บไซต์ที่มีอยู่ การจัดระเบียบและการจัดโครงสร้าง CSS ใหม่สามารถทำได้ด้วยวิธีใดวิธีหนึ่งจากสองวิธี:

ตรวจสอบสไตล์ด้วยตนเอง

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

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

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

หรืออาจมีสไตล์ที่คุณเลือกใช้เป็นระยะๆ เช่น ช่วงวันหยุดฤดูหนาว การย้ายสไตล์เหล่านั้นไปเป็นไฟล์แยกและเรียกเฉพาะเมื่อจำเป็นอาจคุ้มค่า

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

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

ใช้เครื่องมืออัตโนมัติ

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

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

Chris Coyier จาก CSS-Tricks เขียนบทความที่โดดเด่นเกี่ยวกับปัญหานี้โดยเฉพาะซึ่งควรค่าแก่การตรวจสอบ เขาไม่เพียงทดสอบเครื่องมือเหล่านี้บางส่วนเท่านั้น แต่ยังพิจารณาปัญหาที่ใหญ่กว่าในมือ เช่น แบบสอบถามของสื่อ

อย่างไรก็ตาม หากคุณสนใจที่จะลองใช้เครื่องมือเหล่านี้อย่างน้อยหนึ่งอย่าง ตัวเลือกยอดนิยมสองสามอย่าง ได้แก่:

• JitBit
• PurgeCSS
• PurifyCSS
• CSS ที่ไม่ได้ใช้

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

เมื่อพูดถึง CSS: Waste Not, Want Not

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

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

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

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