สุดยอดคู่มือการเพิ่มประสิทธิภาพเว็บ (เคล็ดลับ & วิธีปฏิบัติที่ดีที่สุด)

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

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

เราได้แบ่งเนื้อหาออกเป็น 3 ส่วนเพื่อให้อ่านง่ายขึ้น - ตามลำดับ การปรับแต่งด้านเซิร์ฟเวอร์, การเพิ่มประสิทธิภาพสินทรัพย์ (ซึ่งรวมถึงองค์ประกอบของเว็บเช่น CSS, Javascript, รูปภาพ, ฯลฯ ) และ เวที, เราจะมุ่งเน้นที่ใด การเพิ่มประสิทธิภาพ WordPress. ในส่วนสุดท้ายเรามีลิงค์เชื่อมโยงที่เราคิดว่ามีประโยชน์ รายการทั้งหมดหลังจากกระโดด.

การเพิ่มประสิทธิภาพ: ฝั่งเซิร์ฟเวอร์

1. เลือกโฮสต์เว็บที่เหมาะสม

   บัญชีเว็บโฮสติ้งของคุณไม่มีความสัมพันธ์โดยตรงกับการเพิ่มประสิทธิภาพที่คุณกำลังจะดำเนินการ แต่เราคิดว่าการเลือกบัญชีเว็บโฮสติ้งที่เหมาะสมดังนั้นสิ่งสำคัญเราจึงตัดสินใจนำมาพิจารณาก่อน บัญชี Hosting เป็นรากฐานของเว็บไซต์ / บล็อกของคุณซึ่งความปลอดภัยการเข้าถึง (cPanel, FTP, SSH), ความเสถียรของเซิร์ฟเวอร์ราคาและลูกค้ารองรับบทบาทสำคัญทั้งหมด คุณต้องทำให้แน่ใจว่าคุณอยู่ในมือที่ดี.

   อ่านที่แนะนำ: วิธีการเลือกโฮสต์เว็บ โดย wikiHow เป็นบทความที่ดีที่ให้ขั้นตอนและเคล็ดลับที่คุณควรรู้ก่อนซื้อบัญชีเว็บโฮสติ้ง.

2. สินทรัพย์โฮสต์แยกกัน

   เมื่อเราพูดถึงเนื้อหาเราหมายถึงองค์ประกอบของเว็บเช่น ภาพ และ สคริปต์แบบคงที่ ที่ไม่ต้องการการประมวลผลฝั่งเซิร์ฟเวอร์ สิ่งเหล่านี้รวมถึงกราฟิกเว็บรูปภาพ Javascripts Cascading Style Sheets (CSS) ฯลฯ การโฮสต์สินทรัพย์แยกต่างหากไม่ใช่สิ่งที่จำเป็น แต่เราได้เห็นผลลัพธ์ที่ยอดเยี่ยมในแง่ของความเสถียรของเซิร์ฟเวอร์ด้วยการใช้งานนี้เมื่อบล็อกมีปริมาณการรับส่งข้อมูลเพิ่มขึ้น.

   แนะนำให้อ่าน: เพิ่มการดาวน์โหลดแบบขนานใน Carpool Lane.

3. บีบอัดด้วย GZip

   ในระยะสั้นเนื้อหาเดินทางจากฝั่งเซิร์ฟเวอร์ไปยังฝั่งไคลเอ็นต์ (vicet ในทางกลับกัน) เมื่อใดก็ตามที่มีการร้องขอ HTTP การบีบอัดเนื้อหาสำหรับการส่งลดเวลาที่ต้องใช้ในการประมวลผลคำขอแต่ละรายการเป็นอย่างมาก.

   GZip เป็นหนึ่งในวิธีที่ดีที่สุดในการทำสิ่งนี้และมันแตกต่างกันไปตามประเภทของเซิร์ฟเวอร์ที่คุณใช้ ตัวอย่างเช่น, Apache 1.3 ใช้ mod_zip, Apache 2.x ใช้ mod_deflate และนี่คือวิธีที่คุณทำ Nginx. ต่อไปนี้เป็นบทความที่ดีมากที่จะทำให้คุณคุ้นเคยกับการบีบอัดฝั่งเซิร์ฟเวอร์:

   • เร่งความเร็วเว็บไซต์ด้วยการเปิดใช้งานการบีบอัดไฟล์ Apache
   • บีบอัดเอาท์พุทเว็บโดยใช้ mod_gzip และ Apache
   • วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วยการบีบอัด GZIP
   • การบีบอัดฝั่งเซิร์ฟเวอร์สำหรับ ASP

4. ย่อการเปลี่ยนเส้นทาง

   เว็บมาสเตอร์ทำการเปลี่ยนเส้นทาง URL (ไม่ว่าจะเป็นการเปลี่ยนเส้นทาง Javascript หรือ META) ตลอดเวลา บางครั้งมีวัตถุประสงค์เพื่อชี้ผู้ใช้จากหน้าเก่าไปยังใหม่หรือเพียงแค่แนะนำผู้ใช้ไปยังหน้าที่ถูกต้อง การเปลี่ยนเส้นทางแต่ละครั้งจะสร้างคำขอ HTTP เพิ่มเติมและ RTT (ไปกลับเวลา) ยิ่งคุณมีการเปลี่ยนเส้นทางมากเท่าใดผู้ใช้ที่ช้าก็จะไปที่หน้าปลายทาง.

   แนะนำให้อ่าน: หลีกเลี่ยงการเปลี่ยนเส้นทาง โดย Google Code ให้ภาพรวมที่ดีเกี่ยวกับเรื่องนี้ บทความนี้ยังแนะนำวิธีการปฏิบัติบางอย่างเพื่อลดการเปลี่ยนเส้นทางเพื่อเพิ่มความเร็วในการแสดงผล.

5. ลดการค้นหา DNS

   ตามที่ Yahoo! บล็อกเครือข่ายนักพัฒนา, ใช้เวลาประมาณ 20-120 มิลลิวินาทีสำหรับ DNS (ระบบชื่อโดเมน) เพื่อแก้ไขที่อยู่ IP สำหรับชื่อโฮสต์หรือชื่อโดเมนที่กำหนดและเบราว์เซอร์ไม่สามารถทำอะไรได้จนกว่ากระบวนการจะเสร็จสมบูรณ์อย่างถูกต้อง.

   ผู้เขียน Steve Souders แนะนำว่าการแยกส่วนประกอบเหล่านี้อย่างน้อยสองชื่อโฮสต์ แต่ไม่เกินสี่ชื่อจะลดการค้นหา DNS และอนุญาตให้ดาวน์โหลดแบบขนานในระดับสูง. อ่านเพิ่มเติม ในบทความ.

การเพิ่มประสิทธิภาพ: เนื้อหา (CSS, Javascripts, รูปภาพ)

1. รวม Javascripts หลาย ๆ อันไว้ในที่เดียว

   คนที่ rakaz.nl แบ่งปันวิธีที่คุณสามารถรวม Javascripts หลายรายการเช่น:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   เป็นไฟล์เดียวโดยเปลี่ยน URL เป็น:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   โดยการจัดการ. htaccess และการใช้ PHP. คลิกที่นี่ อ่านเพิ่มเติม.

2. บีบอัด Javascript & CSS

   ลดขนาด เป็นแอป PHP5 ที่สามารถรวมไฟล์ CSS และ Javascript หลายไฟล์บีบอัดเนื้อหา (เช่นลบช่องว่าง / ความคิดเห็นที่ไม่จำเป็น) และให้บริการผลลัพธ์ด้วยการเข้ารหัส HTTP (gzip / deflate) และส่วนหัวที่อนุญาตการแคชฝั่งไคลเอ็นต์ที่ดีที่สุด.

   

   บีบอัดพวกเขาออนไลน์!นอกจากนี้ยังมีบริการเว็บบางอย่างที่อนุญาตให้คุณบีบอัดไฟล์ Javascripts และ CSS ของคุณด้วยตนเองทางออนไลน์ นี่คือบางสิ่งที่เรารู้

   • compressor.ebiene (จาวาสคริ, CSS)
   • javascriptcompressor.com (จาวาสคริ)
   • jscompress.com (จาวาสคริ)
   • CleanCSS (CSS)
   • เครื่องมือเพิ่มประสิทธิภาพ CSS (CSS)

3. ปรับแต่งการหมดอายุของส่วนหัว / แคช

   เครดิต: httpwatch

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

   อ่านที่แนะนำ:

   • Yahoo! นักพัฒนาเครือข่ายบล็อก - เพิ่มส่วนหัวที่หมดอายุ
   • วิธีเพิ่ม Good Expires ส่วนหัวให้กับรูปภาพใน Apache 1.3
   • การแคช HTTP
   • การสอนแคชสำหรับผู้เขียนเว็บและเว็บมาสเตอร์

4. Off-load สินทรัพย์

   โดยการโหลดเราหมายถึงการแยก Javascripts, ภาพ, CSS และไฟล์สแตติกจากเซิร์ฟเวอร์หลักที่เว็บไซต์โฮสต์และวางไว้บนเซิร์ฟเวอร์อื่นหรือพึ่งพาบริการเว็บอื่น ๆ เราได้เห็นการปรับปรุงที่สำคัญในที่นี้มา Hongkiat โดยการโหลดสินทรัพย์ไปยังบริการเว็บอื่น ๆ ที่มีอยู่ทำให้เซิร์ฟเวอร์ทำการประมวลผล PHP เป็นหลัก นี่คือคำแนะนำบางอย่างของบริการออนไลน์สำหรับการโหลดออก:

   • ภาพ: Flickr, Smugmug, โฮสต์ที่ชำระแล้ว *
   • javascripts: ห้องสมุด Google Ajax, Google App Engine, โฮสต์ที่ชำระเงิน *
   • เว็บฟอร์มs: WuFoo, FormStack
   • RSS: Google Feedburner
   • แบบสำรวจและแบบสำรวจ: SurveyMonkey, PollDaddy

   * โฮสต์ที่ชำระเงิน - บริการชำระเงินมีความน่าเชื่อถือและเสถียรภาพที่ดีขึ้นเสมอ หากเว็บไซต์ของคุณร้องขอสินทรัพย์อยู่ตลอดเวลาคุณจะต้องตรวจสอบให้แน่ใจว่าเว็บไซต์เหล่านั้นอยู่ในสภาพดี เราขอแนะนำ Amazon S3 และ Cloud Front.

5. การจัดการรูปภาพบนเว็บ

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

   • ปรับภาพ PNG ให้เหมาะสมFolks at Smashing Magazine อธิบายเทคนิคที่ชาญฉลาดบางอย่างที่อาจช่วยให้คุณปรับภาพ PNG ของคุณได้.
   • ปรับให้เหมาะสมสำหรับเว็บ - สิ่งที่คุณต้องรู้ (รูปแบบ) เรียนรู้เพิ่มเติมเกี่ยวกับ Jpeg, GIF, PNG และวิธีบันทึกภาพสำหรับเว็บ.
   • อย่าปรับขนาดรูปภาพหมั่นฝึกฝนการสอดแทรก ความกว้าง และ ความสูง สำหรับแต่ละภาพ อย่าย่อขนาดภาพเพียงเพราะคุณต้องการรุ่นที่เล็กกว่าบนเว็บ. ตัวอย่างเช่น: อย่าปรับขนาดภาพ 200 × 200 พิกเซลเป็น 50x50 พิกเซลสำหรับเว็บไซต์ของคุณโดยแก้ไข ความกว้าง และ ความสูง. รับ 50 × 50 px แทน.

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

   • Smush.itอาจเป็นหนึ่งในเครื่องมือออนไลน์ที่มีประสิทธิภาพที่สุดในการปรับภาพให้เหมาะสม มีแม้กระทั่งปลั๊กอิน WordPress สำหรับมัน!
   • JPEG & PNG Stripperเครื่องมือ Windows สำหรับการปอก / ทำความสะอาด / ลบข้อมูลเมตา (ขยะ) ที่ไม่จำเป็นออกจากไฟล์ JPG / JPEG / JFIF & PNG.
   • เครื่องมือเพิ่มประสิทธิภาพภาพออนไลน์ช่วยให้คุณเพิ่มประสิทธิภาพ gifs, gifs เคลื่อนไหว, jpgs, และ pngs ได้อย่างง่ายดายดังนั้นมันจึงโหลดได้เร็วที่สุดบนไซต์ของคุณโดย Dynamic Drive
   • SuperGIFทำให้ภาพ GIF และภาพเคลื่อนไหวทั้งหมดของคุณเล็กลงอย่างง่ายดาย.
   • ที่นี่มีมากขึ้น.

6. จัดการ CSS

   เว็บไซต์สมัยใหม่ใช้ CSS เป็นพื้นฐานของสไตล์รวมถึงรูปลักษณ์และความรู้สึก CSS ไม่เพียง แต่ให้ความยืดหยุ่นอย่างมากต่อการเปลี่ยนแปลง แต่ยังน้อยกว่าในแง่ของรหัสที่ต้องการ อย่างไรก็ตามหากพวกเขาถูกเข้ารหัสไม่ดีก็อาจเป็น backfire นี่คือรายการตรวจสอบบางส่วนหรือเป็นแนวทางให้คุณตรวจสอบว่า CSS ของคุณได้รับการปรับให้เหมาะสม:

   • การรักษาเด็ก ๆ องค์ประกอบของคุณให้สอดคล้องกับลูกวิธีทำให้มาร์กอัพของคุณสะอาดด้วย CSS Selectors.
   • ทำให้ CSS สั้นเมื่อพวกเขาให้สไตล์เดียวกันรหัสจะสั้นกว่า นี่คือ คู่มือ CSS ชวเลข คุณอาจจะต้อง.
   • ใช้ CSS Spriteเทคนิค CSS Sprite ลดคำขอ HTTP ทุกครั้งที่โหลดหน้าเว็บด้วยการรวมรูปภาพหลาย ๆ ภาพ (หรือทั้งหมด) เข้าด้วยกันในไฟล์ภาพเดียวและควบคุมผลลัพธ์ด้วย CSS พื้นหลังตำแหน่ง คุณลักษณะ ต่อไปนี้เป็นคำแนะนำและเทคนิคที่มีประโยชน์ในการสร้าง CSS Sprites:
     • CSS Sprite Generator ออนไลน์
     • เครื่องมือสร้าง CSS Sprites ออนไลน์และออฟไลน์ที่ดีที่สุด
   • ใช้การประกาศทุกครั้งเพียงครั้งเดียวเมื่อต้องการเพิ่มประสิทธิภาพไฟล์ CSS ของคุณหนึ่งในมาตรการที่มีประสิทธิภาพที่สุดที่คุณสามารถใช้คือการประกาศทุกครั้ง.
   • ลดจำนวนไฟล์ CSSเหตุผลนั้นง่ายยิ่งมีไฟล์ CSS มากเท่าไหร่คุณก็จะมีคำขอ HTTP ที่จะต้องทำเมื่อมีการร้องขอหน้าเว็บ ตัวอย่างเช่นแทนที่จะมีไฟล์ CSS หลายไฟล์ดังนี้:

     คุณสามารถรวมไว้ใน CSS เดียว:

   อ่านที่แนะนำ:

   • เครื่องมือที่มีประโยชน์ในการตรวจสอบล้างและเพิ่มประสิทธิภาพไฟล์ CSS ของคุณเครื่องมือที่มีประโยชน์บางอย่างที่คุณสามารถใช้เพื่อเพิ่มประสิทธิภาพโค้ด CSS ของคุณแม้ว่าคุณจะไม่รู้การเข้ารหัส CSS อย่างสมบูรณ์.
   • 7 หลักการของรหัส CSS ที่สะอาดและปรับให้เหมาะสมการเพิ่มประสิทธิภาพไม่เพียงลดขนาดไฟล์เท่านั้น แต่ยังรวมถึงการจัดระเบียบความยุ่งเหยิงและประสิทธิภาพ.
   • แนวทางปฏิบัติที่ดีที่สุดเพื่อเพิ่มประสิทธิภาพ CSSพิจารณาบทความนี้เป็นแบบฝึกหัดทางวิชาการมากกว่าเคล็ดลับการเพิ่มประสิทธิภาพในชีวิตจริง.

การเพิ่มประสิทธิภาพสำหรับ WordPress

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

1. แคชบล็อก Worpress ของคุณ

   WP-แคช เป็นระบบแคชเพจ WordPress ที่มีประสิทธิภาพอย่างยิ่งที่จะทำให้เว็บไซต์ของคุณเร็วและตอบสนองได้มากขึ้น เราขอแนะนำ WP Super Cache ซึ่งปรับปรุงจากปลั๊กอินที่กล่าวถึงก่อนหน้านี้และก็ทำงานได้ดีเช่นกัน.

2. ปิดใช้งานและลบปลั๊กอินที่ไม่ได้ใช้

   เมื่อคุณสังเกตเห็นว่าบล็อกของคุณกำลังโหลดช้าจริงดูว่าคุณมีปลั๊กอินจำนวนมากติดตั้งหรือไม่ พวกเขาอาจเป็นผู้ร้าย.

3. ลบแท็ก PHP ที่ไม่จำเป็นออก

   หากคุณมองเข้าไปในซอร์สโค้ดของธีมคุณจะพบแท็กจำนวนมากเช่นนี้:

   สามารถถูกแทนที่ด้วยเนื้อหาข้อความที่ไม่ทำให้เกิดการโหลดไปยังเซิร์ฟเวอร์ เช็คเอาท์ Michael Martin's 13 แท็กที่จะลบออกจากบล็อก WordPress ของคุณก.

อ่านที่แนะนำ:

• 3 วิธีที่ง่ายที่สุดในการเพิ่มความเร็ว WordPressJohn Pozadzides แบ่งปันวิธีที่บล็อกของเขาแล่นผ่านไปอย่างราบรื่นผ่านทราฟฟิกของ Digg.
• 13 เคล็ดลับและเคล็ดลับความเร็ว WordPress ที่ยอดเยี่ยมเพื่อประสิทธิภาพสูงสุด ต่อไปนี้คือสิ่งที่ต้องลองหากคุณพบว่าไซต์ WordPress ของคุณทำงานได้ไม่ดีเท่าที่ควรเนื่องจากการรับส่งข้อมูลสูงหรือปัญหาที่ซ่อนอยู่ซึ่งคุณไม่รู้.
• 40 เคล็ดลับการเพิ่มประสิทธิภาพ WordPressเคล็ดลับการเพิ่มประสิทธิภาพในสไลด์ 40 เคล็ดลับใน 40 นาที.

สุดท้าย แต่ไม่ท้ายสุด…

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

• Yahoo! YSlow

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

  (จำเป็นต้องใช้ Firebug)

  

• PageSpeed

  คล้ายกับ Yahoo! YSlow, Google ความเร็วหน้า เป็นโอเพ่นซอร์ส Firebug แอดออนเพื่อประเมินผลการทำงานของเว็บไซต์และวิธีการปรับปรุง (จำเป็นต้องใช้ Firebug)

  

• เครื่องมือ Pingdom

  เครื่องมือ Pingdom ใช้เวลาโหลดเว็บไซต์ของคุณอย่างเต็มรูปแบบรวมถึงวัตถุทั้งหมด (รูปภาพ, CSS, JavaScripts, RSS, แฟลชและเฟรม / iframes) และแสดงสถิติทั่วไปเกี่ยวกับหน้าโหลดเช่นจำนวนวัตถุทั้งหมดเวลาโหลดทั้งหมดและขนาดรวมทั้งหมด วัตถุ.

  

อ่านที่แนะนำ:นี่คือเคล็ดลับและเครื่องมือเพิ่มเติมที่ควรค่าแก่การลองใช้.

• Google Web Optimizer
• 15 เครื่องมือเพื่อช่วยให้คุณพัฒนาเว็บเพจได้เร็วขึ้น
• 15+ เคล็ดลับเพื่อเพิ่มความเร็วเว็บไซต์ของคุณและเพิ่มประสิทธิภาพรหัสของคุณ!