ฉันกำลังสร้างเว็บไซต์และฉันต้องการสร้างข้อความค้นหา HTTP ให้น้อยที่สุดเท่าที่จะทำได้เพื่อให้เว็บไซต์มีความเร็วและ SEO ที่ดีขึ้น หน้าที่ฉันเพิ่งสร้างคือการแสดงภาพบนหน้าจอเลื่อน (ภาพมีคุณลักษณะ data-scr ซึ่งถูกแปลงเป็น src เมื่อผู้ใช้เลื่อนลงที่ภาพตามลำดับ

เนื่องจากรูปภาพทั้งหมดมีdata-srcแอตทริบิวต์แทนsrcW3C จึงแสดงข้อผิดพลาดให้ฉัน

ในขณะนี้ฉันพบสองตัวเลือกเพื่อแก้ปัญหานี้:

1. src เริ่มต้นของภาพทั้งหมดเป็น URL ของภาพขนาด 1x1 ที่ว่างเปล่า
2. src เริ่มต้นของภาพทั้งหมดที่จะเป็นฐานข้อมูล 64 ภาพเปล่า

เมื่อฉันใช้ URL ของภาพ 1x1 เปล่าแล้ว (ทดสอบด้วย tools.pingdom.com) จะแสดงคำขอ HTTP 1 รายการ เมื่อฉันใช้ data base64 ภาพเปล่าแล้วมันจะแสดงคำขอมากเท่าจำนวนภาพในหน้า

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

แต่สำหรับ SEO

มีตัวเลือกอื่น ๆ อีกไหม?

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

ตัวอย่างเช่นภาพนี้จะมีขนาดประมาณ 95 ไบต์ ( https://commons.wikimedia.org/wiki/File:1x1.png ) สำหรับสตริงรูปภาพที่เข้ารหัส base64 คุณจะพบว่าขนาดจะอยู่ในขนาดเดียวกับภาพนี้ ขนาดไฟล์ แต่จะถูกทำซ้ำสำหรับทุก ๆ ภาพที่คุณเพิ่มเข้าไป

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

ไปกับ data URI อย่างแน่นอนเว้นแต่คุณต้องการการสนับสนุนสำหรับ IE <8 ( รองรับเบราว์เซอร์ )

ฝังจำนวนมากของภาพเล็ก ๆ โดยตรงในรูปแบบ HTML อาจจะดูว่ามันจะใช้เวลาถึงแบนด์วิดท์มากกว่าการเชื่อมโยงกับพวกเขาโดยตรง แต่เพิ่มขึ้นจะลดลงโดยgzip ; ความแตกต่างเพียงอย่างเดียวในขนาดของหน้าจะมาจากความแตกต่างของความยาวระหว่างURI ข้อมูลเดียวของภาพเปล่าและURL หนึ่งภาพบนเซิร์ฟเวอร์ของคุณ GIF ว่างเปล่าสามารถมีขนาดเล็กเป็น 43 ไบต์ เข้ารหัส 64 ฐานนั่นคือ 82 ไบต์ ไม่มีวิธีใดที่จะทำงานได้แย่กว่าคำขอ HTTP 500- ไบต์การตอบสนองที่มีขนาดใกล้เคียงกันจากนั้นฉันจะไม่ใช้ขนาดแพ็คเก็ต TCP และค่าใช้จ่ายอื่น ๆ

นี่คืออิมเมจ GIF 43 43 บิตที่เข้ารหัส 64 ฐาน

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

สำหรับ SEO ลองดูที่ซอร์สโค้ดของเว็บไซต์Googleเช่นGoogle Newsและค้นหาdata:image/gif,base64...

ในขณะนี้ฉันพบสองตัวเลือกเพื่อแก้ปัญหานี้: src เริ่มต้นของภาพทั้งหมดเป็นฐานข้อมูล 64 ภาพเปล่า

ตัวเลือกนี้ไม่เพียง แต่ต้องใช้เบราว์เซอร์ที่ทันสมัย ​​แต่มันอาจช้าลงในฝั่งไคลเอ็นต์เนื่องจากเบราว์เซอร์จะต้องถอดรหัส 64 ฐานข้อมูลภาพเพื่อสร้างภาพ

src เริ่มต้นของภาพทั้งหมดเป็น URL ของภาพขนาด 1x1 ที่ว่างเปล่า

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

แนวคิดที่เกือบสมบูรณ์แบบคือสิ่งนี้ ...

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

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

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

<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>

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

ภาพเพราะการบำรุงรักษา

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

มันจะง่ายมากในการรักษารหัสถ้าคุณใช้ภาพโปรขั้นต่ำสุดของไม่หนักถึงนี้

วิธีการเกี่ยวกับเพียง ~ 3 ไบต์พิเศษ 0 ร้องขอ http พิเศษ 0 และ 0 ความยาว img src เพิ่มเติม (หรือ 0 ตัวยึดภาพข้อมูลที่ไม่ว่าง 0) คุณสามารถใช้ src เปล่าสำหรับภาพได้ไหม?

<img src data-src="banannanannas.jpg" />

และหากพวกเขามีaltแท็กคุณสามารถซ่อนพวกเขาจากข้อผิดพลาด / ภาพล้มเหลว:

<img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" />

แสดงผล: ไม่มีอะไร การแฮ็กนอกแท็ก alt มีความล่าช้าเล็กน้อยเล็กน้อยจากขอบตัวยึดภาพ บางทีก็สามารถล้างออกได้เช่นกัน