ความต้องการของชั่วโมงไม่ใช่การออกแบบที่ตอบสนอง แต่ให้ประสิทธิภาพที่ตอบสนอง

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

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

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

ดังนั้นคำถามใหญ่คือจะทำอย่างไร?

ทิ้งแนวคิดการออกแบบที่เน้นเดสก์ท็อปเป็นหลัก

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

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

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

คุณจะต้องยอมรับความจริงที่ว่าการรออย่างไม่สิ้นสุดเพียงเพื่อตรวจสอบเว็บไซต์ไม่ได้ทำให้ใครตื่นเต้น จากการสำรวจโดย Akamai และ Gomez.com พบว่าผู้ใช้เว็บประมาณ 50% คาดหวังให้เว็บไซต์โหลดได้ภายใน 2 วินาทีหรือน้อยกว่านั้น มีโอกาสมากขึ้นที่เว็บไซต์จะถูกละทิ้งหากเว็บไซต์ไม่สามารถโหลดในเบราว์เซอร์ได้ภายใน 3 วินาที! นอกจากนี้ เว็บไซต์อีคอมเมิร์ซส่วนใหญ่ในปัจจุบันมีปุ่มแบ่งปันทางสังคมจำนวนมาก เช่น Facebook, Google Plus, Twitter, LinkedIn เป็นต้น คุณรู้หรือไม่ว่าปุ่มเหล่านี้เพิ่มมากกว่า 500KB ในไซต์ที่ตอบสนองของคุณและส่งผลต่อประสิทธิภาพการทำงาน ปุ่มไลค์ของ Facebook เพียงอย่างเดียวต้องการรหัสบีบอัด 270KB! นอกจากนี้ยังต้องการคำขอ HTTP หลายรายการ ให้ใช้ปุ่มแบ่งปันทางสังคมตาม URL เนื่องจากขนาดที่ใหญ่เช่นนี้ย่อมส่งผลต่อเวลาในการโหลดของเว็บไซต์ที่ตอบสนองของคุณอย่างหลีกเลี่ยงไม่ได้ แม้ว่าการเชื่อมต่อมือถือจะเร็วก็ตาม

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

ตามสถิติของ Comscore ปีที่แล้ว จำนวนผู้ใช้อินเทอร์เน็ตเฉพาะมือถือในสหรัฐอเมริกาเพิ่มขึ้นอย่างรวดเร็วในขณะที่ผู้ใช้เดสก์ท็อปเท่านั้นลดลงเหลือ 10.6%

ต้องการพูดอะไรอีกเพื่อโน้มน้าวใจ?

รับรองการย่อยสลายอย่างสง่างาม

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

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

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

สิ่งนี้คุณสามารถเข้าใจได้ดีขึ้นด้วยการเข้ารหัสที่ระบุด้านล่าง:

[xhtml]
<noscript>
<h1>เรียน คุณจอห์น คุณพบปัญหาแล้ว!</h1>
<p>เบราว์เซอร์ของคุณไม่รองรับ JavaScript หรือถูกปิดใช้งานชั่วคราว
ไปที่<a href="/support/browsers/">การสนับสนุนเบราว์เซอร์</a>ของเราเพื่อรับความช่วยเหลือ</p>
</noscript>
[/xhtml]

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

ไม่จำเป็นต้องเก็บไลบรารี่ที่ไม่ได้ใช้

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

ตรวจสอบความพร้อมใช้งานของคุณสมบัติ

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

ความไม่พร้อมใช้งานของคุณลักษณะบนอุปกรณ์และการออกแบบเว็บไซต์หรือแอปพลิเคชัน ส่งผลให้เกิดปัญหาที่เห็นได้ชัดเจน เช่น การหยุดทำงานของแอป Google Hangout บนอุปกรณ์ Android ทั่วโลกโดยไม่คำนึงถึงประเภทของเบราว์เซอร์ แม้ว่าแอปจะเป็นแอปที่มีน้ำหนักเบาก็ตาม คุณอาจโต้แย้งว่าผู้ใช้ใช้สมาร์ทโฟน Android เวอร์ชันเก่า แต่ก็เป็นความจริงเช่นกันที่อุปกรณ์ดังกล่าวยังคงมีวางจำหน่ายตามร้านในร้านค้ามือถือทุกแห่ง ผู้ใช้มือถือจำนวนมากประสบปัญหาด้านประสิทธิภาพเช่นเดียวกันกับแอป YouTube และ Twitter เช่นกัน แม้แต่การอัปเดตบริการ Android System Webview ของ Google ผ่าน Google Play ก็ทำให้สมาร์ทโฟนหลายเครื่องกลายเป็นฝันร้ายของผู้ใช้ได้

ปรับภาพให้เหมาะสม

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

ทำให้รูปภาพมีขนาดเล็กลงโดยใช้เครื่องมือเพิ่มประสิทธิภาพรูปภาพที่เหมาะสม ในความเป็นจริง ไม่มีเครื่องมือดังกล่าวบนเว็บ สิ่งที่น่าสังเกตบางอย่างที่คุณสามารถนำไปใช้ได้คือ Dynamic Drive, Smush it และ Riot หากคุณเป็นมือโปรใน Photoshop คุณยังสามารถปรับขนาดภาพให้เหมาะสมได้ด้วยตัวเอง ใช้เทคนิคการบีบอัดข้อมูลอย่างชาญฉลาดและดึงออกจากข้อมูลเมตาที่ซ้ำซ้อน การแปลงกราฟิกเป็น PNG รูปภาพที่มีสีสันสดใสเป็น JPEG และภาพเคลื่อนไหวเป็น GIF ก็สามารถทำได้เช่นกัน

เตรียมพร้อมสำหรับกรณีที่รุนแรง

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

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

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

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