พอดีไปเจอบทความนี้มาครับ พร้อมกับ ได้ ลองติดตั้ง firefox extension ชื่อว่า Yslow (ต้องมี firebug ก่อน) เพื่อไว้ตรวจดูว่าเว็บไซต์ของเรานั้น ความเร็วในการโหลดได้ดี(หรือแย่)ระดับไหน ควรปรับปรุงจุดใดบ้าง

ใครยังไม่มีก็ไป ดาวโหลดได้ที่นี่ครับ

http://developer.yahoo.com/yslow/

ส่วน คำอธิบายต่างๆ ผมได้ copy มาให้อ่านกันครับ จาก

http://forum.nkc.kku.ac.th/index.php?topic=869.msg10290#msg10290

โดยคุณ mcpyx ได้แปลเป็นภาษาไทย ให้อ่านกันครับ

1. ทำให้จำนวน http request น้อยที่สุดเท่าที่เป็นไปได้ ข้อนี้น้อง ๆ ที่ไม่ได้เรียนวิชา web programming อาจจะงงซักหน่อย

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

ส่งคำสั่ง เพื่อร้องขอข้อมูล เพราะฉะนั้น ยิ่งคำสั่งยิ่งยาวเท่าไหร่ ก็ยิ่งทำข้อมูลที่ถูกส่งออกไปเยอะเท่านั้น นั้นเป็นสาเหตุนึงที่ทำ ให้เว็บของเรา ช้า

วิธีแก้ปัญหา คือ พยายามทำให้ http request มีจำนวนคำสั่งน้องที่สุดอย่างเช่น เปลี่ยนจากการใช้สคริปแบบฝังในโค๊ด หรือการ

เอาไฟล์มาฝังโค๊ดไว้ในหน้า เปลี่ยนมาทำการแยกไฟล์จะดีกว่า เพราะจะช่วยในการทำ cache ได้ และพยายามรวมไฟล์สคริ๊ปต่าง ๆ ให้อยุ่ในไฟล์เดียวกัน

เพื่อลดจำนวน http request

2. ใช้ CDN เพื่อลดระยะทางในการดึงข้อมูล ตรงนี้ถ้าใครไม่รู้จัก CDN จะอธิบายให้ฟังว่ามัน คือ Content Delivery Network

ซึ่งมันก็ คือ เว็บฟาร์มที่มีเซอร์เวอร์อยู่หลาย ๆ ที่ อย่าง hotmail ที่มีเซอร์ในไทย เวลาเราใช้งานในไทย เราก็ไม่ต้องไปวิ่งโหลดข้อมูลจากเซอร์เวอร์ต่าง

ประเทศ ทำให้ลดระยะทางในการดึงข้อมูลได้ แต่การใช้วิธีการนี้ถึงแม้จะมีข้อดีอยู่มาก แต่ข้อเสียก็ คือ ค่าบริการที่มีราคาแพง

3. เพิ่มระยะเวลาของแคชให้มากขึ้น การเพิ่มเวลาให้กับแคชช่วยให้เราไม่ต้องทำการสร้างเนื้อหาขึ้นมาใหม่ หรือไปโหลดข้อมูลจากดาต้าเบสมาใหม่ซึ่งทุก

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

ถ้าเราเพิ่มเวลามากเกินไป หรือเงื่อนไขไม่ดี จะทำให้ผู้ใช้งานได้รับข้อมูลที่ไม่อัพเดต เมื่อข้อมูลจริงถูกเปลี่ยน และปัญหาของเมโมรี่ที่เกินการใช้งานจริง

4. ตั้งค่าของเซอร์ให้ทำการส่งผ่านข้อมูลด้วยการบีบอัดข้อมูลแบบ Gzip เพื่อลดปริมาณข้อมูลบนเครือข่าย

5. เอาลิงค์ของสไตร์ชีตไว้บน header การที่ต้องเอาสไตล์ชีดไว้บน header เพราะทุกอย่างที่อยู่บนนั้นจะถูกโหลดพร้อมๆ กันกับ ข้อมูลบน body แต่ถ้าเราเอา สไตรล์ชีพไว้ที่ body ข้อมูลจะถูกโหลดเรียงตามลำดับ

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

7. หลีกเลี่ยงการใช้ CSS Expression เพราะเป็นอันตราย และทำให้การทำงานของเว็บบราวเซอร์หนักเกินจำเป็นเพราะ เว็บบราวเซอร์จะทำการตรวจสอบและรันสคริปดังกล่าวตลอดเวลา

8. เรียกใช้ javascript และ CSS จากด้านนอก เพราะการที่เราเรียกใช้แบบเป็นไฟล์แยก จะทำให้เราสามารถใช้ความสามารถของการทำแคชชิ่งได้

9. ลดจำนวนครั้งของการค้นหา DNS ด้วยการเพิ่มระยะเวลาของการเก็บ ip address ให้กับบราวเซอร์

10. ทำให้สคริป๊เล็กที่สุดเท่าที่เป็นไปได้ เช่น การลดจำนวนบรรทัด และจำนวนของโค๊ด ของจาวาสคริป เพื่อลดจำนวนขนาดที่วิ่งบนเครือข่าย

11. หลีกเลี่ยงการทำ redirect พูดง่าย ๆ คือ อย่าขี้เกียจเขียนโปรแกรมแล้วให้มัน redirect กลับมาโหลดหน้าเดิม

12. เอาสคริ๊ปที่ไม่ได้ใช้งาน หรือถูกเรียกซ้ำออก

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

14. ทำให้ AJAX สามารถทำการแคชได้  จะทำให้การดึงข้อมูลเร็วขึ้นได้กว่าเดิม เพราะไม่ต้องเจนเนอร์เร็ทใหม่ตลอดเวลา

อ้างอิง : http://forum.nkc.kku.ac.th/index.php?topic=869.msg10290#msg10290

โดยคุณ mcpyx

บทความใกล้เคียง

• ไม่มีบทความใกล้เคียง

อย่างที่เคยเห็นกันครับ ความสวยของหน้าตาเพจ มักจะแปรผกผันกับ การ programe หรือ ระยะเวลาโหลด รวมถึง seo ก็เช่นกันครับ แต่สิ่งที่เข้ามาเติมช่องว่างนี้ก็คือ css ครับ อาจจะไม่ได้มากแต่ก็พอบรรเทาลงบ้างก็ยังดี ใช่มั้ยครับ

คุณๆคงจะเคย link ทำแปลกๆที่ทำด้วย css กันใช่ไหมครับ คือจริงๆมันไม่แปลกอะแหละ แต่วิธีการทำของมันแปลกมากกว่า ตัวอย่างเช่นเ

<a class="galbtsuiv" href="http://www.crystalxp.net/galerie/en.2.12.cat.9.html">Next Page </a>

เห็นมั้ยครับว่า ไม่มี รูปภาพอยู่เลย (นั่นเพื่อที่จะให้ Spider สนใจlinkของเรามากขึ้นครับ)

เอาหล่ะครับ ประเด็นมันอยู่ที่แล้วจะทำทำไมหล่ะ ในเมื่อออกมาเหมือนกันกับการใ่ส่รูป โดยไม่มี <img /> เลย? เหตุผลแรกก็คือป้องกันรูปที่เราอุส่าออกแบบมาอย่างตั้งใจ โดยมิให้โดนขโมยไปง่ายๆ และอีกอย่างก็คือ SEO ในเมื่อ Search Engine ไม่ค่อยจะชอบลิงค์ที่ทำกับ รูปสักเท่าไหร่ เราเลยหาวิธีที่จะทำให้มันเป็น Text แล้วใส่รูปเข้าไปโดย css ครับ

(อ่านต่อ…)

บทความใกล้เคียง

• วิธีใส่ background เบื้องต้น
• ทำไมต้อง Tableless Designed
• StyleSheet/CSS

อันนี้เป็นการใส่ background อย่างง่าย สำหรับ beginner นะครับ

Q : เราจะใส่ แบ๊กกราวด์ ได้ยังไง
A :

body {
    background-image:url('ที่อยู่รูป ');
}
/* ที่ให้ใช้ background-image เพราะบางที background มันจะไม่ cross browser ครับ*/

Q : กรรมใส่แล้วรูปมันเรียงต่อกันอ่ะ อยากให้มันมีรูปเดียวนิ?
A : ตามปกติหากใส่ตามโค๊ดข้างบนมันจะเรียงต่อกันอัตโนมัติ แต่หากคุณต้องการให้มัน ไม่เรียงต่อกัน(คือรูปเดียวโดดๆนั้นแหละ)

body{
   background:url(' รูปๆ') no-repeat;
}
/*----- หรือ -----*/
body{
   background-image:url('รูปๆ');
   background-repeat:no-repeat;
}

หากอยากให้มันเรียงไปแนวนอน ก็ให้เปลี่ยน no-repeat เป็น repeat-x นะครับ กรณีเดียวกันหากให้มันเรียงลงมาข้างล่างแนวดิ่ง ให้ก็ให้เปลี่ยนเป็น repeat-y ซะ
**tip**background-repeat จะไม่มี none ให้ใช้ no-repeat แทน

Q : แล้วๆๆถ้าอยากให้มัน อยู่กับที่เหมือน wallpaper หล่ะ?
A : ถ้าอยากให้มันอยู่กับที่เหมือน wallpaper ก็ให้ใส่ code นี้ครับ

body{
 background-attachment:fixed;
}

อันนี้จะหมายถึง เกาะติดหน้าจอไว้เลย

Q : อยากให้มันมาอยู่ข้างล่างหง่า ทำไงดี?
A : นี่ก็อีกอย่างครับ ที่ควรรู้ไว้

ิbody{
  background-position:right bottom;
}

ค่าของ attibrute นี้จะใช้ตรงตัวเลยครับ right bottom คือ ขวา ล่าง

ก็จบไปแล้วครับ สำหรับ bg ไว้แค่นี้ก่อนนะครับสำหรับ code แต่ง friend อยากถามตรงไหน ถามได้เลยฮับ

อ้อ ลืมบอกไปครับ เวลาเอามาใช้จริงๆนั้น ให้ใส่รวมกันเลยครับ เช่น ผมต้องการให้ bg รูปใหญ่ อยู่ตรงกลางจอ ไม่เลื่อนไปไหน ไม่เรียงซำกัน

body{
  background-image:url('รูปๆๆ');
  background-position:center;
  background-repeat:no-repeat;
}

แบบสั้น

body{background:url('รูปๆๆ') no-repeat center;}

บทความใกล้เคียง

• StyleSheet/CSS
• css กับtipsทำlinkให้สวยและได้seo
• ทำไมต้อง Tableless Designed

ทำไมต้อง Tableless Designed?

เห็นหัวข้อแล้วไม่ต้องตกใจนะครับ เพราะ บอร์ดนี้ไม่ใช่ tableless แน่นอน อิอิ แต่ผมจะมาบอกให้รู้ว่าทำไมต้อง Tableless อันนี้ไม่ได้เกี่ยวกับการโชว์เทพ css/xhtml หากแต่จะเกี่ยวกับ ทางเทคนิค ครับ

Tableless คืออะไร

สำหรับใครที่ไม่ค่อยได้จับ CSS/XHTML ก็คงจะไม่ค่อยได้ยินคำบ่อยนักนะครับ ผมจะขออธิบายคร่าวๆว่า Tableless Designed คือการ ออกแบบหน้าเว็บโดยปราศจาค Table (หรือตารางนั้นเอง)หรือ มีให้น้อยที่สุดเท่าที่จะทำได้ (tableless ก็แปลว่า ตารางน้อยหนินะ)

Tableless VS TableMore

เอาหล่ะหัวข้อนี้จะอธิบายว่าทำไมต้อง Tebleless เหตุผลที่ต้อง tebleless นั้นบางคนก็อยากจะโชว์เทพในการใช้ css โดยการจัด layout โดยใช้ div ทั้งหมดซึ่งจะทำได้ยากสำหรับมือใหม่ เพราะต้องรู้รายละเอียด css ค่อนข้างเยอะ+กับรู้ว่า Browser แต่ละตัวแสดงผลยังไงต้อง hack css ส่วนไหนบ้าง จึงจะทำให้มัน แสดงผลได้ crossbrowser (เดี่ยวผมจะเขียนอธิบายเรื่อง crossbrowser ให้อีกทีครับ) และอีกเหตุผลนึงที่ต้อง tableless เพราะว่า html ที่เป็น table เวลาโหลดข้อมูลมา หากข้อมูลใน teble นั้นยังไม่ครบ Browser ก็จะยังไม่แสดงผลให้ได้ดูกัน แต่! <div> จะแสดงข้อมูลให้ดูเรื่อยๆ ระหว่างรอการโหลดข้อมูลที่เหลืออยู่ จึงทำให้เว็บเราดูเหมือนว่าจะโหลดไว แต่จริงๆนั้นไม่เลย แค่ แสดงข้อมูลตอนโหลดมาเป็นระยะๆ
เพราะฉนั้นเวลา เปิดเว็บที่tableless คุณจะสังเกตุเห็นว่า ตอนโหลดข้อมูลนั้น module ต่างๆ จะยังอยู่ผิดตำแหน่งอยู่(ซึ่งจะเข้าถูกที่ถูกทางก็ต่อเมื่อโหลดเสร็จ)

เพราะฉนั้น tabless designed ทำให้ ผู้เข้าชมเว็บ ไม่ต้องรอให้ข้อมูล โหลดมาครบ100% ก็จะสามารถดูข้อมูลไปก่อนได้ครับ

บทความใกล้เคียง

• css กับtipsทำlinkให้สวยและได้seo
• วิธีใส่ background เบื้องต้น
• StyleSheet/CSS

StyleSheet/CSS

StyleSheet หรือ CSS เป็นภาษาที่ไว้จัดการเกี่ยวกับ การจัด layout ให้สวยงามโดยไม่ต้องใช้ HTML แบบเดิมๆ ซึ่งจะช่วยในการลด ประมาณ Coding โดย css จะมีการ ใช้ class เพื่อลดการซ้ำซ้อนของ การจัดรูปแบบ (เปรียบ เสมือน การ ดึงตัวร่วม ใน คณิตศาสตร์นั้นแหลครับ)

ข้อดีของ การใช้ StyleSheet/CSS

การใช้ Stylesheet จะช่วยให้เว็บโหลดไวขึ้น ปรับปรุงแก้ไขภายหลังได้ง่ายขึ้นเพราะแบ่งแยากส่วน ส่วนของรายละเอียด(HTML) และ การจัดรูปแบบ(Stylesheet) ออกมาโดยชัดเจน โดยจะเชื่อมโยงกันโดย Selector ,id หรือ Class นั้นๆ ในการจัดรูปแบบ ทำให้สะดวกขึ้น กว่าเก่าเยอะครับ

ส่วนวิธีการใช้งาน รวมถึง เทคนิคต่างๆ สำหรับคนที่ยังไม่รู้เดี่ยวกระผมจะเขียนไว้ให้ทีหลังนะครับ

บทความใกล้เคียง

• วิธีใส่ background เบื้องต้น
• css กับtipsทำlinkให้สวยและได้seo
• ทำไมต้อง Tableless Designed