ความเร็วในการโหลดไซต์ 4 ปัจจัยหลัก

ความเร็วในการโหลดไซต์ จะเพิ่มความเร็วในการดาวน์โหลดได้อย่างไร? ปัญหาหลัก.

ที่แนะนำ ความเร็วในการโหลดเว็บไซต์ Google - 2 วินาที. (และตอนนี้ดูความเร็วของคุณ)

(จะตรวจสอบความเร็วในการโหลดเว็บไซต์ได้อย่างไร?วิธีที่ง่ายที่สุดและเร็วที่สุดคือการเปิด เครื่องมือสำหรับนักพัฒนา CTRL+SHIFT+Iจากนั้นเลือกแท็บ "เครือข่าย" จากนั้นรีเฟรชหน้าเพื่อดูความเร็วในการดาวน์โหลดที่คุณต้องรีเฟรชหน้า รีเฟรชโดยไม่ใช้แคช: คุณต้องกด CTRL + F5 / CTRL + R และด้านล่างจะเป็นความเร็วในการดาวน์โหลด)

ตรวจสอบความเร็วในการโหลดเว็บไซต์
ใช้บริการจาก Google: PageSpeed ​​Insights

(อินโฟกราฟิกที่นำมาจาก seoprofy © 2014)

ประเด็นหลักที่ส่งผลกระทบมากที่สุด:

1. แคช
2. css (สไตล์)
3. JS (สคริปต์)
4. รูปภาพ (น้ำหนัก, ขนาด - ใช่, ขนาด HxW, ข้อมูลเมตา - ใช่ มีข้อมูลเช่นนี้ นี่คือข้อมูลของพวกเขา เช่น: วันที่ ชื่อ หัวข้อ ฯลฯ)

เพื่อไม่ให้เขียนข้อมูลที่ไม่จำเป็นมากมายเกี่ยวกับช่วงเวลาเล็ก ๆ ที่ไม่ส่งผลกระทบโดยเฉพาะหรือมีผลกระทบเล็กน้อย ฉันจะไม่เขียนเกี่ยวกับพวกเขา

#1 เงินสด

เก็บเอาไว้ (หรือแคช) เป็นบัฟเฟอร์ (สถานที่) ที่เก็บข้อมูลใด ๆ ในกรณีของเรา รูปภาพเหล่านี้ได้แก่ รูปภาพ รหัส ลักษณะ และอื่นๆ

ง่ายที่สุด สิ่งที่คุณทำเองได้คือ เปิดใช้งานการแคชบนโฮสติ้ง
(หากคุณมียูเครน.com.ua โฮสติ้ง คุณต้องไปที่ "การตั้งค่าไซต์" -> "การตั้งค่าพื้นฐาน" และจะมีรายการ "แคช" และที่นั่น คุณสามารถเลือกระยะเวลาที่ต้องการสำหรับไซต์ของคุณ ถูกแคช จากตัวฉันเอง ฉันแนะนำให้ตั้งค่าเป็น 2 สัปดาห์ - ด้วยระยะเวลาการแคชนี้ ข้อมูลเชิงลึกเกี่ยวกับความเร็วหน้าเว็บของ Google จะเพิ่มคะแนนจำนวนมาก)

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

#2 CSS (สไตล์)

CSS - (สไตล์ชีตแบบเรียงซ้อน - สไตล์ชีตแบบเรียงซ้อน)
สไตล์จะทำอะไรได้บ้าง?
ดี ประการแรก บีบพวกเขา
ประการที่สอง ลดจำนวนไฟล์เช่น รวมให้มากที่สุดเพื่อลดจำนวนการโทรไปยังเซิร์ฟเวอร์
ประการที่สามฝังรูปแบบหลักที่ส่งผลต่อการแสดงผลของส่วนที่มองเห็นได้ของหน้าจอแรกโดยตรงใน และปล่อยให้ส่วนที่เหลืออยู่ในไฟล์

ฉันยังทิ้งลิงก์ที่มีประโยชน์ไว้สองสามลิงก์:

• บริการบีบอัด css
• วิธีบีบอัดไฟล์ css

#3 JS (สคริปต์)

ที่นี่เรายังมีหลายวิธีในการเพิ่มประสิทธิภาพสคริปต์

1. เลื่อนการโหลดสคริปต์. พัฟมันให้ต่ำที่สุด วางไว้ข้างหลัง หรือต่ำกว่านั้นบางทีก็ช่วยได้ บางครั้งก็ไม่เป็นตัวเลือก แต่จุดที่ 2 มาเพื่อช่วยชีวิต
2. ASYNC – การโหลดสคริปต์แบบอะซิงโครนัส ทำได้โดยใช้พารามิเตอร์ “async”

   มีรายละเอียดเพิ่มเติมเกี่ยวกับ async ที่นี่
   ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับ JS และอิทธิพลของมัน

3. จุดเล็ก.
   JS ยังสามารถบีบอัดได้ รวมเป็น 1 ไฟล์ด้วย

#4 รูปภาพ

คุณสามารถทำสามสิ่งได้เสมอ: มองไฟ ดูน้ำ และปรับภาพให้เหมาะสม

หัวข้อค่อนข้างกว้างขวาง ดังนั้นฉันจะพยายามให้ข้อมูลที่สำคัญแก่คุณเท่านั้น

ปรับน้ำหนักให้เหมาะสม

ยังไง? ผ่านโปรแกรมหรือบริการ

• โปรแกรมสำหรับงานมวลชนพร้อมรูปภาพ ภาพหินเร็วด้วยคุณสามารถ
  ปรับขนาดรูปภาพจำนวนมาก อย่างไรและอย่างไรแล้ว google มีไม่ยาก
  ดาวน์โหลดรูปภาพ Faststone
  
• บริการลดขนาดภาพ - แพนด้า. หรือค่อนข้าง TinyPNG & TinyJPG
  ข้อได้เปรียบหลักของออนไลน์ เพียงอัปโหลดไฟล์และกลับไปเป็นเวอร์ชันบีบอัด - คุณภาพไม่ได้รับผลกระทบเลย (เป็นเวทมนตร์)
  ลิงค์: tinypng.com & tinyjpg.com

เพิ่มประสิทธิภาพขนาด

ขนาดที่ฉันเขียนด้านบนสามารถเปลี่ยนแปลงได้โดยใช้โปรแกรม ภาพหินอย่างรวดเร็ว
ขนาด สูง x น้ำหนัก (สูง x กว้าง)

ตัวอย่าง:

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

ตัวอย่างเช่น เรามี 2 ภาพ:
1) น้ำหนัก 100kb ขนาด 500x500
2) น้ำหนัก 100kb ขนาด 2500x2500
ดูเหมือนว่ามันจะสร้างความแตกต่างอะไรได้บ้าง พวกมันมีน้ำหนักเท่ากัน ดังนั้น การโหลดมันควรจะซับซ้อนหรือเรียบง่ายพอ ๆ กัน แต่ไม่มีหากคุณตรวจสอบโดย Google Page Speed ​​​​Insgiht มันจะยังสาบานด้วยความละเอียดสูงกว่า ภาพ.

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

ฉันไม่ได้เขียนอะไรเกี่ยวกับข้อมูลเมตาจริง ๆ ไม่มีอะไรจะเขียนที่นี่ ...
เพียงล้างข้อมูลเมตาทั้งหมดสำหรับรูปภาพทั้งหมด ตามคำอธิบาย คุณสามารถลดขนาดได้ 2 เท่า เพิ่งรู้นะเนี่ย (เรื่องเอฟเฟคของขนาดไฟล์ ผมว่ามันค่อนข้างไม่สำคัญ).

สั้น ๆ เกี่ยวกับการเปิดตัว:

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

ไปที่วิดีโอกันเถอะ:

ป.ล.
หากคุณมีคำถามหรือไม่เห็นด้วยกับบางสิ่ง เขียนเกี่ยวกับมันในความคิดเห็น