เคล็ดลับบางประการในการปรับปรุงความเร็วในการเปิดหน้าเว็บ

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

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

;

margin-right: 20px

;

margin

-bottom: 10px;

10px 20px 10px 20px;

หรือประโยคนี้:

<p class="decorated">ย่อหน้าของข้อความที่ตกแต่ง</p>

<p class="decorated">ย่อหน้าที่สอง</p>

<p class= ”ตกแต่ง”>ย่อหน้าที่สาม </p>

<p class="decorated">ย่อหน้าที่สี่</p>

สามารถรวมอยู่ใน div:

<div class="decorated">

<p>ย่อหน้าของข้อความที่ตกแต่ง</p>

<p>ย่อหน้าที่สอง </p>

<p>ย่อหน้าที่สาม</p>

<p>ย่อหน้าที่สี่</p>

</div>

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

4. เพิ่มเครื่องหมายทับหลัง URL

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

5. การทำเครื่องหมายความสูงและความกว้าง

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

ต่อไปนี้เป็นโค้ดรูปภาพที่เป็นมิตร:

<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />

</p>

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

6. ลดคำขอ http

เมื่อผู้ดูเปิดเว็บเพจ เบราว์เซอร์จะออกคำขอออบเจ็กต์จำนวนมาก (รูปภาพ สคริปต์ ฯลฯ) การโหลดของแต่ละออบเจ็กต์จะล่าช้า ขึ้นอยู่กับความล่าช้าของเครือข่าย หากมีออบเจ็กต์จำนวนมากบนเพจ อาจใช้เวลานาน

ดังนั้นจึงจำเป็นต้องลดภาระในการร้องขอ http จะลดภาระได้อย่างไร?

1. กำจัดวัตถุที่ไม่จำเป็นออกไป

2. รวมรูปภาพสองรูปที่อยู่ติดกันเป็นภาพเดียว

3. รวม CSS

ดูโค้ดต่อไปนี้ที่ต้องโหลด:

<link rel=”stylesheet” type=”text/css” href=”/body.css” />

<link 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. รหัสทางสถิติจะอยู่ท้ายหน้า