แก้ไขปัญหาประสิทธิภาพการทำงานในเว็บไซต์ช้า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากคุณต้องการคุณภาพดีวีดีการเข้ารหัส 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 คนแล้ว