เคล็ดลับการเพิ่มประสิทธิภาพเว็บไซต์ที่มีประสิทธิภาพที่สุดในปี 2560
เผยแพร่แล้ว: 2017-11-09ความประทับใจแรกอาจเป็นโอกาสเดียวของคุณที่จะโจมตีความประทับใจ
เกือบทุกธุรกิจมีเว็บไซต์ที่เข้าถึงชุมชนออนไลน์ที่เพิ่มมากขึ้นเรื่อยๆ อย่างไรก็ตาม ไม่ใช่ว่าทุกคนจะให้ความสำคัญกับความสำคัญของการเพิ่มประสิทธิภาพเว็บไซต์อย่างแท้จริง ซึ่งบ่อนทำลายความสามารถในการกำหนดขอบเขตการเข้าถึงแฟรนไชส์ของพวกเขา
ยิ่งไปกว่านั้น ผู้เยี่ยมชมเว็บไซต์เริ่มหมดความอดทนและมีความต้องการมากขึ้น โดยเฉพาะการแข่งขันออนไลน์ที่เติบโตขึ้นในแต่ละวัน
Fevad (สหพันธ์อีคอมเมิร์ซและการขายทางไกล) ในปี 2558 กล่าวว่าเกือบ 57% ของผู้ใช้อินเทอร์เน็ตต้องการให้โหลดเว็บไซต์ภายใน 3 วินาทีหรือน้อยกว่า
เป็นสามัญสำนึกจริง ๆ เว็บไซต์ที่ใช้เวลานานในการโหลดจะได้รับการตั้งค่าน้อยที่สุดโดยผู้ใช้ใช่ไหม
ถามตัวเองด้วยคำถามนั้น
ธุรกิจพึ่งพาลูกค้าเป็นหลัก ซึ่งเป็นองค์ประกอบสำคัญขององค์กร และพวกเขาจำเป็นต้องรู้ว่าแบรนด์นั้นเอื้อต่อพวกเขา พวกเขาไม่ต้องการรอ
การแสดงผลที่ไม่พึงประสงค์ทำให้เกิดรีวิวที่ไม่น่าพอใจซึ่งแพร่กระจายอย่างรวดเร็วเป็นพิเศษ ส่งผลให้สูญเสียการเข้าชมและที่สำคัญที่สุดคือเงิน
Amazon กล่าวว่า ไซต์ที่ช้าลง 1 วินาทีอาจนำไปสู่การสูญเสียยอดขาย 1.6 พันล้านดอลลาร์ต่อปี
ยักษ์ใหญ่ด้านเทคโนโลยี Google จ่ายเงินล่าช้าครึ่งวินาทีในการโหลดโดยมีปริมาณการใช้ข้อมูล ลดลง 20%
เวลาคือเงินแน่นอนใช่หรือไม่?
เนื่องจากอินเทอร์เน็ตเต็มไปด้วยเว็บไซต์ที่เกือบจะมีจุดประสงค์ที่คล้ายกัน ต้องใช้เวลาเป็นชั่วโมงเพื่อสร้างสมดุลที่สมบูรณ์แบบภายในไซต์ของคุณ ซึ่งจะทำให้ผู้ชมพอใจ สร้างการเข้าชม และตอบสนองวัตถุประสงค์ของพวกเขา
ทุกสิ่งในโลกนี้อาจเปลี่ยนแปลงได้ แล้วทำไมไม่ทำเว็บไซต์ล่ะ?
ตามสถิติ มีการบันทึกการดาวน์โหลดเพิ่มขึ้น 15.4% เมื่อ Mozilla เพิ่มความเร็วหน้าเว็บเกือบ 2 วินาที
Kinsta กล่าวว่า "ผู้คนชอบโหลดหน้าเรื่องไม่สำคัญที่โหลดเร็วมากกว่าโหลดหน้าที่เกี่ยวข้องช้า"
สิ่งนี้ไม่ได้นำเสนอตัวเองว่าเป็นปริศนาใหญ่เลย เนื่องจากคุณเพียงแค่ต้องแซงหน้าคู่แข่งเพื่ออยู่เหนือ
ใครก็ได้เรียกยูเซน โบลต์!
อย่างไรก็ตาม!
คุณไม่จำเป็นต้องมีกลยุทธ์ของจาเมกาในการเขียนโค้ดเว็บไซต์ให้กับคุณแต่อย่างใด เพราะเราได้นำเสนอ เคล็ดลับและเคล็ดลับ บางประการเพื่อให้คุณได้นำหน้าคู่แข่งและเพิ่มเพจของคุณท่ามกลางผู้ชมทั่วโลก
คุณสามารถขอบคุณเราในภายหลัง
ไปเลย:
การดำเนินการทั้งหมดนี้ในครั้งเดียวอาจเป็นงานที่ยุ่งยาก ดังนั้น คุณควรดำเนินการทีละขั้นตอนและวิเคราะห์ความแตกต่างของเวลาในการโหลด
จำเป็นที่คุณจะต้องไม่คัดลอกอย่างโจ่งแจ้งเพื่อประโยชน์ของตน ทำความเข้าใจก่อนแล้วจึงนำไปใช้
01. ไปมินิมอล
จัดระเบียบหน้าเว็บของคุณเพื่อให้ดูสบายตาที่สุดเท่าที่จะเป็นไปได้ เส้นพิเศษ ตัวแบ่งบรรทัด รูปภาพ และอุปกรณ์ที่ไม่ต้องการอื่นๆ จะหมดไป
ดึงแรงบันดาลใจจากโฮมเพจของบริษัทที่มีมูลค่าหลายพันล้านดอลลาร์ เช่น Apple , Audi เป็นต้น และวิเคราะห์วิธีการจัดโครงสร้างของบริษัทเหล่านั้น
ฉันแน่ใจว่าคุณคงเข้าใจเส้นแบ่งระหว่างแรงบันดาลใจกับการลอกเลียนแบบ
02. การเพิ่มประสิทธิภาพภาพ
รูปภาพมีค่ามากกว่าหนึ่งพันคำและแน่นอนว่ามันมีน้ำหนักมากเช่นกัน
รายงาน HTTP ในปี 2559 อ่านว่า “ 64% ของน้ำหนักหน้าเว็บอยู่ที่รูปภาพเท่านั้น ” นั่นทำให้สิ่งต่าง ๆ อยู่ในมุมมองอย่างแน่นอน
คุณคงสังเกตเหมือนกันว่ารูปภาพต้องใช้เวลามากขึ้น ตอนนี้ฉันไม่จำเป็นต้องบอกคุณใช่ไหม
แล้วจะทำอะไรได้ล่ะ!
- เลือกที่จะแทรกรูปภาพเฉพาะในที่ที่มันสำคัญจริงๆ – ใน JPEG หากคุณจัดลำดับความสำคัญของคุณภาพและ PNG สำหรับภาพที่มีความสำคัญน้อยกว่า เช่น โลโก้ ฯลฯ BMP และ TIFF เป็นสิ่งที่ไม่ควรทำ!
- การปรับขนาดภาพอย่างเหมาะสมตามความต้องการที่เกี่ยวข้องจะยับยั้งการสร้างข้อมูลขยะที่ไม่จำเป็นซึ่งเป็นภาระของแบนด์วิดท์
- เครื่องมือเช่น Smushit , JPEG/ PNG Stripper ช่วยให้เพิ่มประสิทธิภาพได้อย่างง่ายดายเพียงคลิกปุ่ม
03. CSS Delivery Optimization เพิ่มประสิทธิภาพ
ไม่นานมานี้ ขนาดที่เหมาะสมที่สุดของหน้าเว็บจะอยู่ที่ประมาณ 30KB รวมถึงองค์ประกอบทั้งหมด เช่น รูปภาพ ข้อความ และอื่นๆ
การถือกำเนิดของ CSS และ JavaScript ได้ปรับปรุงและทำลายอุปสรรค 30KB นี้และทำให้ผู้ใช้ได้รับประสบการณ์ที่สมบูรณ์ยิ่งขึ้น
โดยการลดรอบการอ่านโค้ดโดยใช้วิธี "ชวเลข" ความเร็วในการส่งจะปรับให้เหมาะสมที่สุด โดยพื้นฐานแล้ว ปล่อยให้ความซ้ำซ้อนหมดปัญหา
การเลือกใช้สไตล์ชีตภายนอกซึ่งสามารถโหลดได้ก่อนที่จะแสดงผลเพจไปยังสไตล์ชีตภายในก็ช่วยได้เช่นกัน ทุกอย่างขึ้นอยู่กับว่า "ผู้เชี่ยวชาญด้านการเข้ารหัส" ทำงานอย่างไร
ลดสคริปต์ที่ซับซ้อนและโค้ดที่ซ้ำซ้อน ดูเหมือนยุติธรรมเพียงพอใช่ไหม
04. เทคนิคการบีบอัด
ที่จริงแล้ว CSS และ Javascript สามารถเพิ่มประสิทธิภาพได้มากกว่าหนึ่งวิธี เราคุยกันเรื่องระบบการจัดส่งก่อน
ทีนี้ มาดูกันว่าเราจะบีบอัดพวกมันได้อย่างไร
- ลดขนาด CSS และ JavaScript เพื่อบีบอัดโดยการผสมผสานระหว่าง CSS และ JavaScript ที่ตามมาเพื่อลบช่องว่างระหว่างนั้น
- อื่น ๆ ได้แก่ CSS Optimizer , Clean CSS และอีกมากมาย (อย่าขี้เกียจ Google แล้วหาคำตอบ)
- การบีบอัด GZip ช่วยโดยการค้นหาองค์ประกอบของโค้ดที่คล้ายกันและแลกเปลี่ยนกับอักขระที่สั้นกว่าชั่วคราว
ข้อควรระวัง : การใช้ Gzip เพื่อบีบอัดรูปภาพ PDF ฯลฯ อาจทำให้ไฟล์ใหม่มีขนาดใหญ่กว่าเวอร์ชันก่อนหน้า การสนับสนุนเบราว์เซอร์รุ่นเก่าอาจไม่รับประกัน (ใครใช้ของเก่าด้วย btw?)
05. “ข้อผิดพลาด 404”
สิ่งนี้อาจคุ้นเคยในหมู่ผู้เขียนโค้ดและสิ่งที่พวกเขากลัวเช่นกัน ปรากฏขึ้นในกรณีที่ไฟล์หรือหน้าหายไป
แม้ว่าจะดูเรียบง่าย แต่ ข้อผิดพลาด 404 ทั่วไปต้องใช้หน่วยความจำประมาณ 50-100 MB เพื่อส่ง ดูเหมือนจะย่อยยาก? ฉันบอกว่ามันเป็นสิ่งที่คนกลัว
ปลั๊กอินมีวิธีมากมายในการตรวจสอบและดีบักข้อผิดพลาดประเภทนี้ แต่จะอยู่ในเซิร์ฟเวอร์นานเกินไป ซึ่งทำให้สิ้นเปลืองทรัพยากรของแต่ละเซิร์ฟเวอร์ที่เกี่ยวข้อง
ดังนั้นจึงควรใช้เครื่องมืออย่าง Screaming Frog เพื่อรวบรวมข้อมูล ระบุหน้าข้อผิดพลาด และแก้ไขเพื่อไม่ให้เสียแบนด์วิดท์มากเกินไป และลดการสูญเสียของผู้เข้าชม
มี Visual SEO Studio และ WildShark SEO Spider Tool ซึ่งเป็นทางเลือกฟรีแวร์สำหรับ Screaming Frog
06. การขนถ่ายทรัพย์สิน
ด้วยเหตุนี้ เราหมายถึงการแยกเนื้อหา เช่น CSS รูปภาพ ฯลฯ ออกจากเซิร์ฟเวอร์หลัก และอาศัยเซิร์ฟเวอร์อื่นในการโหลด
ซึ่งจะลดการพึ่งพาเซิร์ฟเวอร์หลักเพียงเครื่องเดียว โดยการโหลดไปยังเซิร์ฟเวอร์อื่น ซึ่งจะช่วยลดเวลาในการโหลดหน้า
การแบ่งปันคือการเอาใจใส่อย่างแท้จริง
เรายังแนะนำด้านขนถ่ายบางส่วนตามความต้องการของคุณ:
- Flikr , Smugmug , 5– รูปภาพ
- Google Feedburner – RSS
- แบบสำรวจ – SurveyMonkey มีเพียงไม่กี่ชื่อเท่านั้น
คุณยังสามารถใช้ประโยชน์จากโฮสติ้งเฉพาะซึ่งมีราคาแพงกว่าเล็กน้อย แต่ให้ความเร็วมากกว่าโฮสติ้งที่ใช้ร่วมกัน
07. การเพิ่มประสิทธิภาพเซิร์ฟเวอร์
การเลือกเซิร์ฟเวอร์ที่ดีกว่าด้วย RAM และขนาดแคชที่มากกว่านั้นจำเป็นต้องปรับปรุงดัชนีประสิทธิภาพ
การอัปเดตซอฟต์แวร์เป็นประจำและการสร้างมิเรอร์ทำหน้าที่ช่วยปรับสมดุลการเสิร์ฟระหว่างเสิร์ฟเพื่อให้เข้าถึงได้เร็วขึ้น
08. การใช้งานปลั๊กอิน
ปลั๊กอินที่ไม่จำเป็นไม่เพียงแต่ตกเป็นเหยื่อของการล่มของเซิร์ฟเวอร์หลายเครื่องเท่านั้น และใช้เวลาในการโหลดนานขึ้น
การเปลี่ยนแปลงหรือองค์ประกอบที่ "ยอดเยี่ยม" ที่คุณเห็นในเว็บไซต์ "นั้น" อาจไม่ใช่ตัวเลือกที่เหมาะสมสำหรับคุณเสมอไป
เลือกองค์ประกอบของคุณอย่างชาญฉลาด
09 การแก้จุดบกพร่อง
นักเขียนโค้ดระวัง! พวกคุณจะเกี่ยวข้องกับสิ่งนี้อย่างสมบูรณ์
แม้แต่ข้อผิดพลาดที่เล็กที่สุด การประมาณค่าเซมิโคลอนอาจส่งผลให้เกิดปัญหาการถ่ายโอนข้อมูลหน่วยความจำที่อาจหยุดทำงานทั้งไซต์และเซิร์ฟเวอร์
แสดงรหัสซ้ำๆ จนกว่าคุณจะแน่ใจว่าบรรทัดนั้นจะไม่ทำให้เกิดปัญหา และการใช้แอปพลิเคชันการดีบัก เช่น Microsoft Visual Studio จะช่วยคุณในระยะยาว
10. การทดสอบความเร็ว
หลายแพลตฟอร์มเสนอการทดสอบความเร็วที่ประเมินความเร็วในการโหลดของเว็บไซต์และกำหนดว่าเว็บไซต์ของคุณโหลดเร็วเพียงใดเมื่อเปรียบเทียบกับผู้อื่น
นอกจากนี้ยังช่วยให้ข้อมูลที่จำเป็นเกี่ยวกับปัญหาที่เกิดขึ้น และบางคนอาจให้คำแนะนำในการเปลี่ยนแปลงแง่มุมต่างๆ ของเว็บไซต์
ไซต์เช่น Pingdom , GTmetrix และบางแห่งเป็นต้น
หากคุณรู้สึกหนักใจ ให้หายใจเข้าลึกๆ นักพัฒนาในธุรกิจมูลค่าหลายพันล้านดอลลาร์เช่น Dropbox , Apple และ Microsoft ฯลฯ ได้ผ่านสิ่งเดียวกัน
มันจริงเหมือนจริง!
พวกเขาชดใช้แม้ในขณะนี้ด้วยการเพิ่มประสิทธิภาพที่เกิดขึ้นเป็นนาที พวกเขาไม่ต้องการทำซ้ำมนต์แห่งความสำเร็จ พวกเขาต้องการสร้างเพิ่มเติม
แน่นอน สำหรับผู้ที่ไม่เชี่ยวชาญด้านเทคโนโลยี เราแนะนำให้คุณรู้จักกับแพลตฟอร์มที่คุณสามารถจ้างงานภายนอกที่เกี่ยวข้องกับการเพิ่มประสิทธิภาพหน้าเว็บและอีกมากมาย
บริษัท Prime One Global ของเราจะดูแลเรื่องนี้ และในที่สุด คุณสามารถอวดเว็บไซต์ที่ตอบสนองความต้องการของลูกค้าและลูกค้าได้ หากต้องการเรียนรู้เพิ่มเติม เชื่อมต่อกับเรา [email protected] หรือ ping บนหน้า Facebook ของเรา
ก่อนที่คุณจะไป!
สิ่งเหล่านี้อาจฟังดูซับซ้อน แต่นั่นเป็นวิธีที่เว็บไซต์ทำงาน คุณจำเป็นต้องรู้เทคนิคที่เกี่ยวข้องกับการเพิ่มประสิทธิภาพขั้นสูง
เมื่อปัดเศษด้วยประเด็นสำคัญ ลูกค้าต้องการความเร็วในการโหลดที่เหมาะสมที่สุด และสำหรับสิ่งนั้น ให้ ยึดติดกับการออกแบบขั้นต่ำและเลือกรูปแบบรูปภาพตามการใช้งาน
แค่คิดจากมุมมองของผู้มาเยี่ยมที่คาดหวัง คุณจะรอเป็นเวลานานสำหรับเว็บไซต์ที่จะโหลดหรือไม่?
แน่นอนไม่
ความอดทนยังคงเป็นคุณธรรมในทุกวันนี้ แต่เมื่อเราอยู่ในโลกที่แปลงเป็นดิจิทัลในเกือบทุกด้านภายใน เพื่อที่จะก้าวไปข้างหน้า เราต้องยอมรับการเปลี่ยนแปลง