วิธีเพิ่มประสิทธิภาพมือถือ

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

กลายเป็นมือถือใจ

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

ทบทวนความร่วมมือ

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

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

งบประมาณประสิทธิภาพ

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

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

โดยทั่วไป เรากำหนดเป้าหมายสำหรับขนาดหน้า โดยจำกัดไว้ที่ 500KB สำหรับโฮมเพจบนมือถือ คำขอของเซิร์ฟเวอร์นั้นคาดเดาได้ยากกว่า ดังนั้นเราจึงมีโอกาสน้อยที่จะกำหนดตัวเลขที่แน่นอน แนวทางคร่าวๆ เหล่านี้เหมาะสมกับความต้องการของเราสำหรับโครงการของลูกค้า แต่ Daniel Mall มีแนวทางปฏิบัติที่ยอดเยี่ยมในการเพิ่มรายละเอียดให้กับงบประมาณ ตั้งแต่การจัดสรรน้ำหนักสำหรับ HTML และ CSS ไปจนถึง JavaScript รูปภาพ และแบบอักษรของเว็บ

เทคนิคการเพิ่มประสิทธิภาพ

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

การเพิ่มประสิทธิภาพฝั่งไคลเอ็นต์

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

เพิ่มประสิทธิภาพโค้ด

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

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

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

คุณสามารถเพิ่มประสิทธิภาพไฟล์ CSS และ JS เพิ่มเติมได้โดยใช้ระบบเช่น Grunt หรือ Gulp หรือด้วยแอปคอมไพเลอร์ส่วนหน้า เช่น Prepos, Codekit หรือ Hammer สิ่งเหล่านี้ลดคำขอ HTTP และขนาดไฟล์โดยการทำงานที่หลากหลาย: การต่อไฟล์ การคอมไพล์ Sass, Less หรือ CoffeeScript, Uglify JS (บีบอัด JavaScript) และย่อ/บีบอัดไฟล์สำหรับใช้งานจริง

จัดลำดับความสำคัญเหนือส่วนพับ

Google Pagespeed Insights (และเครื่องมือที่คล้ายกัน) แนะนำให้จัดลำดับความสำคัญของขนาดการโหลดและความเร็วของเนื้อหาในครึ่งหน้าบน แยก CSS ที่ใช้แสดงส่วนที่มองเห็นได้ของหน้า (ครึ่งหน้าบน) ก่อน เลื่อนสไตล์ที่เหลือเพื่อโหลดหลังจากแสดงผลหน้าแล้ว

การเพิ่ม CSS ด้านบนลงในส่วนหัวของหน้าโดยตรงสามารถทำได้ แต่โปรดทราบว่าระบบจะไม่แคชเหมือนไฟล์ CSS อื่นๆ ดังนั้นจึงต้องจำกัดเฉพาะเนื้อหาหลัก เครื่องมือที่หลากหลายสามารถช่วยคุณกำหนด CSS ที่จะแยก ซึ่งรวมถึง Critical CSS ของ Scott Jehl และเครื่องมือ Bookmarklet ของ Paul Kinlam

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

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

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

คุณยังสามารถใช้ประโยชน์จาก HTML5 <picture> องค์ประกอบใหม่และแอตทริบิวต์ srcset และ size สำหรับรูปภาพ การเพิ่มสองภาษานี้ช่วยให้คุณกำหนดรูปภาพที่ตอบสนองได้โดยตรงใน HTML ดังนั้นเบราว์เซอร์จะดาวน์โหลดเฉพาะภาพที่ตรงกับเงื่อนไขที่กำหนดเท่านั้น

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

อย่างไรก็ตาม เทคนิคนี้ควรใช้อย่างระมัดระวัง มีเพียงไม่กี่เบราว์เซอร์ที่รองรับ: เบราว์เซอร์สมัยใหม่บางตัว (เช่น Safari), เบราว์เซอร์ Android และ IE10/11 (และเก่ากว่า) ไม่รองรับ ทางเลือก Polyfill สามารถทำให้วิธีนี้ใช้ได้กับเบราว์เซอร์รุ่นเก่า แต่สิ่งเหล่านี้คือไลบรารี JavaScript ภายนอกที่ต้องโหลดแยกต่างหาก และอาจไม่คุ้มค่าเนื่องจากมีเทคนิคอื่นๆ ให้ใช้งาน ควรพิจารณากลุ่มเป้าหมายของคุณและเทคโนโลยีที่พวกเขาจะใช้ เพื่อดูว่าจำเป็นต้องใช้น้ำหนักที่เพิ่มขึ้นของโพลีฟิลหรือไม่

URL ข้อมูลเป็นตัวเลือกสุดท้าย แทนที่จะลิงก์ไปยังไฟล์รูปภาพภายนอก ข้อมูลรูปภาพสามารถแปลงเป็นสตริงที่เข้ารหัส base64 (หรือ ASCII) และฝังลงในไฟล์ CSS หรือ HTML ได้โดยตรง มีเครื่องมือแปลงออนไลน์อย่างง่าย URL ข้อมูลมีประโยชน์ เนื่องจากบันทึกคำขอ HTTP และสามารถโอนไฟล์ขนาดเล็กได้รวดเร็วยิ่งขึ้น แต่ดังที่แสดงด้านล่าง ขนาดโค้ดที่ฝังไว้จะใหญ่กว่าการลิงก์ไปยังรูปภาพภายนอก ความยาวที่เพิ่มขึ้นทำให้เอกสาร HTML และ CSS ดูแลรักษายากขึ้น และการเปลี่ยนแปลงรูปภาพจะต้องได้รับการเข้ารหัสและฝังใหม่ทุกครั้ง

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

เพิ่มประสิทธิภาพสื่อ CMS โดยอัตโนมัติ

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

แต่เรายังต้องการให้ BAM มีอิสระในการอัปเดตเนื้อหาโดยไม่จำเป็นต้องปรับแต่งภาพแต่ละภาพ แน่นอนว่าไม่มีวิธีแก้ปัญหาใดที่จะมีประสิทธิภาพเท่ากับการปรับให้เหมาะสมด้วยมือ แต่เราจัดการเพื่อให้ได้การเพิ่มประสิทธิภาพอัตโนมัติในระดับที่เหมาะสม เรากำหนดค่า Sitefinity CMS ที่มีอยู่ใหม่เพื่อสร้างความยืดหยุ่น ใช้ตัวเลือกมาตรฐานเพื่อปรับขนาด (และปรับให้เหมาะสม) รูปภาพโดยอัตโนมัติ โดยเหมาะสมกับบริบทของแต่ละหน้าเว็บ:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

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

 /images/image-opt.jpg?size=480 

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

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

ปรับปรุงแบบอักษรและไอคอน

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

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

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

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

กำลังโหลดเทคโนโลยี

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

ดำเนินการต่อไปด้วย เทคนิคการโหลดแบบมีเงื่อนไขแบบ Lazy Loading เพื่อเพิ่มความเร็วหน้าเว็บที่รับรู้ โดยจะโหลดส่วนที่มองเห็นได้เป็นขั้นตอน โดยมีเนื้อหาหลักอยู่ในครึ่งหน้าบน ระบบจะไม่โหลดรายการราคาแพง (เช่น รูปภาพ) ที่พบในส่วนท้ายของหน้า เว้นแต่ผู้ใช้จะเลือกเลื่อนดูเนื้อหา เทคนิคนี้เป็นกุญแจสำคัญสำหรับส่วน 'ข้อมูลเชิงลึก' ของเว็บไซต์ Niu Solutions ซึ่งครอบคลุมนวัตกรรมด้านไอทีของพวกเขา เราใช้ปลั๊กอิน jQuery ขนาดเล็กที่เรียกว่า jScroll เพื่อโหลดบทความเพิ่มเติมเมื่อผู้ใช้เลื่อนลง ต่อไปนี้คือตัวอย่างวิธีที่เราจะตั้งค่าปลั๊กอินนี้ ซึ่งเพียงแค่ต้องมีลิงก์ไปยังเนื้อหาเพิ่มเติม:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

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

ปรับปรุงจากประสบการณ์หลัก

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

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

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

ลดการทดสอบคุณสมบัติ

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

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

การเพิ่มประสิทธิภาพฝั่งเซิร์ฟเวอร์

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

สิ่งนี้ได้รับอิทธิพลจากความเร็วของเครือข่าย จากข้อมูลของ Ofcom ความเร็วในการดาวน์โหลดเฉลี่ยบนเครือข่าย 3G และ 4G ยอดนิยมคือ 6.1Mbps และ 15.1Mbps ในสหราชอาณาจักร บางคนตีความว่าเป็นข้อจำกัดที่ชัดเจนเกี่ยวกับขนาดเว็บไซต์สูงสุด แต่ความเป็นจริงนั้นซับซ้อนกว่า เนื่องจากความเร็วแตกต่างกันไปขึ้นอยู่กับความครอบคลุมและบริบทของสิ่งแวดล้อม ผู้ใช้มักจะเชื่อมต่อกับ Edge (E) และ GPRS ที่ช้าเมื่ออยู่นอกระยะ

มีเทคนิคมากมายในการปรับปรุงประสิทธิภาพเว็บไซต์ฝั่งเซิร์ฟเวอร์

การแคช การแสดงผลล่วงหน้า และเนื้อหาแบบคงที่

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

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

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

การแคชเบราว์เซอร์

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

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

เครือข่ายการจัดส่งเนื้อหา (CDN)

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

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

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

การทดสอบ

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

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

สังเกตเส้นแนวตั้งสีน้ำเงินและสีแดงที่ด้านขวาของไทม์ไลน์ในตัวตรวจสอบ Chrome ด้านบน สิ่งเหล่านี้แสดงถึงเหตุการณ์ DOM Ready และ Page Load ตามลำดับ ที่ด้านล่างของหน้าต่างจะแสดงจำนวนคำขอ HTTP และขนาดไฟล์ทั้งหมดที่โหลดที่เบรกพอยต์ปัจจุบัน

เครื่องมืออื่นๆ ได้แก่:

• WebPagetest เสนอตัวเลือกมากมายสำหรับการทดสอบ URL แบบสด: ตั้งแต่การเลือกสถานที่ใดๆ ทั่วโลก ไปจนถึงการกำหนดความเร็วและเวลาในการตอบสนองของการเชื่อมต่อ 3G และ 4G ที่เฉพาะเจาะจง คุณยังสามารถสัมผัสประสบการณ์การโหลดเว็บไซต์สำหรับผู้ใช้เหล่านี้ผ่านมุมมองฟิล์มและวิดีโอ
• Pagespeed Insights ของ Google เป็นเครื่องมือแนะนำที่มีภาพและเป็นภาพมากขึ้นสำหรับการวิเคราะห์ความเร็วหน้าเว็บ โดยแบ่งผลลัพธ์ออกเป็นเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ และแนะนำเทคนิคในการปรับปรุงพื้นที่เป้าหมายของไซต์ของคุณ: ระบุทรัพยากรไปยังแคชหรือรูปภาพเพื่อเพิ่มประสิทธิภาพ

ทดสอบกับอุปกรณ์จริง

แต่อย่าพึ่งพาเครื่องจำลองเพียงอย่างเดียว เรายังทดสอบโปรเจ็กต์ตลอดการผลิตบนอุปกรณ์พกพาจริงต่างๆ

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

สรุปประสิทธิภาพมือถือ

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

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• รายการตรวจสอบประสิทธิภาพ Front-End 2017
• เตรียมพร้อมสำหรับ HTTP/2
• ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับ AMP
• พลังลับ (ไม่เป็นเช่นนั้น) ของเบราว์เซอร์มือถือ