เมื่อแบนด์วิธเพิ่มขึ้น ก็มีออบเจ็กต์บนหน้าเว็บเพิ่มมากขึ้นเรื่อยๆ ดังนั้นการเร่งความเร็วในการเปิดหน้าเว็บจึงยังคงเป็นปัญหาสำคัญ มีสามวิธีในการเร่งความเร็วในการเปิดหน้าเว็บ วิธีหนึ่งคือการเพิ่มแบนด์วิธเครือข่าย วิธีที่สองคือเพิ่มประสิทธิภาพเครื่องภายในของผู้ใช้ และวิธีที่สามคือเพิ่มประสิทธิภาพหน้าเว็บในระดับหนึ่งโดยนักออกแบบเว็บไซต์ บทความนี้มาจากมุมมองของนักออกแบบเว็บไซต์และแบ่งปันเคล็ดลับในการเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บ
1. ปรับภาพให้เหมาะสม
แทบไม่มีหน้าเว็บใดที่ไม่มีภาพ หากคุณเคยเจอยุคแมว 56,000 ตัว คุณจะไม่ชอบเว็บไซต์ที่มีรูปภาพเยอะ เพราะการโหลดหน้าเว็บดังกล่าวจะใช้เวลานาน
แม้ว่าตอนนี้แบนด์วิธของเครือข่ายจะดีขึ้นมาก และแมวจำนวน 56,000 ตัวก็ค่อยๆ หายไป ยังคงจำเป็นต้องปรับภาพให้เหมาะสมเพื่อเพิ่มความเร็วให้กับหน้าเว็บ
การปรับรูปภาพให้เหมาะสมรวมถึงการลดจำนวนรูปภาพ ลดคุณภาพของรูปภาพ และการใช้รูปแบบที่เหมาะสม
1. ลดจำนวนรูปภาพ: ลบรูปภาพที่ไม่จำเป็นออก
2. ลดคุณภาพของภาพ: หากไม่จำเป็น ให้ลองลดคุณภาพของภาพ โดยเฉพาะในรูปแบบ jpg คุณภาพที่ลดลง 5% อาจดูเหมือนไม่เปลี่ยนแปลงมากนัก แต่ขนาดไฟล์ที่เปลี่ยนแปลงนั้นค่อนข้างใหญ่
3. ใช้การจัดรูปแบบที่เหมาะสม: ดูจุดถัดไป
ดังนั้นคุณต้องแก้ไขรูปภาพก่อนอัปโหลด หากคุณคิดว่า Photoshop ยุ่งยากเกินไป คุณสามารถลองใช้เครื่องมือแก้ไขรูปภาพออนไลน์ได้ ขี้เกียจเกินกว่าที่จะแก้ไขแต่ต้องการใส่เอฟเฟ็กต์พิเศษให้กับรูปภาพของคุณหรือไม่? คุณสามารถลองเรียกจาวาสคริปต์เพื่อให้ได้เอฟเฟกต์ภาพ
2. การเลือกรูปแบบรูปภาพ
โดยทั่วไปมี 3 รูปแบบที่ใช้บนหน้าเว็บ ได้แก่ jpg, PNG และ GIF ตัวชี้วัดทางเทคนิคเฉพาะของทั้งสามรูปแบบไม่ใช่เนื้อหาของบทความนี้ ใช้เมื่อใด เพื่อลดเวลาในการโหลดหน้าเว็บ
1. JPG: โดยทั่วไปใช้เพื่อแสดงผลงานภาพถ่ายทิวทัศน์ ผู้คน และภาพถ่ายเชิงศิลปะ บางครั้งใช้ในหน้าจอคอมพิวเตอร์
2. GIF: ให้สีน้อยลงและสามารถใช้ในสถานที่ที่มีความต้องการสีไม่สูง เช่น โลโก้ของเว็บไซต์ ปุ่ม อีโมติคอน ฯลฯ แน่นอนว่าแอปพลิเคชั่นที่สำคัญของ gif ก็คือภาพเคลื่อนไหว เหมือนภาพสะท้อนที่สร้างด้วย Lunapic
3. PNG: รูปแบบ PNG สามารถให้พื้นหลังโปร่งใสและเป็นรูปแบบภาพที่ประดิษฐ์ขึ้นเป็นพิเศษสำหรับการแสดงหน้าเว็บ โดยทั่วไปใช้บนหน้าเว็บที่ต้องการการแสดงพื้นหลังโปร่งใสหรือข้อกำหนดคุณภาพของภาพสูง
3. เพิ่มประสิทธิภาพ CSS
สไตล์ชีทแบบเรียงซ้อนทำให้หน้าเว็บโหลดได้อย่างมีประสิทธิภาพมากขึ้น และปรับปรุงประสบการณ์การท่องเว็บ เมื่อใช้ CSS คุณจะเลิกใช้เค้าโครงตารางได้
แต่บางครั้งเราใช้ถ้อยคำที่มากกว่านี้เมื่อเขียน CSS เช่น ประโยคนี้:
margin-top: 10px;
ขอบขวา: 20px;
ขอบล่าง: 10px;
ขอบซ้าย: 20px;
คุณสามารถย่อเป็น:
ขอบ: 10px 20px 10px 20px;
หรือประโยคนี้:
＜p class="decorated">ย่อหน้าของข้อความที่ตกแต่งแล้ว</p>
＜p class="ตกแต่ง">ย่อหน้าที่สอง＜/p>
＜p class="ตกแต่ง">ย่อหน้าที่สาม＜/p>
＜p class="decorated">Forth ย่อหน้า ＜/p>
สามารถรวมเข้ากับ div:
＜div class="decorated">
＜p>ย่อหน้าของข้อความที่ตกแต่งแล้ว＜/p>
＜p>ย่อหน้าที่สอง＜/p>
＜p>ย่อหน้าที่สาม＜/p>
＜p>ย่อหน้าที่สี่＜/p>
＜/div>
การลดความซับซ้อนของ CSS สามารถลบแอตทริบิวต์ที่ซ้ำซ้อนและปรับปรุงประสิทธิภาพการดำเนินงานได้ หากคุณขี้เกียจเกินไปที่จะลดความซับซ้อนของ CSS หลังจากเขียนแล้ว คุณสามารถใช้เครื่องมือ CSS แบบง่ายทางออนไลน์บางอย่างได้ เช่น CleanCSS
4. เพิ่มเครื่องหมายทับหลัง URL
เช่น เมื่อเซิร์ฟเวอร์ได้รับคำขอที่อยู่ดังกล่าว การพิจารณาประเภทไฟล์ตามที่อยู่นี้ต้องใช้เวลา หากเว็บเป็นไดเร็กทอรี คุณอาจเพิ่มเครื่องหมายสแลชเพิ่มเติมหลัง URL เพื่อเปลี่ยนเป็น / เพื่อให้เซิร์ฟเวอร์สามารถทราบได้อย่างชัดเจนว่าต้องการเข้าถึงดัชนีหรือไฟล์เริ่มต้นในไดเร็กทอรี จึงช่วยประหยัด เวลาโหลด
5. การทำเครื่องหมายความสูงและความกว้าง
เป็นสิ่งสำคัญมาก แต่หลายคนมักเพิกเฉยต่อความเกียจคร้านหรือเหตุผลอื่น ๆ เมื่อคุณเพิ่มรูปภาพหรือตารางลงในเว็บเพจ คุณควรระบุความสูงและความกว้างของรูปภาพหรือตาราง ซึ่งก็คือพารามิเตอร์ความสูงและความกว้าง หากเบราว์เซอร์ไม่พบพารามิเตอร์ทั้งสองนี้ จะต้องคำนวณขนาดขณะดาวน์โหลดรูปภาพ หากมีรูปภาพจำนวนมาก เบราเซอร์จำเป็นต้องปรับหน้าอย่างต่อเนื่อง สิ่งนี้ไม่เพียงส่งผลต่อความเร็ว แต่ยังส่งผลต่อประสบการณ์การท่องเว็บด้วย
ต่อไปนี้เป็นโค้ดรูปภาพที่ค่อนข้างเป็นมิตร:
<img id="moon" height="200" width="450" src=" />
เมื่อเบราว์เซอร์ทราบพารามิเตอร์ความสูงและความกว้าง แม้ว่ารูปภาพจะไม่สามารถแสดงได้ก็ตาม ชั่วคราว หน้าเว็บจะเพิ่มพื้นที่ว่างสำหรับรูปภาพ จากนั้นจึงโหลดเนื้อหาต่อไปนี้ต่อไป ส่งผลให้เวลาในการโหลดเร็วขึ้นและประสบการณ์การเรียกดูดีขึ้น
6.
ลดคำขอ http
หน้าเว็บเบราว์เซอร์จะออกคำขอวัตถุจำนวนมาก (รูปภาพ) สคริปต์ ฯลฯ ) ขึ้นอยู่กับความล่าช้าของเครือข่ายแต่ละวัตถุจะล่าช้าหากมีวัตถุจำนวนมากบนหน้าเว็บอาจใช้เวลานานมาก ของเวลา
ดังนั้น จะลด
ภาระของคำขอ http
ได้อย่างไร 2.รวม
รูปภาพสองรูปที่อยู่ติดกันเป็นอันเดียว
ให้ดูที่โค้ดต่อไปนี้
＜link rel="stylesheet" type="text/css" href="/body.css" />
＜ลิงค์ rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
เราสามารถรวมเป็นหนึ่งเดียว:
＜link rel="stylesheet" type="text/css" href="/style .css" />
จึงช่วยลดคำขอ http
7. เคล็ดลับอื่นๆ (เพิ่มโดยนักแปล)
1. ลบส่วนเสริมที่ไม่จำเป็นออก
2. หากวิดเจ็ตจากเว็บไซต์อื่นถูกฝังไว้บนหน้าเว็บ หากคุณมีทางเลือก โปรดแน่ใจว่าได้เลือกอันที่มีความเร็วที่รวดเร็ว
3. ลองใช้รูปภาพแทนแฟลชซึ่งดีต่อ SEO เช่นกัน
4. หากเนื้อหาบางส่วนสามารถทำให้คงที่ได้ ให้ทำให้เนื้อหาคงที่เพื่อลดภาระบนเซิร์ฟเวอร์
5. รหัสทางสถิติจะอยู่ท้ายหน้า