วิธีการวัดประสิทธิภาพเว็บไซต์ Front-end

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

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

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

คำขอ HTTP

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

เมื่อส่งคำขอเบราว์เซอร์ของคุณจะแยกวิเคราะห์แต่ละองค์ประกอบของหน้า ขึ้นอยู่กับเครื่องมือวิเคราะห์คำแต่ละเว็บไซต์จะโหลดแตกต่างกันและองค์ประกอบจะปรากฏในลำดับที่แตกต่างกันตามความเร็วในการถ่ายโอน ตัวอย่างเช่น Internet Explorer จะแสดงหน้าเว็บที่แตกต่างจาก Chrome หรือ Safari และเครื่องมือเหล่านี้ทำงานแตกต่างกันเล็กน้อยกว่า Firefox หรือ Opera.

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

บ่อยครั้งที่ปัจจัยที่ทำให้ไซต์ clunky JavaScript อ้างอิงความเร็วหรือไฟล์รูปภาพขนาดใหญ่ ด้วยความนิยมของ Verizon FiOS เป็นเรื่องปกติที่ความเร็วอินเทอร์เน็ตจะสูงถึง 600kbps และเพิ่มขึ้นเรื่อย ๆ ! น่าเสียดายที่นี่ไม่ใช่บรรทัดฐานและถึงแม้จะมีการเชื่อมต่อความเร็วสูงก็เป็นไปได้ที่จะพบข้อบกพร่องในการเพิ่มประสิทธิภาพ.

แก้ไขเพื่อประสิทธิภาพของเว็บไซต์

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

Google ได้เปิดตัวโปรเจ็กต์ Page Speed ​​ซึ่งสร้างขึ้นเพื่อช่วยให้นักพัฒนาเพิ่มประสิทธิภาพเว็บไซต์และตรวจสอบระดับประสิทธิภาพที่ดีที่สุด เดิมโครงการเริ่มต้นเป็นโอเพ่นซอร์ส Firebug add-on และตอนนี้ได้รับการยอมรับว่าเป็นการอ้างอิงบุคคลที่สามสำหรับการทดสอบเว็บไซต์.

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

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

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

เทคนิคความเร็ว

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

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

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

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

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

การบีบอัดขนาดไฟล์

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

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

คุณอาจลองบีบอัดภาพที่มีขนาดใหญ่ที่สุดในหน้าเว็บของคุณ สิ่งนี้สามารถทำได้ด้วยซอฟต์แวร์แก้ไขภาพใด ๆ เช่น Adobe Photoshop หรือ GIMP เพียงแค่ปรับขนาดภาพใหม่ด้วยความละเอียดที่ต่ำกว่า รูปภาพ PNG จะส่งออกโดยเฉลี่ยน้อยกว่ารูปแบบ jpg หรือ TIFF มาก นอกจากนี้ยังมีเครื่องมือออนไลน์มากมายเช่น Image Optimizer เพื่อช่วยในกระบวนการบีบอัด.

การตรวจสอบแหล่งที่มาและตัวชี้วัด

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

เครื่องมือ Mozilla Firebug ที่เป็นที่นิยมมากที่สุดคือปลั๊กอินสำหรับเบราว์เซอร์ Firefox แอพนี้ติดตั้งแถบเครื่องมือขนาดเล็กที่ด้านล่างของเบราว์เซอร์ของคุณเพื่อตรวจสอบเวลาตอบสนองข้อมูลส่วนหัวองค์ประกอบของหน้าและสคริปต์สำหรับแต่ละเว็บไซต์ สคริปต์นี้ยังได้รับการย้ายไปยัง Firebug Lite เป็นส่วนเสริมสำหรับ Google Chrome.

Apache พร้อม mod_pagespeed

การตั้งค่าบางอย่างจะใช้งานเว็บเซิร์ฟเวอร์ Apache ดังนั้นตัวเลือกนี้อาจไม่สามารถใช้งานได้ตลอดเวลา โมดูลนี้เกี่ยวข้องโดยตรงกับ เครื่องมือตรวจสอบความเร็วหน้าของ Google กล่าวถึงก่อนหน้านี้ อันที่จริงแล้วรหัสสำหรับ mod_pagespeed นั้นมาจากห้องสมุดหลายแห่งจากฐานข้อมูลของ Google Code.

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

ปัจจุบันโครงการตั้งอยู่ที่ Google และเปิดให้นักพัฒนาซอฟต์แวร์ Google ทำงานร่วมกับ GoDaddy เพื่อใช้งาน mod_pagespeed กับบัญชีโฮสติ้งทั้งหมดที่ใช้งานเซิร์ฟเวอร์ Apache HTTP.

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

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