คู่มือที่ครอบคลุมเพื่อแก้ไขปัญหาประสิทธิภาพการทำงานบนไซต์ที่ช้า

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

โฮสติ้งคุณภาพต่ำเป็นตัวการที่มีแนวโน้มมากที่สุด

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

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

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

ใช้รหัส F12 ของคุณ

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

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

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

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

รับคำแนะนำฟรีจาก Google

คุณรู้ไหมว่า Google สามารถวิเคราะห์หน้าเว็บของคุณได้ฟรีและให้คำแนะนำเกี่ยวกับวิธีการแก้ไขปัญหาต่างๆ แก่คุณ สิ่งที่คุณต้องทำคือไปที่หน้า Page Speed ​​Insights ของ Google และป้อน URL ของหน้าที่คุณต้องการวิเคราะห์

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

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

ตัวอย่างที่มีชื่อเสียง ได้แก่ :

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

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

ใช้ภาพอย่างถูกต้อง

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

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

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

นี่คือพื้นฐานที่คุณควรคำนึงถึงเมื่อสร้างผลงานชิ้นเอกนั้น:

  • ใช้ภาพขนาดใหญ่เท่าที่จำเป็น

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

  • ตั้งค่า PPI / DPI อย่างเหมาะสม

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

  • Slice ภาพขนาดใหญ่

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

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

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

วิดีโอก็สามารถปรับให้เหมาะสมเช่นกัน

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

หากคุณต้องการคุณภาพ DVD ไฟล์ MP4 ที่มีการเข้ารหัส H.264 จะให้ผลลัพธ์ที่ยอดเยี่ยม แต่ต้องแลกมาด้วยการดาวน์โหลดที่หนักหน่วง สำหรับการสตรีมวิดีโอ WebM ให้การบีบอัดที่ดีกว่ามาก ปัญหาคือระบบปฏิบัติการมือถือบางระบบยังไม่รองรับ WebM (ควรทำเช่นนั้น แต่ดูเหมือนว่ามีเหตุผลบ้าๆ บางอย่างที่จะไม่ทำเช่นนั้น อาจเป็นไปตามกฎทองของนักพัฒนามือถือ: คุณจะสร้างความไม่สะดวกและสร้างความสับสนให้กับลูกค้าให้มากที่สุดเท่าที่จะเป็นไปได้)

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

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

ไฟล์ WMV ไม่มีปัญหาใดๆ สำหรับผู้ใช้ Android, Windows หรือ Linux แต่ด้วยชุมชนอินเทอร์เน็ต 12.5% ​​ที่ใช้อุปกรณ์ Apple คุณจะต้องตัดสินใจว่ามันคุ้มค่าหรือไม่ที่จะทำให้พวกเขาไม่สะดวก โดยส่วนตัวแล้วฉันไม่แนะนำให้คุณทำเช่นนั้นเพื่อให้โหลดเร็วขึ้น

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

บ็อกดานแรนเซีย

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

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

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