Tech &Tips

เทคนิควิธีการทำ Head บล็อกให้สวยงาม ทั้ง 2 รูปแบบ

            ทำบล็อกก็เหมือนกับบ้านหลังนึงของเรานี่แร่ะคะ บ้านจะสวยได้อย่างไรถ้าไร้เครื่องประดับ ดังนั้นการทำบล็อกสิ่งที่ขาดไม่ได้คือการทำส่วน Head เว็บไซต์ ThaiNN ของเราก็เปิดโอกาสให้เพื่อนสมาชิกสามารถใส่ Head และส่วนอื่นๆไม่ว่าจะเป็นพื้นหลัง พื้นคอมเม้น และอีกมากมายเพื่อตกแต่งบล็อกของเพื่อนๆให้งามเลิศ แต่วันนี้เราจะมาสอนวิธีการทำ Head บล็อกให้สวยงาม ทั้ง 2 วิธี ใครชอบแบบไหนก็ลงมือเตรียมทำกันได้เลย
Head แบบที่ 1 เป็น Head ที่ทำไม่ยุ่งยากนักเพราะทางเว็บมีระบบไว้ให้เพื่อนๆ Upload เองอยู่แล้ว แต่หลายคนก็ยังทำผิดทำถูกอยู่ ไม่รู้ขนาดที่แน่นอน รูปด้านล่างนี้คือ Head ส่วนบนแบบที่ 1 ที่เราจะได้ทำกัน
Head แบบ ภาพที่นำมาทำ ควรมีขนาดตรงตามที่ระบบต้องการ คือกว้าง 760 Pixel สูง 400 Pixel หากมากไป หรือน้อยไปจากที่กำหนดไว้นี้จะทำให้ Head ไม่สมส่วน เป็นเหตุผลที่ทำให้ออกมาไม่สวย
วิธีการใส่ Head
- เตรียมภาพที่จะใช้ทำ ขนาด กว้าง 760 x 400 pixel จากนั้นเลือกไปที่หน้าบล็อกของคุณ แล้วเลือกคำสั่ง "ตกแต่งบ้านหรือ Profile ของฉัน" ดังภาพด้านล่างนี้ หรือจะคลิกที่ เมนู "ระบบจัดการของฉัน" ก็ได้เช่นกัน

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

เมื่อทำการ Upload แล้วก็เป็นอันเสร็จสิ้นสำหรับการทำ Head ในแบบที่ 1

การทำ Head ในแบบที่ 2 เป็นแบบที่ไม่เหมือนใคร เพราะเป็นการทำที่ไม่พึ่งพาระบบเท่าไหร่นัก อีกทั้ง Head ในแบบที่ 2 นี้มีข้อดีที่ไม่มีการจำกัด ความกว้าง และส่วนสูงแต่ทางที่ดี ก็ไม่ควรกว้างเกิน 700 pixel นะคะเพราะจำทำให้เปลืองพื้นที่หน้าจอเวลาแสดงผล ส่วนความสูงนั้นอยู่ที่ความต้องการของคุณเอง ตัวอย่าง Head แบบที่ 2 ดังภาพด้านล่าง
วิธีการทำ Head แบบที่ 2 ตัวอย่างก็เหมือนกับบล็อกที่ฟางใช้อยู่นี้ คือเราต้องมีภาพ หรือ code ที่เราจะนำมาทำ Head ซึ่งอาจจะเป็น Code HTML หรือ Code ภาพที่เราไปฝากไว้กับเว็บฝากไฟล์ต่างๆ
เมื่อเรามี code อยู่แล้วให้ทำตามขั้นตอนดังนี้
- ไปที่หน้าบล็อกของคุณ แล้วเลือกคำสั่ง "ตกแต่งบ้านหรือ Profile ของฉัน" ดังภาพด้านล่างนี้ หรือจะคลิกที่ เมนู "ระบบจัดการของฉัน" ก็ได้เช่นกัน
- จากนั้นเมื่อเข้าสู่ระบบปรับแต่งให้เลือกที่หัวข้อ "ส่วนใส่ Code Area" ดังภาพ
- เมื่อเข้ามาแล้วจะพบกับหน้าที่จะให้ใส่ code หากเพื่อนๆก้อปปี้เป็นไฟล์ภาพมาก็ให้เลือกวางลงไปในส่วนที่วงไว้ได้เลย
- แต่ถ้าหากเป็นการนำไฟล์ภาพไปฝากไว้กับเว็บฝากรูปแล้ว ได้ code มาแทน ให้คลิกที่ปุ่มสีแดง ดังภาพด้านล่างนี้ เพื่อสลับไปยังหน้าสำหรับใส่ code เสียก่อน (มิเช่นนั้นภาพจะไม่แสดงผล)
- จากนั้นก็วาง code รูปภาพลงไปดังภาพด้านล่างแล้วกดบันทึก ด้วยวิธีการนี้เอง เพื่อนๆจึงสามารถที่จะออกแบบ Head ในรูปแบบ Flash หรือ Html แล้วนำ code มาวางก็ได้เช่นกัน
ท้ายสุดนี้ก็หวังว่าเพื่อนๆสมาชิกจะเข้าใจได้ในระดับ หนึ่ง แต่หากมีคำถามใดๆในการแต่งบล็อกก็สามารถฝากคำถามไว้ได้ที่ เว็บบอร์ด ตามลิงค์นี้นะคะ  http://www.thainn.com/webboard/board.list.php?ownerid=2

*******************************************************************************

เทคนิคเพิ่มความเร็วการโหลดเว็บ

            ประเด็นหลักในการที่เพิ่มความเร็วการโหลดหน้าเว็บของเราอยู่ที่การควบคุม จำนวนของ component ที่เราเรียกมาใส่หน้าเว็บเราก็ตาม ก็จะต้องเจอกับคำถามค้างคาใจ ว่าแล้วสรุป สุดท้ายเราจะเอา javascript , css ไว้ในไฟล์หรือนอกไฟล์กันถึงจะดี
            แนะนำให้เราแยก CSS กับ javascript ไฟล์ออกไปเป็นไฟล์ต่างหาก ไม่ควรเขียนลงไปรวมกันในหน้าเว็บ เพราะว่า CSS file และ javascrip file ต่างสามารถถูก cache ได้ใน browser แต่ว่า การเขียน javascript, css ลงไปที่หน้าเว็บ จะต้องถูกโหลดทุกๆครั้งที่เราเปิดหน้าเว็บนั้นๆ จริงอยู่ที่เราจะสามารถลดการ request ลงได้ แต่ว่าเรากลับไปเพิ่มในส่วนของ ขนาด HTML document แทนนั่นเอง แต่ในทางกลับกัน หากเราไปใช้ external file แล้ว และเมื่อ browser ได้ cache แล้วเราก็จะพบว่า เราทำงานกับ HTML document ที่ขนาดเล็กลง แต่มี request ที่เท่าเดิมนั่นเอง
            โดยจะมีประเด็นหลักที่ส่งผลโดยตรงก็คือความถี่ในการเปิดหน้าเว็บ โดยเราจะต้องทำการประมวลก่อนด้วยว่า user จะมีพฤติกรรมบนหน้าเว็บเราแบบไหนมากกว่ากัน คือเปิดโดยมีหน้าตาซ้ำๆ หรือว่า เปิดหน้าตาแบบใหม่ตลอดแต่แค่ครั้งเดียว เพราะว่าจะส่งผลว่าไฟล์ที่ถูก cache เหล่านั้นได้ถูกใช้ซ้ำ คุ้มค่ามากน้อยแค่ไหนนั่นเอง

ลดเวลาการใช้ DNS lookup

เป็นที่รู้กัน ว่าเราใช้ระบบโดเมนเนม เข้ามามีบทบาทเพื่อทดแทนการจดจำเป็น IP  มันก็เหมือนกัน phone book ที่เราใช้ชื่อเพื่อนแทนเบอร์โทรศัพท์ในการจดจำนั่นเอง โดยเมื่อเราเปิดหน้าเว็บเช่น meewebfree.com ใน browser เจ้าตัว DNS resolver ก็จะตอบกลับไปที่ browser ว่าอยู่ที่ IP อะไร ซึ่ง DNS นี้ก็กินเวลาไปประมาณ 20-120 milliseconds ในกระบวนการ ถามหา ip จาก host name ดังกล่าวโดยระหว่างนี้ browser จะไม่สามารถ download อะไรได้เลย จนกว่า  dns lookup จะเสร็จสิ้น
ถ้าสามารถทำ cache ให้กับ DNS lookup ได้ ก็จะทำให้มีความเร็วที่มากขึ้น โดย cache นี้ จะเป็นแบบพิเศษ ซึ่งจะทำอยู่ที่ ISP ผู้ให้บริการ internet ของเรา หรือในเครือข่าย lan ของเรา แล้วแต่กรณี แต่ในเครื่องเราก็มีด้วยเหมือนกัน และ browser ส่วนใหญ่ก็จะมี cache เป็นของตัวเอง ที่ไม่ได้ใช้งานจาก OS 
Internet Explorer cache dns lookup ไว้ประมาณ 30 นาที ซึ่งถูกกำหนดโดย DnsCacheTimeout registry setting ส่วน firefox cache 1 นาที กำหนดโดย network.dnsCacheExpiration 
ดังนั้น การที่เราเอาไฟล์ ไว้ที่หลายๆ host name จะส่งผลให้ การทำ DNS lookup นั้นใช้เวลามากขึ้น ถ้าเราลดจำนวน host name ได้ ก็จะลดเวลาในการ DNS lookup ลงได้
แต่ว่าการลด host name ที่เราใช้เก็บไฟล์ ก็ส่งผลโดยตรงต่อการทำงาน parallel download อีก โดยข้อแนะนำก็คือ ให้แบ่งไฟล์เก็บไว้ที่ 2 host name แต่ไม่เกิน 4 host name ก็จะเป็นจุดที่สมดุลพอดี

ลดขนาดของ JavaScript และ CSS

การลดขนาดหรือที่เราเรียกว่า minify เป็นการลบตัวหนังสือต่างๆที่เราไม่ต้องการใช้งานออกจาก source code ซึ่งจะช่วยลด load time  โดยการทำ minify จะลบ comment หรือ ช่องว่างต่างๆที่ไม่สำคัญออก โดยใน case ของ JavaScript จะช่วยให้ทำงานได้เร็วขึ้น เพราะว่าลดเวลาการโหลดลงไป โดยที่นิยมใช้ มักจะใช้ JSMin หรือ YUI Compressor โดยที่ YUI Compressor สามารถใช้ minify CSS ได้ด้วย
โดยผลการสำรวจ top ten เว็บของอเมริกา พบว่า การทำ minify สามารถลดการโหลดลงได้ 21% 

ตรวจสอบการ redirect

ทั้งการ redirect 301 และ 302  จริงๆแล้วจะมีการ redirect โดยใช้ meta refresh tag และ javascript ก็ตาม แต่แนะนำให้ใช้ standard 3xx HTTP status code ในการ redirect จะดีกว่า 
โดยการ redirect จะทำให้การเปิดหน้าเว็บนั้นช้าลงไปอีก เพราะว่าเสียเวลาไปกับการ redirect ไปมา และอีกอย่างที่ต้องระวังและอาจจะคาดไม่ถึง ก็คือการ redirect ไปยัง URL ที่มี และไม่มีเครื่องหมาย / ตามหลัง เช่น meewebfree.com/aaa ซึ่งจะ redirect ไป meewebfree.com/aaa/ (ตัวอย่างนี้สมมุติขึ้นมาเฉยๆ) โดยเราสามารถแก้ไขใน apache ได้ด้วยการ ใช้ Alias หรือ mod_rewrite หรือ DirectorySlash (สำหรับคนที่ใช้งาน apache)

ลบโค้ดที่ซ้ำๆออก

โดยผลการสำรวจพบว่า เว็บใหญ่ๆ มักจะมีโค้ดที่ซ้ำๆกันให้เห็นอยู่เสมอๆ อาจจะเป็นเพราะว่า ขนาดของทีมที่ทำงาน ดังนั้นเราสามารถแก้ไขได้ โดยการเขียน function ขึ้นมาทำงานเพื่อ เรียก javascript, CSS เหล่านี้โดยเฉพาะ โดยให้มีการตรวจการ load ซ้ำเข้าไปด้วย ก็จะช่วยลดการโหลดและทำงานซ้ำซ้อนลงไปได้

ตั้งค่า Ajax ให้มี cache

จะทำให้การ request นั้นเร็วขึ้นอีกมาก แต่ว่าอาจจะต้องพิจารณาเป็นงานไปเพราะว่าบางงานก็ต้องการข้อมูลสดใหม่เสมอไม่ใช่จาก cache 

Flush buffer ออกไปก่อน

เมื่อเราเปิดหน้าเว็บตามปกติ จะมีการทำงานจากส่วนของ server ที่จะใช้เวลาประมาณ 200-500 ms โดยระหว่างนี้ browser ก็จะรอข้อมูลอยู่ โดยเราสามารถตัดการรอ ได้ด้วยการใช้ function flush() เพื่อเป็นการส่งข้อมูลที่โหลดขึ้นมาแล้วไปยัง user ก่อน พร้อมกันระหว่างการประมวลผลในส่วนต่อๆไป โดยปกตินิยมการ flush ส่วน head ออกมาก่อน  ในระหว่างที่กำลังโหลด body โดยการเอา function นี้ไปคั่นระหว่าง head กับ body นั่นเอง

ใช้การ GET สำหรับ Ajax request

โดยใน URL จะสามารถส่งค่าการ get ได้ 2 K หากมากกว่านั่นจะไม่ได้

Post-load Component 

คือการซ่อน เนื้อหาบางส่วนที่ต้องการ ซึ่งหลักๆจะเป็นภาพ โดยไม่ให้แสดงบนหน้าเว็บ แต่ว่าจะใช้ javascript เรียกเอาในภายหลังจากที่โหลดหน้าเว็บเสร็จแล้ว จะส่งผลให้หน้าเว็บโหลดได้เร็วมาก โดยเทคนิคนี้ มีให้เลือกใช้เยอะ เช่น YUI Image Loader , YUI Get utility แต่ข้อควรระวังคือ กรณีที่ user ไม่สามารถใช้ javascript ได้ ก็จะไม่เห็นส่วนนั้นๆเลย
และที่นอกเหนือจากนี้ก็อ่านเพิ่มเติมได้ที่ http://developer.yahoo.com/performance/rules.html เพราะว่าที่เหลือเป็นเรื่องที่เข้าใจได้ไม่ยากแล้วครับ

*******************************************************************************

เทคนิคการทำ SEO เบื้องต้นที่ควรรู้ (reloaded)

            การทำ SEO หรือ Search Engine Optimizer นั้นเป็นการทำให้โครงสร้างข้อมูลภายในเว็บของเราที่บรรจุอยู่ใน HTML ของเรา และพวก URL ของเรานั้น มีความหมายและทำให้ Crawler (ซึ่งต่อไปจะขอเรียกเป็น Search Engine เพื่อให้เข้าใจตรงกัน) นั้นสามารถเข้ามาเก็บข้อมูลในเนื้อหาของเราได้ง่าย และตรงกับความต้องการให้ได้มากที่สุด

            ซึ่งโดยปกติแล้วจะแนะนำให้ใช้ XHTML ร่วมกับ CSS โดยที่ XHTML นั้นเป็นส่วนที่ใช้สำหรับใส่ข้อมูลและมี Tag พวก XHTML ต่าง ๆ เข้ามายุ่งเกี่ยวกับเนื้อหาให้น้อยที่สุด โดยมีแต่ส่วนที่กำหนดพื้นที่สำหรับแสดงผลต่าง ๆ เป็นชื่อที่สื่อความหมาย โดยใช้พวก <div> และ <span> แล้วกำหนดพื้นที่ของ Layout ด้วยชื่อที่กำหนดใน id หรือ class และโยนหน้าที่การกำหนด Layout ต่าง ๆ ไปที่ CSS ทั้งหมด เพื่อลดขนาดของไฟล์ HTML ที่ตัว Search Engine จะดึงไปเพื่อทำการ Parse ข้อมูลออกมา ทำให้ Search Engine ใช้เวลาประมวลผลต่าง ๆ ลดลงได้มากด้วย แถมลด B/W ลงไปได้เยอะมาก ๆ ในกรณีที่เว็บของเรานั้นมี Priority ในการเข้ามา index ข้อมูลของ Search Engine สูง ๆ

เทคนิดง่าย ๆ แต่ได้ผลนั้นผมสรุปจาก Best and Worst practices for designing a high traffic website อีกทีครับ

1.      ใส่ Keywords หลัก ๆ ลงบน Title เพราะเป็นพื้นที่ที่ระบบ Search Engine ใช้ในการเข้ามา index ข้อมูลอันดับแรก ๆ

2.      ใช้ tag Heading (พวก <h*></h*> ต่าง  ๆ) ให้เป็นประโยชน์เพื่อให้ Search Engine นั้นเข้าถึงข้อมูลสำคัญ ๆ ในส่วนนี้ก่อนเสมอ เพราะ Search Engine จะมองว่า Heading เป็นเหมือนหัวหลักของเนื้อหาเพื่อนำไปใช้สรุปเนื้อหาตอนค้นหาต่อไป

3.      ใช้ alt, title, id, class และพวก caption ต่าง ๆ ที่ใช้อธิบายข้อมูลนั้น ๆ เพราะ Search Engine ไม่เข้าในว่ารูปภาพ หรือข้อมูลพวก Binary ต่าง ๆ ว่ามันคืออะไร
เช่น <img src=”dog.jpg” alt=”Dog jumping into the air” />

4.      ใช้ META Tag ถึงแม้ว่า META Tag จะเป็นเทคนิคเก่า ๆ นับตั้งแต่มี WWW แต่ก็เป็นการดีที่เราควรจะมีไว้ เพราะ Search Engine ยังคงใช้ข้อมูลนี้เพื่อการจัดอับดับข้อมูลของเรา ในกรณีที่ข้อมูลในหน้านั้น ๆ มีมากเกินไป

5.      ใช้ Sitemap โดยการสร้าง Sitemap นั้นมีเครืองมือให้ใช้อยู่มากมาย และยิ่งใช้พวก CMS/Blogware ต่าง ๆ พวก Drupal, Wordpress, XOOP, Joomla/Mambo, PHP-nuke ฯลฯ ก็มี module/component/plug-in เข้ามาช่วยสร้าง Sitemap ให้แทบทั้งนั้น โดยประโยชน์ของ Sitemap นั้นช่วยให้ตัว Search Engine นั้นไม่ต้องวิ่งไต่ไปตามลิงส์ต่าง ๆ ของเว็บของเราเพื่อเข้าถึงข้อมูลทั้งหมด และยิ่งเว็บมีขนาดใหญ่และซับซ้อนมาก ๆ ยิ่งทำให้หน้าที่อยู่ในส่วนของรากลึก ๆ ต้นไม้ที่เป็นลำดับของลิงส์นั้นเข้าถึงยาก การมี Sitemap จึงช่วยในการบ่งบอกกับ Search Engine ได้ว่าเว็บของเรามีหลายอะไรอยู่บ้าง เพื่อให้ตัว Search Engine เข้ามา Index ข้อมูลได้รวดเร็วและสะดวกขึ้น

6.      ทำ URL Friendly หรือ Rewrite URL การทำ URL Friendly นั้นช่วยให้ Search Engine เข้าใจ URL ของเราและทำให้การเก็บ URL และแสดงผล URL เพื่อลิงส์กลับมาหน้าต่าง ๆ ของเว็บเรานั้นทำได้ง่ายมากขึ้น