การเพิ่มประสิทธิภาพทั่วไปเพื่อลดขนาดหน้า HTML หรือ XHTML?

การเพิ่มประสิทธิภาพทั่วไปมีอะไรบ้างเพื่อลดขนาดหน้า HTML หรือ XHTML บางคนที่เข้ามาในใจคือ:

• ลบความคิดเห็น
• ลบช่องว่างภายนอก
• การย้ายสไตล์อินไลน์ซ้ำไปยังสไตล์ชีท CSS
• เป็นต้น

บางคนมีอะไรบ้าง ข้อเสนอไหนที่ใหญ่ที่สุดสำหรับการจ่ายเงินหรือสามารถทำได้โดยอัตโนมัติด้วยเครื่องมือหรือโมดูล?

Google ได้สรุปและอธิบายข้อเสนอแนะของพวกเขาเพื่อลดขนาดของภาระที่น้อยที่สุด พวกเขารวมถึงเทคนิคต่อไปนี้:

1. เปิดใช้งานการบีบอัด
2. ลบ CSS ที่ไม่ได้ใช้
3. ลดขนาด JavaScript
4. ลดขนาด CSS
5. ลดขนาด HTML
6. เลื่อนการโหลด JavaScript
7. ปรับภาพให้เหมาะสม
8. แสดงภาพที่ปรับขนาดแล้ว
9. ให้บริการทรัพยากรจาก URL ที่สอดคล้องกัน

ข้อเสนอแนะเหล่านี้เป็นส่วนหนึ่งของโอเพนซอร์ส Firefox / Firebug เพิ่มในโครงการที่เรียกว่าความเร็วหน้า คล้ายกับปลั๊กอินYSlowของ Yahoo! Add-on ของ Page Speed ​​จริงจะตรวจสอบการเพิ่มประสิทธิภาพมากกว่ารายการอธิบายในรายละเอียด คำแนะนำในการใช้ Page Speed ​​จะถูกนำเสนอด้วย

แนวทางปฏิบัติที่ดีที่สุดของ Yahoo! เพื่อเร่งเว็บไซต์ของคุณระบุชุดของแนวปฏิบัติที่เหมาะสม:

1. ลดการร้องขอ HTTP ให้น้อยที่สุด
2. ใช้เครือข่ายการจัดส่งเนื้อหา
3. เพิ่ม Expires หรือ Cader-Control Header
4. ส่วนประกอบ Gzip
5. ใส่สไตล์ชีตไว้ด้านบน
6. ใส่สคริปต์ที่ด้านล่าง
7. หลีกเลี่ยงการแสดงออก CSS
8. ทำ JavaScript และ CSS ภายนอก
9. ลดการค้นหา DNS
10. ...

(รายการของ Yahoo! มีความยาว ~ 35 รายการไม่จำเป็นต้องอ้างถึงทั้งหมด)

ทั้งYSlow (ลิงค์รูปภาพ) และPage Speed (ลิงค์รูปภาพ) จะช่วยให้คุณเรียกใช้การทดสอบในหน้าของคุณแนะนำสิ่งที่คุณสามารถทำได้และแสดงให้คุณเห็นว่ามีการใช้งานอะไรบ้างจากคำแนะนำของพวกเขา

มีคนกำลังจะบอกว่ามาร์กอัปควรเป็น Gzipped ดังนั้นฉันก็อาจจะเป็นคนเช่นกัน

นี่คือคำอธิบายที่มีความยาวของสิ่งที่Gzipคือมีการเชื่อมโยงเกี่ยวกับวิธีการตั้งค่าในApacheและIIS

บทความเกี่ยวกับ WebReferenceระบุว่าคุณจะพบว่าการเพิ่มประสิทธิภาพต่อไปนี้เมื่อใช้โมดูล mod_gzip อาปาเช่

โดยทั่วไปแล้วเว็บมาสเตอร์จะเห็นประสิทธิภาพของเว็บเซิร์ฟเวอร์เพิ่มขึ้น 150-160% และลดแบนด์วิดท์ HTML / XML / JavaScript ที่ใช้ไป 70% - 80% โดยใช้โมดูลนี้ การประหยัดแบนด์วิดท์โดยรวมอยู่ที่ประมาณ 30 ถึง 60%

มันอาจจะไม่คุ้มค่า

ฉันได้เล่นกับการลบช่องว่างใน HTMLเล็กน้อยและเห็นเพียงลดขนาด 10% ในการบรรจุหลังจาก gzipping

ตามความเป็นจริงการลบพื้นที่ว่างและ linefeed กำลังทำงานที่การบีบอัดจะทำเพื่อเรา เรากำลังเพิ่มประสิทธิภาพการช่วยเหลือมนุษย์:

                  บีบอัดดิบ
CSS ที่ไม่ได้เพิ่มประสิทธิภาพ 2,299 ไบต์ 671 ไบต์
CSS ที่ได้รับการปรับปรุง 1,758 ไบต์ 615 ไบต์

(ใช่นี่บอกว่า CSS แต่กฎพื้นฐานเดียวกันนี้ใช้กับ HTML เช่นกัน)

ปัญหาคือ,

1. GZIP กำลังทำ 90% ของงานให้คุณดังนั้นนี่เป็นการเพิ่มประสิทธิภาพขนาดจิ๋ว ฉันหมายถึงบางทีถ้าคุณเป็น Google หรือ Yahoo
2. การลดขนาดเพิ่มเติม 10% นั้นมาจากค่าใช้จ่ายที่ค่อนข้างสูงของ HTML ที่ไม่สามารถอ่านได้อย่างสมบูรณ์ใน "แหล่งที่มาของการดู"

ตกลงชื่อเล็ก: เก็บชื่อแท็กและแอตทริบิวต์เป็นตัวพิมพ์เล็กและสอดคล้องกัน (เป็นเอกสารมาตรฐานโดยวิธี) มันจะเพิ่มอัตราส่วนการบีบอัดโดยเปอร์เซ็นต์หรือสอง

หากคุณเป็นเว็บไซต์ที่มีปริมาณมากคุณอาจต้องการพิจารณาใช้รหัสเอนทิตี้ของ super-short และชื่อคลาสเนื่องจากสิ่งเหล่านี้จะลดขนาดของทั้งหน้า HTML และหน้า CSS ที่ใช้ในการกำหนดสไตล์

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

ในความเป็นจริงการเพิ่มประสิทธิภาพเหล่านี้มีการคืนทุนที่ จำกัด อย่างมาก (และสำหรับกลยุทธ์การแบ่งหน้าข้อเสีย SEO ที่มีศักยภาพ) เพื่อให้คุ้มค่าสำหรับเว็บไซต์ที่ไม่อยู่ในหมวดหมู่การเข้าชมเดียวกับ Google เพียงทำตามคำแนะนำของ jessegavinเพื่อเปิดใช้งานการบีบอัด GZip / Deflate และใช้งานได้

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

ดูhttp://css-tricks.com/css-spritesสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรวมภาพ

นอกจากนี้ตรวจสอบการปิดคอมไพเลอร์จาก Google ฉันไม่ได้ใช้มัน แต่อ้างว่าให้ดาวน์โหลด javascript และทำงานได้เร็วขึ้น

ดังที่คนอื่น ๆ ได้กล่าวไว้ประโยชน์ที่ใหญ่ที่สุดมาจาก gzipping

ตรวจสอบให้แน่ใจว่าคุณใช้องค์ประกอบ HTML ที่เหมาะสม แทนการใช้<div class="page-title">Hello World</div><h1>Hello World</h1>

และสิ่งที่ชัดเจนคืออย่าใช้ตารางสำหรับการจัดวาง! ใช้ระบบกริดอย่างง่ายเช่น 960.gs (หรือหมุนรุ่นไลต์ของคุณเอง) อาจมีความแตกต่างอย่างมากระหว่างขนาด HTML โดยเฉพาะกับตารางที่ซ้อนกัน เปรียบเทียบ:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

และ

<div class="colSmall">...</div>
<div class="colLarge">...</div>

หากคุณกำลังใช้เว็บไซต์ ASP.NET ต้องระวังของViewState มันสามารถสร้างเขตข้อมูลที่ซ่อนอยู่ขนาดใหญ่มากในหน้ามากเกินไปมันมักจะไม่จำเป็น (มันเกิดขึ้นกับฉันแล้วว่า ViewState หนักกว่าส่วนที่เหลือของหน้า)
มันเป็นเรื่องจริงโดยเฉพาะอย่างยิ่งถ้าคุณใช้ AJAX เนื่องจาก ViewState จะถูกส่งไปมาทุกครั้งที่มีการร้องขอทำให้เว็บไซต์ของคุณช้าลงและเพิ่มปริมาณการเข้าชม

การแก้ปัญหาอยู่ในรหัส. netว่า

มีเครื่องมือวิเคราะห์และเพิ่มประสิทธิภาพเว็บฟรีมากมาย คุณสามารถรวบรวมรายการตรวจสอบขนาดใหญ่ของคุณเองจากรายงานที่พวกเขาสร้าง

ต่อไปนี้คือจุดที่ถอดความสองส่วนจากการประเมินประสิทธิภาพ Zoompf -

• หลีกเลี่ยงเนื้อหา (ภาพ) ที่สร้างขึ้นแบบไดนามิก พิจารณาการวาดหรือปรับขนาดภาพออฟไลน์เป็นไฟล์ภาพคงที่แทน
• หลีกเลี่ยงการใช้แท็กรูปภาพที่ไม่มีขนาด
• Google Analytics (& Ads) รองรับการโหลดไฟล์ JavaScript แบบอะซิงโครนัส ในกรณีที่คุณใช้พวกเขาคุณสามารถเลือกที่จะโหลดแบบอะซิงโครนัส

กลยุทธ์ที่มักถูกมองข้ามคือการลบรหัส HTML ที่ไม่จำเป็นออกจากหน้าเว็บ

สำหรับโครงการใดก็ตามคุณจะต้องตัดสินใจว่าจะใช้กลยุทธ์ใดในการใช้งานตามเวอร์ชัน (X) HTML ที่คุณใช้และวิธีการใช้งานเว็บไซต์

(เห็นได้ชัดว่าฉันไม่สามารถโพสต์ไฮเปอร์ลิงก์ได้มากกว่าหนึ่งคำตอบเนื่องจากฉันเป็นผู้ใช้ใหม่ดังนั้น URL เหล่านี้จะต้องคัดลอกและวาง ... ฉันหวังว่าจะเป็นเพียว ๆ )

• ใน HTML4 และ HTML5 สำหรับองค์ประกอบหลายอย่างไม่จำเป็นต้องใช้แท็กปิด ไม่จำเป็นต้องใช้แท็กเปิดสำหรับองค์ประกอบร่างกาย ดู:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• สามารถละเว้นโพรโทคอล (http :) ส่วนหนึ่งของ URL HTTP ได้

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• ด้วยแท็กเช่น <br> คุณสามารถออกจากเครื่องหมายทับที่ใช้ในไวยากรณ์ XHTML (<br />) เว้นแต่ว่าคุณจำเป็นต้องใช้ XHTML

• นี่คือตัวอย่างของโครงสร้างเอกสาร HTML ขนาดเล็ก:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

บางคนบอกว่ามัน แต่พวกเขาไม่ได้ชนจุดกลับบ้านอย่างเพียงพอ: gzipping

1. ไม่มีความพยายามหรือข้อเสียเปรียบ
2. จากประสบการณ์ที่ จำกัด ของฉันลดขนาด HTML ลงระหว่าง 60% ถึง 90%

การปรับแต่งอื่น ๆ ทั้งหมดที่คุณสามารถทำกับ HTML นั้นต้องใช้ความพยายาม / การบำรุงรักษามากขึ้นและแทบไม่มีผลใด ๆ เมื่อเทียบกับเพียงแค่การ gzipping และการลืม พวกเขาไม่คุ้มค่ากับเวลาเว้นแต่คุณเป็น Google คุณไม่ใช่ Google

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

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

/programming/728260/html-minification