[Optimize] เทคนิคเพิ่มความเร็วให้หน้าเว็บ

ใน performance เมื่อ: by epd 11 ความเห็น
rainbow2

เทคนิดการทำ wordpress theme ให้โหลดเร็วลื่นหัวแตก(จริงเปล่าไม่รู้ ^^) งานนี้ได้ Optimize ทั้ง css,html,php และ javascript กันเลยทีเดียว :P

เอาหล่ะผมจะยึดการทำธีม wordpress เป็นหลักนะโดยเริ่มตั้งแต่

Optimize Image วิธีการsaveรูปให้มีขนาดเล็ก

เทคนิคนี้หลายๆคนก็ทำอยู่เพราะงั้นใครที่save รูปเป็นแล้วก็ข้ามๆเลยครับ(ฮ่าๆ ไม่ใช่ ave รูปคือกด Ctrl+Shift+Alt+S หรอกนะ)เซฟในทีนี้คือ ให้ภาพออกมามีคุณภาพพอเหมาะขนาดเหมาะสมกับคุณภาพ ไม่ใช่ว่า เล่น wallpaper มาทำ background แล้วยังปรับ background-attactment:fixed; ร่วมกับ เป็นรูป .jpg ที่มี quality:maximum = =’

วิธีการเซฟภาพ ผมจะสังเกตุจาก…

ชนิดของภาพ

  1. ถ้ารูปมีจำนวนสีน้อย ไม่มีการใช้ gradient หรือว่าภาพที่มันใกล้เคียงธรรมชาติก็จะเซฟเป็น .gif
  2. ถ้ามีการใช้ gradient หนักๆก็เซฟเป็น .jpg
  3. ถ้ารูป โปร่งแสงจะเซฟเป็น .png หรือ .gif ถ้าโปร่งแบบประมาณ Iconที่ไม่โปร่งแสงแบบ Alpha

งานที่จะเอาไปใช้

  • เอาไปใช้ทำ background อันนี้ผมจะใช้ภาพที่มี คุณภาพค่อนข้างต่ำนะครับ แต่ไม่ใช่ว่าลดจนมีgrainหรือ noise(เรียกไม่ถูก^^)ขึ้นเต็มรูป
  • Icons : ซึ่งแบบนี้น่าจะเซฟเป็น .gif หรือหากเลี่ยงไม่ได้ก็ใช้ .png แทนก็ได้ครับ เพราะว่า .gif ดูเหมือนจะไม่ค่อยเมกsense เท่าไหร่ ฮาาาาา

โดยรวมๆ เลือกมันเหมาะกับงานที่จะเอาไปใช้ แล้วใช้ quality ให้เหมาะสม

ตัวอย่างครับ:

เซฟเป็น .png

optimize website

เซฟเป็น .gif = =”

optimize website

เซฟเป็น .jpg low quality

optimize website

อันนี้น่าจะเหมาะสนที่สุดด .jpg quality ปานกลางแล้วปรับลดมานิดหน่อยจนไม่เห็น สี่เหลี่ยมๆแตกๆ

optimize website

CSS + Javascript

สำหรับ css + javascript เน้นไปที่ลดขนาดของไฟล์ให้เล็กลง(สำหรับ CSSดูที่นี่เลยครับ -> Tips เขียน CSS ให้บางเบา ) และเอามารวมกันไฟล์เดียวเพื่อลด Connection เพราะว่าส่วนใหญ่แล้ว ช่วงรอเวลาที่ host ตอบกลับมามักจะใช้เวลามากกว่าดาวโหลดซะอีก (ถ้าไฟล์มีขนาดไม่ใหญ่เว่อร์นะครับ ฮาาา – -*)

เมื่อเรียบร้อยแล้วก็ เอาไป pack ให้มันเล็กลงไปอีก (ดูเว็บ Pack CSS/Javascript ) แต่ทั้งนี้ทั้งนั้นต้องดูด้วยว่า pack หรือบีบอัดมาแล้ว มันยังจะทำงานเหมือนเดิมเปล่า ถ้าเกิดข้อผิดพลาดก็อาจจะ ลบคุณภาพของการบีบอัดให้น้อยลง หรือไม่ก็ไม่ต้องใช้ซะเลย (ผมมั่นใจครับว่า ไฟล์  .css ของท่านมีขนาดเล็กกว่า รูปประกอบเว็บ1ในหลายๆรูปซะอีก)

เปิดใช้ Gzip ทำ Cache-Control:[last Modified,Expires Header] โดยใช้ .htaccess (เดี่ยวว่างๆจะเขียนวิธีทำให้ครับ ตอนนี้ เสิร์จ Google ไปก่อน ^^)

CSS Advanced

ขึ้นหัวข้อให้หรูไปอย่างนั้นครับไม่ใช่ Advanced อะไรที่ไหนอาจจะ basic ด้วยซ้ำถ้าจะเน้น Performance  (เนื่องจากบทความเริ่มยาวแล้วกระผมขอลิสไว้สั้นก็แล้วนะครับ)

  • พยายามใช้ shorthand CSS ให้เยอะเท่าที่จะทำได้ อย่างเช่น background (แทนที่จะใช้ background-image,background-color) แต่วิธีนี้โค๊ดต้องแม่น ไม่เช่นนั้นแล้ว อาจจะมี ปัญหาได้ อย่างเช่น รูป background แสดงไม่ตรงตามการ เนื่องจาก ใช้ shorthand css ผิด (ie อาจจะเห็นได้บ่อย ฮ่าๆ)
  • Combine Image *0* : จัดการรวมรูป icons เล็กๆ หรือว่า รูปที่คิดว่า เป็น no-repeat (อาจจะ repeat ก็ได้แต่ต้องดูให้เหมาะสมด้วยนะครับ)เป็นรูปเดียวเพื่อลด HTTP request ที่เกิดขึ้น อย่างที่บอกไว้ในหัวข้อที่ผ่านมา
  • พยายามใช้ css selectors ให้ครอบคลุมไม่ใช่ว่าอะไรๆก็ใส่เป็น id ไปหมดทั้งๆมันแสดงผลเหมือนกันหรือว่า คล้ายๆก็ใช้เป็น class แทนไป จะลดจำนวนบรรทัดของโค๊ดได้เยอะ
  • พวก background gradient ต่างๆถ้าเป็นไปได้ให้ใช้ รูปขนาด 1pixel * XX pixel แล้วใช้ repeat-x; แทนเอาครับ
  • จากข้อบนถ้าคิดว่าbrowser คนเข้ามาใช้เว็บของท่านทันสมัยพอและ ขนาดของรูปนั้นเล็ก ก็อาจจะใส่เป็น data:image/jpg;base64 บลาๆ แทนใส่ url ได้ครับ จะลด connection ลงไปและโหลดจะถูก Embed ไว้ใน stylesheet เลย (ของเรียกอย่างนี้ก็แล้วกันนะ ^^)
  • นำไฟล์ background ของปุ่มแต่ state มารวมกัน (a:link,a:hover,a:active) จะทำให้พรีโหลด เวลาวางเม้าส์เหนือปุ่ม

ตัวอย่าง combine images :

welovekhun

จากรูปจะเห็นว่า จาก 10 รูปลดลงมาเหลือ รูปเดียวทำให้ connection ลดลงไปเยอะเลย

อีกรูปนึงครับ (รูปใหญ่เกิ้น) อันนี้จะรวมส่วนประกอบต่างๆมาไว้ในไฟล์เดียวกัน ทั้ง header,footer กล่องบทความและหัวข้อข่าว :P

Ref: http://www.welovekhun.com

วิธีทำก็ประมาณ Tips เขียน CSS ให้บางเบา โดยใช่ background ร่วมกันแต่ใช่ id เป็นตัวกำหนด background-position ครับ (ต้องไปเปิด photoshop เอาไม้บรรทัดวัดเอา ฮาาาาาาา)

(X)HTML

เช่นเดียวกันกับ css หรือ javascript ครับ ประเด็นสำคัญคือลด line of code ลงตัดอะไรที่ไม่จำเป็นออก อย่างเช่น class ที่มันตูมตามเยอะแยะไปหมด แต่เราไม่ได้ใช้สักหน่อย (แล้วจะใส่ไว้ทำไรว้า เหยดดดดด) ใน wordpress จะเห็น บ่อยๆ ก็คือ <body class=”ร้อย แปด พัน เก้า ยาว เป็นโล”>) เช่นครับ แน่นอนว่าถ้า กำหนดbody class ไว้แบบนี้เราก็จะ custom theme ได้มากขึ้น หยืดยุ่นขึ้น แต่ไม่ได้ใช้ก็เอาไปดีกว่า (นี่ยังไม่รวมใน sidebar ที่มี widget widget title 108 1009 อีกเช่นกันนะ)

แต่…ถ้าหากใช้ผมแนะนำว่าให้ใช้ wordpress Condition Tags โหลด stylesheet มาเพิ่มครับ

ทำไมหนะหรือ?

  1. ได้แยกส่วนที่เป็น global ใช้ทั้งเว็บกับส่วนที่ custom เฉพาะ (อย่างหน้า home,posts,single,page หรือแม้แต่ category เฉพาะตามที่กำหนด) จะหยืดยุ่นกว่า
  2. ไฟล์stylesheetหลักจะถูก แคชแยกไว้ ถ้าแก้ไข stylesheet บ่อยๆ เราก็แก้ไขstylesheetรองแทนได้  Browser จะได้โหลดมาเฉพาะ stylesheet รองเพราะว่า stylesheet หลักของเรา 304: Not Modified

ใส่ Javascript ไว้ที่ Footer

เนื่องจากว่า  Javascript จะทำให้การโหลด ไฟล์ประกอบเว็บอื่นๆ หยุดชะงักในทันที เพราะฉนั้น ใส่ javascript ไว้ส่วนท้ายสุดของเว็บจะเป็นการดีที่สุด แต่ต้องด้วยว่า โค๊ดส่วนอื่นๆจะ error หรือเปล่า ถ้ามี tag ประเภท <script> อยู่ใน Document ของเรา (ถ้าไม่สำคัญจริงๆ ผมแนะนำว่าให้ แยก <script> ออกไปใส่รวมไว้ในไฟล์ script.js ของเราดีกว่าครับ [ทำไมหนะหรือครับ? มันจะได้แคชไปพร้อมกับ script.js ไม่ต้องโหลดมาพร้อมกับ document ให้ขนาดมันเพิ่มขึ้นเล่นๆ ^^])

ใส่ Stylesheet ไว้ที่ Header

แน่นอน ย้าย javascript ไปที่ footer แล้ว css ก็ต้องมีการจัดให้มันมาอยู่ที่ header เช่นกัน เหตุผลก็ึล้ายๆกับ javascript at footer แหละครับ

  1. ไฟล์ stylesheet เป็นไฟล์ที่ใช้การแสดงผลของหน้าเว็บ ถ้ามันไปอยู่ส่วนท้ายแล้วหน้าเว็บที่ render ออกมาก่อนแล้วจะเป็นอย่างไร?
  2. ในไฟล์ stylesheet จะมีการโหลดแบบขนานของพวก Images assets ทั้งหลาย ทำให้เป็น preload ไปในตัว กว่าdocument ของเราจะพร้อม รูปภาพประกอบเว็บต่างๆก็โหลดมาใกล้เสร็จแล้ว  (…ถ้าไม่ถูกขัดจังหวะด้วย javascript ก่อน | เพราะ ถ้าโดนขัดจังหวะ รูปของเรา จะ delayed ค้างไว้ไม่โหลดต่อรอจนกว่า javascript จะโหลดเสร็จ ไม่ทราบว่าทำไมเหมือนกันนะครับ แต่ผมเดาว่าคงเป้นเพราะ javascript จะมีการตรวจสอบ DOMelement อะไรด้วยทำให้ต้อง pause อย่างอื่นไว้ก่อน…)

อ้อเกือบลืมอีกเรื่องนึงครับ

Server Side

ฝั่ง php ให้ทำการ flush บ่อยๆ แล้วเปิด gzip ไว้ด้วย ถ้าเป็นไปได้ลง plugin cache หรือทำระบบแคชเอง *0* (ยังไงซะ คนอ่านมากกว่าคนคอมเม้นต์หรือว่าคนเขียนอยู่แล้ว แคชไว้ไม่เสียหลาย นานๆอัดเดทที)

การ flush บ่อยๆจะช่วยให้เว็บเรา render เร็วขึ้นและ ไม่ต้องรอให้มันโหลดจนครบก่อนถึงจะแสดงผลมาพรึบเดียว… และก็จากที่ผมทดสอบดูพบว่า ถ้า flash <head></head> ออกไปก่อน stylesheet จะเริ่มโหลดทันที (แม้ว่า หลังจากนั้นจะ sleep(); ไว้สัก 5 วิ แต่stylesheet ต่างๆที่ถูก flush ออกไปแล้วจะเริ่มโหลด ณ จุดนั้น

ของผมจะประมาณนี้ครับ

Flush Away

Flush ทีแรกให้ file header มันส่งก่อนครั้งสองให้ <head> ออกไป style ทั้งหลายจะได้เริ่มโหลด แล้วก็ flush file header.php ทั้งหมดไป แล้วยังมีในส่วนของ the_loop ที่ flush ทุก Entry ครับ (ไม่ว่าจะดีขึ้นเปล่าต้องทดลองใช้ในธีมหน้า :P สำหรับธีมนี้ยังไม่ได้ flush เน้น design หนักไปหน่อยไม่ค่อยได้ optimize + features เท่าไหร่)

จัดการ ทำ post/pre  load images ด้วยการ replace <img> tags ทั้งหลาย เปลี่ยนให้เป็นรูปโหลดดิ้ง (ถ้า ไม่สนใจ image.google.com นะ :P )