01. ย่อคำขอ HTTP ให้เล็กสุด ลดคำขอ HTTP
รูปภาพ, CSS, สคริปต์, Flash ฯลฯ จะเพิ่มจำนวนคำขอ HTTP ถ้าเป็นไปได้ เขียน JS และ CSS หลายไฟล์ลงในไฟล์เดียว การเขียนรูปภาพลงในเพจโดยตรงถือเป็นแนวทางปฏิบัติที่ไม่ดี คุณควรเขียนลงใน CSS ใช้ CSS Sprite เพื่อประกอบรูปภาพขนาดเล็ก จากนั้นใช้พื้นหลังเพื่อค้นหาตำแหน่ง ใช้ "Image Map" (การวาง URL ที่แตกต่างกันบนภาพเดียวกันวิธีนี้สามารถลดจำนวนการร้องขอภาพได้ หลังจากการทดสอบเวลาในการรับ image map จะเร็วกว่าเวลาในการรับแต่ละภาพ 56% Image Map มีสองวิธี วิธีหนึ่งคือ "แผนที่รูปภาพฝั่งเซิร์ฟเวอร์" และอีกวิธีคือ "แผนที่รูปภาพฝั่งไคลเอ็นต์" การใช้งานฝั่งเซิร์ฟเวอร์คือการส่งพิกัด XY ที่ผู้ใช้คลิกไปยังเซิร์ฟเวอร์ จากนั้นเซิร์ฟเวอร์- ด้านข้างแมปการดำเนินการที่เกี่ยวข้อง ใช้แท็ก MAP ในเบื้องหน้า วิธีการแมปรูปภาพทำให้การบำรุงรักษาการเขียนโปรแกรมยากขึ้นมาก)
02. ใช้เครือข่ายการจัดส่งเนื้อหาโดยใช้เทคโนโลยี CDN
"เครือข่ายการจัดส่งเนื้อหา" มีวัตถุประสงค์เพื่อเผยแพร่เนื้อหาของเว็บไซต์ไปยังเครือข่าย "ขอบ" ที่ใกล้กับผู้ใช้มากที่สุดโดยการเพิ่มสถาปัตยกรรมเครือข่ายเลเยอร์ใหม่ให้กับอินเทอร์เน็ตที่มีอยู่
คุณสมบัติของ CDN:
1. การเร่งความเร็วแคชในเครื่อง - ปรับปรุงความเร็วการเข้าถึงเว็บไซต์องค์กร (โดยเฉพาะเว็บไซต์ที่มีรูปภาพและเพจคงที่จำนวนมาก) และปรับปรุงความเสถียรของเว็บไซต์ในลักษณะข้างต้นอย่างมาก
2. บริการมิเรอร์ – ขจัดผลกระทบของปัญหาคอขวดในการเชื่อมต่อโครงข่ายระหว่างผู้ให้บริการที่แตกต่างกัน ตระหนักถึงการเร่งความเร็วเครือข่ายข้ามผู้ให้บริการ และรับประกันว่าผู้ใช้ในเครือข่ายที่แตกต่างกันจะได้รับคุณภาพการเข้าถึงที่ดี
3. การเร่งความเร็วระยะไกล – ผู้ใช้ที่เข้าถึงจากระยะไกลเลือกเซิร์ฟเวอร์แคชอย่างชาญฉลาดและโดยอัตโนมัติโดยใช้เทคโนโลยีการปรับสมดุลโหลด DNS และเลือกเซิร์ฟเวอร์แคชที่เร็วที่สุดเพื่อเพิ่มความเร็วในการเข้าถึงระยะไกล
4. การเพิ่มประสิทธิภาพแบนด์วิธ – สร้างเซิร์ฟเวอร์ Mirror Cache ระยะไกลสำหรับเซิร์ฟเวอร์โดยอัตโนมัติ และอ่านข้อมูลจากเซิร์ฟเวอร์แคชเมื่อผู้ใช้ระยะไกลเข้าถึงข้อมูลดังกล่าว ลดแบนด์วิดท์ของการเข้าถึงระยะไกล แบ่งปันการรับส่งข้อมูลเครือข่าย และลดภาระบนเว็บเซิร์ฟเวอร์ไซต์ดั้งเดิม ฯลฯ
5. การป้องกันการโจมตีแบบคลัสเตอร์ – โหนด CDN ที่มีการกระจายอย่างกว้างขวางและกลไกการสำรองข้อมูลอัจฉริยะระหว่างโหนดสามารถป้องกันการบุกรุกของแฮ็กเกอร์ได้อย่างมีประสิทธิภาพ และลดผลกระทบของการโจมตี DDOS ต่างๆ บนเว็บไซต์ ในขณะเดียวกันก็รับประกันคุณภาพการบริการที่ดี
03. เพิ่ม Expires หรือ Cache-Control Header เพื่อตั้งค่า "การหมดอายุของไฟล์ส่วนหัว" หรือ "static cache"
เบราว์เซอร์ใช้แคชเพื่อลดจำนวนคำขอ HTTP และเพิ่มความเร็วในการโหลดหน้าเว็บ หากมีการเพิ่มเวลาหมดอายุที่ยาวนานไว้ที่ส่วนหัวของหน้า เบราว์เซอร์จะแคชองค์ประกอบในหน้าเว็บเสมอ อย่างไรก็ตาม หากมีบางสิ่งบนเพจเปลี่ยนแปลง จะต้องเปลี่ยนชื่อ ไม่เช่นนั้นไคลเอนต์จะไม่รีเฟรช
(1) แนวคิด
การควบคุมแคชใช้เพื่อควบคุมแคช HTTP (อาจไม่ได้ใช้งานบางส่วนใน HTTP/1.0 เฉพาะ Pragma: no-cache เท่านั้นที่ถูกนำมาใช้)
รูปแบบ: การควบคุมแคช: คำสั่งแคช
คำสั่งแคชสามารถเป็นดังต่อไปนี้:
ใช้เมื่อร้องขอ:
|. "ไม่มีแคช"
|. "ไม่มีร้านค้า"
|. “อายุสูงสุด” “=” เดลต้าวินาที
|. "สูงสุดค้าง" [ "=" เดลต้าวินาที ]
|. “นาทีสด” “=” เดลต้าวินาที
|. "ไม่แปลงร่าง"
|. "เฉพาะในกรณีที่แคช"
|. "ส่วนขยายแคช"
ใช้ในการตอบสนอง:
|. "สาธารณะ"
|. "ส่วนตัว" [ "=" <"> ชื่อฟิลด์ <"> ]
|. "ไม่มีแคช" [ "=" <"> ชื่อฟิลด์ <"> ]
|. "ไม่มีร้านค้า"
|. "ไม่แปลงร่าง"
|. "ต้องตรวจสอบอีกครั้ง"
|. "ตรวจสอบพร็อกซีอีกครั้ง"
|. “อายุสูงสุด” “=” เดลต้าวินาที
|. “s-maxage” “=” เดลต้าวินาที
|. "ส่วนขยายแคช"
คำอธิบายบางส่วน:
แบ่งตามว่าสามารถแคชได้หรือไม่
สาธารณะบ่งชี้ว่าการตอบสนองสามารถแคชได้ด้วยแคชใดๆ
ส่วนตัวระบุว่าข้อความตอบกลับทั้งหมดหรือบางส่วนสำหรับผู้ใช้คนเดียวไม่สามารถประมวลผลโดยแคชที่ใช้ร่วมกันได้ ซึ่งช่วยให้เซิร์ฟเวอร์สามารถอธิบายเฉพาะการตอบสนองบางส่วนจากผู้ใช้ที่ไม่ถูกต้องสำหรับคำขอของผู้ใช้รายอื่น
no-cache บ่งชี้ว่าไม่สามารถแคชคำขอหรือข้อความตอบกลับได้ (HTTP/1.0 ถูกแทนที่ด้วย no-cache ของ Pragma)
ขึ้นอยู่กับสิ่งที่สามารถแคชได้
no-store ใช้เพื่อป้องกันไม่ให้ข้อมูลสำคัญถูกเปิดเผยโดยไม่ได้ตั้งใจ การส่งไปในข้อความคำขอจะทำให้ทั้งข้อความคำขอและข้อความตอบกลับใช้แคช
อิงตามการหมดเวลาของแคช
อายุสูงสุดบ่งชี้ว่าไคลเอ็นต์สามารถรับการตอบกลับโดยมีอายุการใช้งานไม่เกินเวลาที่กำหนดในหน่วยวินาที
min-fresh บ่งชี้ว่าไคลเอนต์สามารถรับการตอบกลับด้วยเวลาตอบสนองน้อยกว่าเวลาปัจจุบันบวกกับเวลาที่กำหนด
max-stale บ่งชี้ว่าไคลเอ็นต์สามารถรับข้อความตอบกลับเกินระยะเวลาหมดเวลาได้ หากมีการระบุค่าสำหรับข้อความเก่าสุด ไคลเอนต์สามารถทำได้
รับข้อความตอบกลับที่อยู่ภายในระยะเวลาหมดเวลาที่กำหนด
Expires แสดงถึงเวลาที่มีอยู่ ทำให้ไคลเอ็นต์ไม่ต้องตรวจสอบ (ส่งคำขอ) ก่อนเวลานี้ ซึ่งเท่ากับอายุสูงสุด
ผล. แต่ถ้ามีอยู่ในเวลาเดียวกัน ก็จะถูกแทนที่โดยอายุสูงสุดของ Cache-Control
รูปแบบ: Expires = "Expires" /// HTTP-date
ตัวอย่างเช่น หมดอายุ: พฤหัสบดี 01 ธันวาคม 1994 16:00:00 GMT (ต้องอยู่ในรูปแบบ GMT)
(2) การสมัคร
ตั้งค่าหมดอายุและควบคุมแคชผ่าน HTTP META:
<meta http-equiv=”แคชควบคุม” content=”อายุสูงสุด=7200″ />
<meta http-equiv=”Expires” content=”จ., 20 ก.ค. 2552 23:00:00 GMT” />
การตั้งค่าข้างต้นเป็นเพียงตัวอย่างเท่านั้น และค่าใดค่าหนึ่งสามารถนำไปใช้ได้จริง หากเขียนในลักษณะนี้จะใช้ได้กับหน้าเว็บเท่านั้น และจะไม่นำไปใช้กับรูปภาพหรือคำขออื่น ๆ ในหน้าเว็บ และจะไม่ทำการแคชใดๆ นอกจากนี้ยังมีคำขอเพิ่มเติมจากไคลเอนต์ แม้ว่าจะเป็นการตรวจสอบสถานะที่แก้ไขล่าสุดเท่านั้น แต่คำขอที่เพิ่มขึ้นจะต้องมีผลกระทบต่อความเร็วในการเรียกดู
หากคุณต้องการเพิ่มแคชลงในไฟล์ คุณสามารถใช้โมดูล mod_expire ของ apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ) ซึ่งเขียนเป็น
<IfModule mod_expires.c>
หมดอายุเปิดใช้งานเมื่อ
ExpiresDefault "การเข้าถึงบวก 1 วัน"
</ถ้าโมดูล>
ฉันจำได้ว่า ExpiresActive ตั้งเป็น On ในตอนแรก ดูเหมือนว่า YSlow จะไม่พบกลไกการแคชไม่ว่าจะอย่างไรก็ตาม หากเพิ่มในลักษณะนี้ ระบบจะรวมไว้เป็นค่าเริ่มต้น หากคุณต้องการกำหนดเป้าหมายประเภท MIME แต่ละประเภท คุณสามารถ:
รูปภาพ ExpiresByType/gif “เข้าถึงบวก 5 ชั่วโมง 3 นาที”
นอกจากนี้ เมื่อคุณคลิกรีเฟรชบนเบราว์เซอร์ คำขอที่ส่งโดยไคลเอ็นต์ทั้งหมดจะมีอายุสูงสุด=0 ซึ่งบ่งชี้ถึงการดำเนินการตรวจสอบความถูกต้อง ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อตรวจสอบแคช จากนั้นจึงอัปเดตแคช โดยทั่วไปแล้ว คุณ รับ 304 Not Modified ซึ่งหมายความว่าไม่มีการเปลี่ยนแปลง
04. การบีบอัด Gzip Components Gzip
รูปแบบ Gzip เป็นเทคโนโลยีการบีบอัดที่ใช้กันทั่วไป เบราว์เซอร์เกือบทั้งหมดมีความสามารถในการขยายขนาดรูปแบบ Gzip และอัตราส่วนการบีบอัดที่สามารถบีบอัดได้นั้นใหญ่มากโดยมีอัตราการบีบอัดโดยทั่วไปอยู่ที่ 85% การบีบอัดหรือไม่คุณสามารถทดสอบได้ที่นี่
05. ใส่ Stylesheets ที่ด้านบน ใส่ CSS ที่ด้านบน
ใช้แท็ก LINK เพื่อวางสไตล์ชีตไว้ที่ HEAD ของเอกสาร เพื่อให้ผู้ดูสามารถดูรูปแบบทั้งหมดของเว็บไซต์ได้โดยเร็วที่สุด
หน้า HTML จะถูกแสดงผลทีละขั้นตอน เมื่อผู้ใช้เปิดหน้านั้น เราจำเป็นต้องคำนึงถึงประสบการณ์ของผู้ใช้ - ความเร็วในการเปิดหน้าเว็บ ข้อกำหนดแรกในการแสดงหน้าเว็บคือ HTML และ HTML ประกอบด้วย DIV ทีละรายการ และ CSS เป็นพื้นฐานของทุกสิ่ง
06. วางสคริปต์ที่ด้านล่าง ใส่ JS ที่ด้านล่าง
หลังจากที่เว็บไซต์แสดงผลแล้ว คุณสามารถตั้งค่าฟังก์ชันต่างๆ ได้ แน่นอนว่า JS เหล่านี้จะต้องไม่ส่งผลกระทบต่อประสิทธิภาพของเนื้อหาในระหว่างกระบวนการโหลดของคุณ
เนื่องจากเพจจะค่อยๆ แสดงผล เนื้อหาด้านล่างสคริปต์จะถูกบล็อก การแสดงผลหน้าเว็บจะไม่ดำเนินต่อไปจนกว่าสคริปต์จะโหลดเสร็จ ตำแหน่งที่ถูกต้อง
(1) สถานการณ์กรณีที่เลวร้ายที่สุด: วางสคริปต์ไว้ที่ด้านบน มันจะบล็อกการเรนเดอร์เนื้อหาในภายหลังและการดาวน์โหลดส่วนประกอบที่ตามมา
(2) สถานการณ์กรณีที่ดีที่สุด: วางสคริปต์ไว้ที่ด้านล่างสุด ไม่ได้ป้องกันเพจจากการแสดงผล
07. หลีกเลี่ยงนิพจน์ CSS หลีกเลี่ยงนิพจน์ CSS
นิพจน์ CSS แย่มาก สิ่งนี้ที่ IE รองรับเท่านั้นต้องใช้การคำนวณจำนวนมากเมื่อดำเนินการ มันจะถูกคำนวณใหม่ทุกครั้งที่คุณเลื่อนเมาส์ แต่บางครั้งสิ่งนี้จะต้องใช้เพื่อความเข้ากันได้ของเบราว์เซอร์
08. สร้าง JavaScript และ CSS ภายนอก
เราได้พูดคุยเกี่ยวกับการแคชก่อนหน้านี้ สำหรับ JS และ CSS ทั่วไปบางส่วน เราสามารถใช้ลิงก์ภายนอกได้ เช่น การลิงก์ไฟล์ Jquery จาก Google
09. ลดการค้นหา DNS ลดการค้นหา DNS
ลดทรัพยากรการโทรของเว็บไซต์จากภายนอก
อินเทอร์เน็ตค้นหาเซิร์ฟเวอร์ตามที่อยู่ IP DNS ก็มีค่าใช้จ่ายเช่นกัน ภายใต้สถานการณ์ปกติ เวลาที่เบราว์เซอร์ใช้ในการค้นหาที่อยู่ IP ของโฮสต์ที่กำหนดคือ 20~120ms เพื่อลดเวลาที่ใช้ในกระบวนการค้นหา DNS จำเป็นต้องใช้เทคนิคบางอย่างต่อไปนี้:
(1) แคช DNS
สามารถแคชการค้นหา DNS เพื่อปรับปรุงประสิทธิภาพได้ บนคอมพิวเตอร์ของผู้ใช้ หลังจากแก้ไขชื่อโฮสต์แล้ว ข้อมูล DNS ที่เกี่ยวข้องจะถูกจัดเก็บไว้ในแคช DNS ของระบบปฏิบัติการ ซึ่งสามารถลดเวลาที่ต้องใช้สำหรับการใช้งานในภายหลัง เบราว์เซอร์อื่นบางตัวยังมีฟังก์ชันแคช DNS ที่สอดคล้องกัน แต่จำนวน DNS ที่แคชไว้นั้นมีจำกัด โดยปกติระบบปฏิบัติการจะพิจารณาค่า TTL และเบราว์เซอร์จะละเว้นค่านี้และตั้งเวลาของตัวเอง
(2) ทีทีแอล
การแคช DNS ทำให้ระบบใช้งานบางส่วน และที่อยู่ IP ของเซิร์ฟเวอร์ก็ไม่จำเป็นต้องเปลี่ยนแปลงเสมอไป เซิร์ฟเวอร์สามารถระบุระยะเวลาที่บันทึกสามารถแคชได้ และบันทึก DNS ที่ส่งคืนโดยการค้นหามีค่า time-to-live (TTL) ที่ระบุระยะเวลาที่ไคลเอ็นต์สามารถแคชบันทึกได้ โดยทั่วไปสามารถกำหนดเป็น 1 วันได้
10. ย่อขนาด JavaScript และ CSS ลดขนาดของ JS และ CSS
มีทักษะในการเขียน JS และ CSS ใช้โค้ดน้อยที่สุดเพื่อให้ได้ฟังก์ชันเดียวกัน ลดช่องว่าง ปรับปรุงตรรกะ ใช้ตัวย่อ ฯลฯ แน่นอนว่ามีเครื่องมือมากมายที่สามารถช่วยให้คุณบรรลุเป้าหมายนี้ได้
11. หลีกเลี่ยงการเปลี่ยนเส้นทาง
เมื่อเขียนลิงก์อีกครั้ง แม้ว่าจะมีความแตกต่าง "/" สุดท้ายเพียงข้อเดียวระหว่าง "http://xxx.com" และ "http://xxx.com/" แต่ผลลัพธ์ก็แตกต่างกัน เซิร์ฟเวอร์ต้องใช้เวลาในการทำเช่นนั้น แปลงการเปลี่ยนเส้นทางเดิมเป็นอย่างหลังแล้วข้ามไป คุณต้องใส่ใจกับสิ่งนี้ คุณยังสามารถใช้ Alias หรือ mod_rewrite หรือ DirectorySlash ใน Apache เพื่อแก้ไขได้
นอกจากนี้ การใช้การเปลี่ยนเส้นทางยังรวมถึง: การเชื่อมต่อเว็บไซต์ต่างๆ การติดตามการเข้าชมเว็บไซต์ และการตกแต่ง URL
12. ลบสคริปต์ที่ซ้ำกัน ลบสคริปต์ที่ซ้ำกัน
เบราว์เซอร์จะไม่จดจำและเพิกเฉยต่อโค้ดที่ถูกเรียกซ้ำๆ แต่จะคำนวณอีกครั้ง ซึ่งแน่นอนว่าเป็นการสิ้นเปลืองครั้งใหญ่
13. กำหนดค่า ETags กำหนดค่า ETags
ฉันไม่รู้ว่าเกิดอะไรขึ้น แต่ฉันลบมันไปแล้วใน .htaccess
14. สร้าง Ajax Cacheable cache Ajax
Ajax ตอบสนองแบบเรียลไทม์ ก่อนที่เบราว์เซอร์จะได้รับข้อมูลใหม่ ข้อมูลเก่าจะถูกแคชไว้ ซึ่งสามารถปรับปรุงประสิทธิภาพได้ดีขึ้น
15. ล้างบัฟเฟอร์ตั้งแต่เนิ่นๆ ปล่อยบัฟเฟอร์ให้เร็วที่สุด
เมื่อผู้ใช้ส่งคำขอเพจ เซิร์ฟเวอร์ต้องใช้เวลา 200 ถึง 500 มิลลิวินาทีในการประกอบ HTML เขียนระหว่างส่วนหัวกับส่วนเนื้อหา และปล่อยบัฟเฟอร์ ด้วยวิธีนี้ ส่วนหัวของไฟล์จะถูกส่งออกไปก่อน จากนั้นจึงส่งออก สามารถส่งเนื้อหาไฟล์เพื่อปรับปรุงประสิทธิภาพได้
16. ใช้ GET สำหรับคำขอ AJAX ใช้ GET สำหรับคำขอ AJAX
เมธอด Get โต้ตอบกับเซิร์ฟเวอร์เพียงครั้งเดียว (ส่งข้อมูล) ในขณะที่โพสต์ต้องการการโต้ตอบสองครั้ง (ส่งส่วนหัวแล้วส่งข้อมูล)
17. ส่วนประกอบหลังโหลด ส่วนประกอบการโหลดแบบ Lazy
ขั้นแรกให้โหลดส่วนประกอบที่จำเป็นสำหรับการเริ่มต้นเพจ จากนั้นโหลดส่วนประกอบอื่นๆ วิธีการนำไปใช้อาจเป็น "ซ่อน IFRAME" หรือจาวาสคริปต์ "YUI Image Loader" เป็นตัวอย่างที่ดี
18. โหลดส่วนประกอบล่วงหน้า โหลดส่วนประกอบล่วงหน้า
การโหลดสิ่งต่าง ๆ ที่อาจใช้ในภายหลังไม่ขัดแย้งกับการโหลดแบบ Lazy Loading จุดประสงค์คือเพื่อให้การตอบสนองที่รวดเร็วยิ่งขึ้นต่อคำขอครั้งต่อไป
19. ลดจำนวนองค์ประกอบ DOM ลดจำนวนองค์ประกอบ DOM
โครงสร้างเพจที่ซับซ้อนหมายถึงเวลาในการดาวน์โหลดและตอบสนองนานขึ้น ส่งผลให้การแสดงผลเพจช้าลง การใช้แท็กอย่างสมเหตุสมผลและมีประสิทธิภาพมากขึ้นในการจัดโครงสร้างหน้าเป็นข้อกำหนดเบื้องต้นสำหรับส่วนหน้าที่ดี
20. แยกส่วนประกอบข้ามโดเมน
วัตถุประสงค์หลักคือเพื่อปรับปรุงความสามารถในการดาวน์โหลดแบบขนานของส่วนประกอบของเพจ แต่ระวังอย่าใช้ชื่อโดเมนมากกว่า 2-4 ชื่อมากเกินไปจะทำให้การค้นหา DNS ดังกล่าวข้างต้นสูญเปล่า IE สามารถขอโดเมนเดียวกันได้เพียงสองคำขอในเวลาเดียวกัน การนำไปใช้งานสามารถใช้เครือข่าย CDN หรือเครือข่ายคอมพิวเตอร์แบบกระจายอื่นๆ
21. ลดจำนวน iframes ให้เหลือน้อยที่สุด ลดจำนวน IFrames
IFrame ถือเป็นข้อห้ามสำหรับ SEO และจำเป็นต้องใช้ IFrame อย่างมีประสิทธิภาพมากขึ้น
ข้อดีของ IFrame: ดีสำหรับการดาวน์โหลดเนื้อหาของบุคคลที่สามที่ช้า เช่น โฆษณา แซนด์บ็อกซ์ความปลอดภัย สคริปต์การดาวน์โหลดแบบขนาน
ข้อเสียของ IFrame: แม้ว่าจะว่างเปล่า แต่ก็จะใช้ทรัพยากรจำนวนมากและป้องกันการโหลดหน้าเว็บ ซึ่งไม่มีความหมาย
22. ไม่มี 404 ไม่ปรากฏบนหน้า 404
หน้า 404 ปรากฏบนเว็บไซต์ (ไม่ใช่ผลการค้นหา) หน้า 404 ที่ไม่มีความหมายจะส่งผลต่อประสบการณ์ผู้ใช้และใช้ทรัพยากรเซิร์ฟเวอร์
23. ลดขนาดคุกกี้ ลดคุกกี้
คุกกี้มีการแลกเปลี่ยนระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ผ่านส่วนหัวของไฟล์ ซึ่งจะลดขนาดคุกกี้ให้มากที่สุดเท่าที่จะเป็นไปได้ และตั้งเวลาหมดอายุที่เหมาะสม ซึ่งสามารถปรับปรุงประสิทธิภาพได้อย่างมาก
24. ใช้โดเมนที่ไม่มีคุกกี้สำหรับส่วนประกอบ ใช้ชื่อโดเมนที่ไม่มีคุกกี้สำหรับส่วนประกอบ
การอ่านคุกกี้สำหรับส่วนประกอบแบบคงที่ถือเป็นการสิ้นเปลือง เป็นวิธีที่ดีในการใช้ชื่อโดเมนที่ไม่มีคุกกี้อื่นเพื่อจัดเก็บส่วนประกอบแบบคงที่ของคุณ หรือคุณสามารถจัดเก็บเฉพาะชื่อโดเมนที่มี www ในคุกกี้เท่านั้น
25. ลดการเข้าถึง DOM ให้เหลือน้อยที่สุด ลดจำนวนการเข้าถึง DOM
JS เข้าถึง DOM ได้ช้ามาก ดังนั้นพยายามอย่าใช้ JS เพื่อตั้งค่าเค้าโครงหน้า
26. พัฒนาตัวจัดการเหตุการณ์อัจฉริยะ พัฒนาตัวจัดการเหตุการณ์ที่ยืดหยุ่น
หากมีการเพิ่มองค์ประกอบในแผนผัง DOM มากเกินไปในตัวจัดการเหตุการณ์ ประสิทธิภาพการตอบสนองจะต่ำอย่างแน่นอน เครื่องมือเหตุการณ์ YUI มีวิธีการ onAvailable ที่สามารถช่วยให้คุณตั้งค่าตัวจัดการเหตุการณ์ DOM ได้อย่างยืดหยุ่น
27. เลือก <link> เหนือ @import ใช้ <link> แทน @import
การใช้ @import ใน IE เหมือนกับการใช้ <link> ที่ด้านล่างของหน้า
28. หลีกเลี่ยงตัวกรอง หลีกเลี่ยงการใช้ตัวกรอง
หากคุณต้องการความโปร่งใสของอัลฟ่า อย่าใช้ AlphaImageLoader เนื่องจากไม่มีประสิทธิภาพและใช้ได้กับ IE6 และต่ำกว่าเท่านั้น หากคุณต้องใช้ ให้เพิ่ม _filter เพื่อหลีกเลี่ยงผลกระทบต่อผู้ใช้ IE7+
29. ปรับภาพให้เหมาะสม ปรับภาพให้เหมาะสม
การแปลง GIF เป็น PNG8 เป็นวิธีที่ดีในการลดขนาด และมีหลายวิธีในการประมวลผลภาพ JPG และ PNG เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
30. เพิ่มประสิทธิภาพ CSS Sprites เพิ่มประสิทธิภาพ CSS Sprites
การจัดเรียงรูปภาพใน CSS Sprites ในแนวตั้งและกะทัดรัดที่สุดเท่าที่จะเป็นไปได้ และการจัดเรียงรูปภาพที่มีสีคล้ายกันร่วมกันมากที่สุดจะลดขนาดของรูปภาพและเพิ่มความเร็วในการแสดงรูปภาพบนหน้า
31. อย่าปรับขนาดรูปภาพในรูปแบบ HTML อย่าปรับขนาดรูปภาพในรูปแบบ HTML
ใช้ภาพขนาดใหญ่เท่าที่คุณต้องการอย่าขี้เกียจ
32. ทำให้ favicon.ico เล็กและแคชได้ ลดขนาดของ favicon.ico และแคช
ไม่ควรเปลี่ยน ICO ของเบราว์เซอร์ของเว็บไซต์บ่อยครั้ง ดังนั้นควรแคชไว้เป็นเวลานาน และทางที่ดีควรควบคุมให้ต่ำกว่า 1K
33. เก็บส่วนประกอบไว้ต่ำกว่า 25K
iPhone ไม่สามารถแคชส่วนประกอบที่สูงกว่า 25K ได้ และนั่นคือก่อนที่จะถูกบีบอัด
34. แพ็คส่วนประกอบลงในเอกสารหลายส่วน แพ็คส่วนประกอบลงในเอกสารที่มีหลายส่วน
เช่นเดียวกับการเพิ่มไฟล์แนบในอีเมล คำขอ HTTP ก็เพียงพอแล้ว แต่เทคนิคนี้ต้องได้รับการสนับสนุนจากพรอกซีของคุณ ซึ่ง iPhone ไม่รองรับ
รูปภาพอินไลน์:
ใช้ "data: รูปแบบ URL" เพื่อฝังข้อมูลรูปภาพในหน้าจริง สิ่งที่เรามักพบเห็นโดยทั่วไปคือ: http, ftp, mailto และโหมดอื่นๆ จริงๆ แล้ว data:โหมด URL ได้รับการเสนอมาตั้งแต่ปี 1995 ซึ่งหมายความว่าข้อมูลชิ้นเล็กๆ จะถูกรวมเข้ากับ URL ของลิงก์โดยตรง รูปแบบจะเป็นดังนี้: data: [<mediatype>][;base64],<data>
พารามิเตอร์แรกระบุรูปแบบไฟล์ เช่น รูปภาพ/gif
ขออภัย ขณะนี้ IE ไม่รองรับโหมดนี้ นอกจากนี้ขนาดข้อมูลยังมีจำกัดอีกด้วย
คำชี้แจง: เนื้อหามาจากอินเทอร์เน็ตและอ้างอิงจากบทความ 34 รายการของ Yahoo