นักออกแบบเว็บไซต์ควรเพิ่มประสิทธิภาพเว็บเพจจากสามด้าน

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

1. เพิ่มประสิทธิภาพรูปภาพ

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

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

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

1. ลดจำนวนรูปภาพ: ลบรูปภาพที่ไม่จำเป็น

2. ลดคุณภาพของภาพ: หากไม่จำเป็นต้องพยายามลดคุณภาพของภาพโดยเฉพาะอย่างยิ่งรูปแบบ JPG

3. ใช้รูปแบบที่เหมาะสม: ดูจุดถัดไป

ดังนั้นก่อนที่จะอัปโหลดรูปภาพคุณต้องแก้ไขรูปภาพ คุณขี้เกียจเกินไปที่จะแก้ไข แต่ต้องการรูปภาพที่จะมีเทคนิคพิเศษหรือไม่? คุณสามารถลองใช้การโทร JavaScript เพื่อใช้เอฟเฟกต์พิเศษของภาพ

2. การเลือกรูปแบบภาพ

มีรูปแบบรูปภาพสามรูปที่ใช้ในหน้าเว็บคือ JPG, PNG และ GIF เวลาของหน้าเว็บ

1. JPG: ภาพถ่ายที่ใช้โดยทั่วไปเพื่อแสดงภูมิทัศน์ตัวละครและภาพถ่ายศิลปะ บางครั้งก็ใช้กับภาพหน้าจอคอมพิวเตอร์

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

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

3. เพิ่มประสิทธิภาพ CSS

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

แต่บางครั้งเมื่อเราเขียน CSS เราใช้ประโยคที่มีคำมากขึ้นเช่นประโยคนี้:

ระยะขอบด้านบน: 10px;
มาร์จิ้น-ขวา: 20px;
มาร์จิ้น-ก้น: 10px;
ขอบซ้าย: 20px;

คุณสามารถทำให้ง่ายขึ้นเป็น:

มาร์จิ้น: 10px 20px 10px 20px;

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

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

คุณสามารถใช้ DIV เพื่อรวม:

＜div class = "ตกแต่ง">
＜p> ย่อหน้าของข้อความที่ตกแต่ง ＜/p>
＜p> ย่อหน้าที่สอง ＜/p>
＜p> ย่อหน้าที่สาม ＜/p>
＜p> วรรค ＜/p>
＜/div>

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

4. เพิ่มสแลชที่ด้านหลังของ URL

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

V. ระบุความสูงและความกว้าง

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

นี่คือรหัสรูปภาพที่ค่อนข้างเป็นมิตร:

＜img id = "moon" ความสูง = "200" width = "450" ​​src = " />

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

6. ลดคำขอ HTTP

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

ดังนั้นเราจำเป็นต้องลดภาระในคำขอ HTTP วิธีลดภาระ?

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

2. รวมสองภาพใกล้เคียงเป็นภาพเดียว

3. ผสาน CSS

ดูรหัสต่อไปนี้และคุณต้องโหลด 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. รหัสสถิติถูกวางไว้ที่ส่วนท้ายของหน้า