หมายเหตุนี้จะไม่กล่าวถึงความสามารถของ Bitrix โดยตรง ฉันจะให้หลักการพื้นฐานบางประการในการเพิ่มความเร็วของไซต์1. คุณต้องลดจำนวนคำขอ HTTP
ไซต์นี้ไม่ได้เป็นเพียงหน้า html เท่านั้น แต่ยังรวมถึงรูปภาพ, ไฟล์จาวาสคริปต์, ไฟล์สไตล์อีกด้วย ถ้าเราลดจำนวนไฟล์เหล่านี้ เราก็จะเพิ่มความเร็วในการโหลดหน้า
ในจุดแรก ทุกอย่างเสร็จสิ้นแล้วในเอ็นจิ้น 1C-Bitrix เวอร์ชันล่าสุด คุณสามารถเปิดใช้งานช่องทำเครื่องหมายเหล่านี้ได้ในการตั้งค่าโมดูลหลัก
ดังนั้นในระหว่างการพัฒนา คุณสามารถมีไฟล์ที่มีสไตล์ได้มากเท่าที่คุณต้องการ และเมื่อส่งมอบให้กับการใช้งานจริง ให้เปิดช่องทำเครื่องหมาย จากนั้นไฟล์ css ทั้งหมดจะรวมเป็นไฟล์เดียว
ประการที่สอง น่าเสียดายที่ฉันไม่พบโซลูชันสำเร็จรูป แม้ว่าในความเป็นจริงแล้วโซลูชันควรจะเหมือนกับ CSS ทุกประการ
หากต้องการใช้จุดที่สาม คุณต้องสร้างเลย์เอาต์ตามรูปภาพเดียวทันที มีการเขียนบทความมากมายเกี่ยวกับเทคโนโลยีการสร้างสไปรต์ CSS
2. ไฟล์ CSS ทั้งหมดจะต้องวางไว้ที่ด้านบนของหน้า
หากคุณใช้แนวทาง Bitrix มาตรฐานในการรวมเค้าโครงเข้ากับการออกแบบ คุณจะทำได้
3. ย่อขนาดโค้ดของไฟล์ CSS และไฟล์ JS, ลดขนาดรูปภาพ, การบีบอัด GZIP ของหน้า
หากต้องการย่อขนาดโค้ดของไฟล์ CSS คุณเพียงแค่ต้องทำเครื่องหมายที่ช่อง "สร้างสำเนาที่บีบอัดของไฟล์ CSS ที่รวม" มีวิธีแก้ไขปัญหาพิเศษสำหรับการลดขนาดโค้ดของไฟล์ javascript เช่น http://yuilibrary.com/download/ yuicompressor/ .
เพื่อเปิดใช้งานการบีบอัด GZIP ใน Bitrix การติดตั้งโมดูลการบีบอัดจากการกระจาย Bitrix มาตรฐานก็เพียงพอแล้ว
4. ใช้ Google Libraries เพื่อดาวน์โหลดไลบรารี javascript ขนาดใหญ่
อย่างน้อยที่สุดเท่าที่จะทำได้ Jquery ควรเชื่อมต่อด้วยวิธีนี้อย่างแน่นอน
//
5. อย่าลืมใช้แคชของเบราว์เซอร์
ในการดำเนินการนี้คุณต้องติดตั้ง mod_expires สำหรับ apache2 และกำหนดค่าในลักษณะที่ข้อมูลคงที่ถูกแคชโดยเบราว์เซอร์เป็นเวลานานมาก ตัวอย่างเช่นเช่นนี้:
// .htaccess รหัสไฟล์
ส่วนหัวผนวกการควบคุมแคช "สาธารณะ" FileETag ขนาด MTime ExpiresActive On ExpiresDefault "การเข้าถึงบวก 0 นาที" รูปภาพ ExpiresByType/ico "การเข้าถึงบวก 1 ปี" ข้อความ ExpiresByType/css "การเข้าถึงบวก 1 ปี" ข้อความ ExpiresByType/javascript "การเข้าถึงบวก 1 ปี" ExpiresByType image/gif "เข้าถึงบวก 1 ปี" ExpiresByType image/jpg "เข้าถึงบวก 1 ปี" ExpiresByType image/jpeg "เข้าถึงบวก 1 ปี" ExpiresByType image/bmp "เข้าถึงบวก 1 ปี" ExpiresByType image/png "เข้าถึงบวก 1 ปี"
นี่เป็นการสรุปภาพรวมโดยย่อของฉันเกี่ยวกับหลักการพื้นฐานของการเพิ่มความเร็วในการโหลดหน้าเว็บ
ดังที่คุณทราบ Bitrix Framework ประกอบด้วยโมดูลต่างๆ ที่จริงแล้ว Bitrix core ก็เป็นโมดูลเช่นกัน ที่เรียกว่า "โมดูลหลัก" ซึ่งเสริมด้วยระบบการติดตั้งการอัปเดต SiteUpdate มีโมดูลมาตรฐานเพียง 40 โมดูลในรุ่นต่างๆ ซึ่งรวมอยู่ในการกำหนดค่าที่หลากหลายตัวอย่างเช่น เวอร์ชันขั้นต่ำของ "Start" ประกอบด้วย 4 โมดูล: "โมดูลหลัก", "การควบคุมโครงสร้าง", "บล็อกข้อมูล" และ "การบีบอัด" และรุ่นขั้นต่ำสำหรับการซื้อขายทางอินเทอร์เน็ตที่เรียกว่า "ธุรกิจขนาดเล็ก" ประกอบด้วยเพียง 28 โมดูล รวมถึงโมดูลหลักด้วย กล่าวคือ:
1. โมดูลหลัก
2. แค็ตตาล็อกการค้า
3. แกลเลอรี่รูปภาพ 2.0
4. การจัดการโครงสร้าง
5. ร้านค้าออนไลน์
6. บริการสังคม
7. บล็อกข้อมูล
8. สกุลเงิน
9. โพล
10. บล็อกไฮโหลด
11. การตรวจสอบประสิทธิภาพ
12. ฟอรั่ม
13. โมดูล SEO
14. ที่เก็บข้อมูลบนคลาวด์
15. ที่เก็บข้อมูลบนคลาวด์
16. บล็อก
17. ค้นหา
18. บริการคลาวด์
19. การสมัครสมาชิก การส่งจดหมาย
20. การป้องกันเชิงรุก
21. ซูม
22. การตลาดผ่านอีเมล
23. การบีบอัด
24. การแปล
25. แพลตฟอร์มมือถือ
26. แบบฟอร์มบนเว็บ
27. แอปพลิเคชันมือถือ
28. เทคโนโลยี Push & Pull
โมดูลได้รับการจัดการในส่วนการดูแลระบบที่การตั้งค่า > การตั้งค่าผลิตภัณฑ์ > โมดูล โปรดทราบว่าการติดตั้งโมดูลต้องใช้ทรัพยากรการโฮสต์ โดยหลักๆ คือพื้นที่ดิสก์ ดังนั้น หลังจากซื้อรุ่นแล้ว คุณควรศึกษารายการโมดูลที่ติดตั้งอย่างละเอียด ชี้แจงงานที่พวกเขาทำ และลบ (ถอนการติดตั้ง) โมดูลที่ไม่ได้ใช้
ติดตั้งโมดูล Bitrix ฟรีจาก Marketplace หลังจากเข้าสู่แผงการดูแลระบบ ให้ไปที่แท็บ Marketplace ค้นหาโมดูลที่คุณต้องการโดยค้นหาตามชื่อ โดยการคลิกที่ไอคอน ไปที่หน้าการโหลดของโมดูล คลิกปุ่ม "ดาวน์โหลด" จากนั้นคลิกปุ่ม "ติดตั้ง" หลังจากการติดตั้งเสร็จสมบูรณ์ ให้กำหนดค่าโมดูลในส่วนโมดูลของแผงการดูแลระบบ ในการดำเนินการนี้ ไปที่การตั้งค่า > การตั้งค่าผลิตภัณฑ์ > โมดูล เลือกชื่อของโมดูลที่ติดตั้ง และไปที่การตั้งค่าโดยคลิกที่โมดูล ติดตั้งโมดูล Bitrix ฟรีจากไฟล์เก็บถาวร ดาวน์โหลดโมดูลเก็บถาวร (จากแหล่งที่เชื่อถือได้เท่านั้น! มิฉะนั้น คุณจะเปิดประตูให้แฮกเกอร์ด้วยตัวคุณเอง!) อัปโหลดไฟล์เก็บถาวรไปยังโฮสต์ไปยังโฟลเดอร์ /bitrix/modules/MODULE NAME จากนั้นแตกไฟล์เก็บถาวรบนโฮสติ้ง และลบไฟล์เก็บถาวร เข้าสู่ระบบแผงผู้ดูแลระบบของคุณและไปที่การตั้งค่า > การตั้งค่าผลิตภัณฑ์ > โมดูล ค้นหาโมดูลใหม่ของคุณในรายการโมดูลที่มีอยู่ และเริ่มการติดตั้งโดยคลิกปุ่ม "ติดตั้ง" เมื่อเสร็จแล้ว คุณจะเห็นโมดูลในรายการโมดูลที่ติดตั้ง และคุณสามารถกำหนดค่าได้ การติดตั้งโมดูล Bitrix แบบชำระเงินจาก Marketplace มีโมดูลหลายหมื่นโมดูลอยู่ใน Bitrix Marketplace ด้วยเงินเพียงเล็กน้อยเพื่อช่วยเร่งความเร็วไซต์ ลดความซับซ้อนของขั้นตอนการบำรุงรักษาตามปกติ เพิ่มความเร็วในการทำงานกับแค็ตตาล็อกการค้า และให้ความช่วยเหลือได้มาก ด้วยการเพิ่มประสิทธิภาพกลไกค้นหา แค็ตตาล็อก Marketplace ประกอบด้วยร้านค้าออนไลน์สำเร็จรูป 245 แห่ง เว็บไซต์สำเร็จรูป 373 แห่ง โซลูชันอุตสาหกรรม 127 รายการ และโซลูชัน SEO 45 รายการหากต้องการติดตั้งโมดูล Bitrix แบบชำระเงินจาก Marketplace ให้ค้นหาการ์ดในแค็ตตาล็อก คลิกปุ่มซื้อ และชำระค่าโมดูล เร็วๆ นี้ คุณจะได้รับอีเมลจากนักพัฒนาพร้อมคูปองเปิดใช้งานและคำแนะนำในการติดตั้ง หลังจากนั้น เข้าสู่ระบบแผงควบคุมของคุณ ไปที่แท็บ Marketplace และในส่วนการอัปเดตโซลูชัน ให้ไปที่แท็บการเปิดใช้งานคูปอง ใส่รหัสคูปอง. หลังจากนั้น ชื่อของโมดูลที่คุณซื้อจะปรากฏในรายการโมดูลที่มีอยู่ คลิกปุ่ม "ติดตั้ง" จากนั้นดำเนินการในลักษณะเดียวกับเมื่อติดตั้งโมดูลฟรี
วันนี้เราจะได้เรียนรู้วิธีจัดรูปแบบ header.php ใน Bitrix อย่างถูกต้อง วิธีรวม .css และ .js ใน header.php อย่างถูกต้อง วิธีรวม jQuery ใน Bitrix อย่างถูกต้อง และวิธีการเปิดใช้งานการบีบอัดไฟล์ .css และ .js ใน Bitrix
นี่เป็นปัญหาที่รุนแรงและเร่งด่วนมากในปัจจุบัน การเรียกโมดูลบ่อยที่สุดเกี่ยวข้องกับข้อผิดพลาดในสคริปต์ เมื่อรวม jQuery ไม่ถูกต้อง header.phpและบ่อยครั้งที่มีการเชื่อมต่อ jQuery หลายรายการ แต่ควรเชื่อมต่อไลบรารี jQuery เพียงไลบรารีเดียวในทุกหน้าของไซต์และเป็นไลบรารีแรกในบรรดาสคริปต์เทมเพลตไซต์ทั้งหมด
มีบันทึกในไซต์หนึ่งฉันนับไลบรารี jQuery ที่เชื่อมต่ออยู่ 7 ไลบรารี แค่มีคนเบื่อที่จะมองหาข้อผิดพลาดและไม่มีที่ไหนให้ไปเมื่อพบปัญหาและแก้ไขปัญหาทุกอย่างก็เริ่มทำงานได้อย่างถูกต้องบนไซต์
ดังนั้นไฟล์ควรได้รับการฟอร์แมตได้ดีเพียงใด header.phpเทมเพลตไซต์ใน Bitrix:
