ในปัจจุบันมีการพูดถึงความเร็วในการโหลดหน้าเว็บมากขึ้นเรื่อย ๆ รวมไปถึงยังมีคำถามตามมาด้วยว่ามันมีผลต่ออันดับของเว็บไซต์หรือไม่ จากข้อมูลที่ผมศึกษามาผมจำได้ว่า ไม่มีผลตรง ๆ ต่อการจัดอันดับเว็บไซต์ หากแต่มีผลในทางอ้อม ยังไงก็ตามหากคุณเป็นเจ้าของเว็บที่โหลดเร็วอยู่แล้ว คงไม่มีผลกระทบอะไรมากนัก
ผลกระทบในทางอ้อมที่ผมหมายถึงนั้นก็คือ โอกาสของ Traffic ที่เราจะได้นั้นมีมากขึ้น เหมือนจะเคยได้ยินมาว่ามีการวิจัย (ผมไม่เคยอ่านนะ) บอกว่าเว็บเพจที่โหลดเร็วขึ้นนั้น ผู้ใช้จะทำการท่องเว็บของเราหลายเพจมากขึ้นตามไปด้วย ซึ่งนั่นก็หมายถึง % การดีดกลับ (bound rate) จะน้อยลงตามไปด้วย ซึ่งตรงนี้เองที่ไปเป็นส่วนช่วยให้เว็บเราดูดีขึ้นในสายตา Google เพราะมันบ่งบอกได้ถึงสิ่งที่มีคุณภาพมากขึ้น หากคุณสังเกตุดี ๆ ช่วงหลัง ๆ จะมีผู้คนมากมายในวงการนี้พูดถึง Panda ที่ต้องการเนื้อหาของเว็บไซต์ที่มากขึ้น รวมไปถึงมีรูปภาพหรือวีดีโอประกอบด้วย ซึ่งหากเรามองไปถึงคำว่า”เพื่ออะไร?” คำตอบก็คงจะเพื่อให้คนอยู่ในเพจของเรานานขึ้นนั่นเอง
จะเห็นได้ว่าสิ่งที่ Panda แนะนำนั้น ก็ตรงกับสิ่งที่ความเร็วของเว็บเพจสามารถตอบสนองได้ เมื่อเป็นเช่นนั้นแล้ว ทำไมเราไม่พยายามทำให้เว็บเราเร็วขึ้นล่ะ (เว็บใครเร็วอยู่แล้วก็ไม่ต้องกังวลใจไปนะคร้าบบ มองไปที่จุดอื่นได้เลย หรือจะอ่านเอาความรู้ หรือจะทำให้เร็วขึ้นไปอีกก็คงไม่มีใครว่า)
เพราะฉะนั้นแล้ว ผมจะขอยกวิธีการหลัก ๆ ที่ผมแอบไปเจอมาเมื่อช่วงต้นปีนี้ มาบอกกล่าวกันตรงนี้ละกัน (คุณสามารถติดตั้ง Page Speed ในบราวเซอร์ Firefox หรือ Chrome เพื่อตรวจสอบความเร็วในการโหลดหน้าเว็บได้นะครับ แต่สำหรับ IE ไม่แน่ใจ อาจจะไม่ได้)
1. บีบอัดเนื้อหาด้วย Gzip compression technology ซึ่งการทำแบบนี้ Server จะทำการส่งข้อมูลที่อยู่ในรูปของการบีบอัด (ซึ่งเล็กกว่าเดิม) ไปที่ Browser โดยที่ Browser เองก็มีเทคโนโลยีที่จะปลดการบีบอัดอยู่แล้ว เพราะฉะนั้นมันจึงเร็วกว่าเดิม
ที่จริงการทำ Gzip Compression ทำได้หลายวิธี แต่หากทำด้วย PHP นั้นจะง่ายกว่า ใน Article ที่เป็น spurce จึงอธิบายเป็น php ไว้ให้ดังนี้ (ตัวอย่างเป็น Word Press นะครับ)
เข้าไปแก้ไฟล์ index.php โดยเพิ่มข้อความนี้ไว้บนสุดของไฟล์ (ให้อยู่ภายในเครื่องหมาย <? …. ?> )
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) {
ob_start(“ob_gzhandler”);
}
else {
ob_start();
}
ซึ่งโค้ดนี้ก็คือโค้ดที่ทำการบีบอัดด้วย Gzip Compression ก่อนที่จะส่งให้บราวเซอร์นั่นเอง หากเราทำตรงนี้เรียบร้อยแล้ว มันหมายความว่าเราสามารถบีบไฟล์ php เล็กลงได้แล้ว แต่สิ่งที่เราต้องบีบอัดนั้นจริง ๆ แล้วไม่ใช่แค่ php หากแต่เป็น CSS และ JS ด้วย แล้วเจ้าโค้ดที่เรามีนั้นทำได้แค่ php เพราะมันเป็น php code … เพราะงั้นเราจะทำยังไงได้อีก นอกจากแปลง CSS กับ JS ให้เป็น php ซะเลย ซึ่งมีวธีการทำดังต่อไปนี้
2. Gzip compression สำหรับ CSS และ JS
อันดับแรก สร้า้งไฟล์ชื่อว่า gzipCSS.php ขึ้นมาก่อน โดยมี code ดังนี้
<?php
//PHP gzip method
ob_start (“ob_gzhandler”);
//Header to tell browser what kind of file it is.
header(“Content-type: text/css; charset: UTF-8″);
//Caching
header(“Cache-Control: must-revalidate”);
$expires = “Expires: ” . gmdate(“D, d M Y H:i:s”, time() + 3600) . ” GMT”;
header($expires);
?>
ต่อไปเราก็ copy ไฟล์ css มาเปลี่ยนเป็นนามสกุล php มีที่มีโค้ดดังต่อไปนี้ อยู่ที่บนสุดของไฟล์
<?php
require_once(“gzipCSS.php”);
?>
เท่านี้เราก็แปลง css เป็น php ได้สำเร็วแล้ว แต่อย่าลืมว่าเวลาเราเรียกใช้นั้น ก็ต้องเปลี่ยนมันเป็น .php เช่นกัน
<link rel=”stylesheet” href=”http://www.php-developer.org/wp-content/themes/arras-theme.1.3.5/css/styles/default.css” type=”text/css” media=”screen” />
เปลี่ยนจากอันบนเป็นอันล่างครับ
<link rel=”stylesheet” href=”http://www.php-developer.org/wp-content/themes/arras-theme.1.3.5/css/styles/default.php” type=”text/css” media=”screen” />
ถ้าคุณมี CSS หลายไฟล์คุณก็ทำแบบเดียวกันนี้กับไฟล์อื่น ๆ ไปด้วย และสำหรับ JS ขั้นตอนการทำก็แบบเดียวกัน แต่เปลี่ยนจาก CSS เป็น JS เน้อออออ
เสร็จแล้วอย่าลืมใช้ Page Speed ทดสอบนะครับ ว่ามันลดได้จริงมั้ย แล้วทดสอบดูด้วยว่าทำแล้วมีอะไรผิดพลาดหรือเปล่า เช่น JS ไม่สามารถทำงานได้เป็นปกติ แต่ของผมก็ปกติทุกอย่างนะ ยกเว้นไฟล์ js ไฟล์ (อันอื่นผ่านหมดจ้า)
3. Parallel loading สำหรับเว็บที่มีรูปภาพเยอะ ๆ ก็สามารถใช้วิธีการนี้ได้ ซึ่งก็คือการสร้าง subdomain ขึ้นมาช่วยโหลด ทั้งนี้ก็เพราะ browser จะไม่โหลดไฟล์จาก subdomain เดียวกันทีเดียวหลาย ๆ ไฟล์ นั่นหมายความว่าหากเต็มจำนวนแล้ว ก็ต้องรอให้ไฟล์ที่โหลดอยู่โหลดเสร็จก่อน (แต่ถ้าใช้ subdomain เข้ามาช่วย จะโหลดได้มากขึ้นกว่าเดิมในเวลาเดียวกัน แต่ถ้าใช้ subdomain มาช่วยโหลดมากเกินไปอาจจะช้ากว่าเดิมก็ได้ เพราะรู้สึกว่ามันจะต้องใช้เวลาทำการเชื่อมต่อมั้ง)
4. CSS imsge sprite เทคนิครวมรูปภาพหลายๆรูป ในหน้าเว็บให้เป็นไฟล์รูปภาพเพียงไฟล์เดียว ซึ่งอันนี้ก็ใช้ช่วยให้ไม่ต้องทำการ request ขอโหลดรูปหลาย ๆ ครั้ง เป็นประโยชน์มากกับพวก ไอคอนต่าง ๆ
เทคนิคนี้ช่วยลดเวลาการติดต่อระหว่าง browser กับ web server ได้ เช่น ถ้าหน้าเว็บนั้นๆ มีไฟล์ภาพจำนวน 10 ภาพ แปลว่าต้องมีการเรียกไปที่เซิร์ฟเวอร์ถึง 10 ครั้ง แต่เราสามารถใช้เทคนิค css sprite ช่วยลดเวลานี้ โดยการรวมภาพเป็นไฟล์เดียว แต่การรวมภาพนี้จะรวมแต่วางภาพย่อยๆตามลำดับ ในภาพๆเดียว แล้วเวลาเรียกใช้ภาพมาแสดงก็อ้างอิง pixel ของภาพ
การทำ CSS Sprite สามารถทำได้หลายวิธี อาจจะใช้ photoshop ทำภาพ Sprite ก็ได้แต่อาจจะยุ่งยากไป แนะนำให้ใช้บริการเว็บที่ทำภาพ Sprite จะง่ายกว่า แค่ upload zip ภาพขึ้นไปแล้วจะได้ภาพ css sprite และ css ด้วย เว็บนี้เลยครับ http://spritegen.website-performance.org/
แล้วเวลาเขียน html นำภาพมาแสดงในหน้าเว็บ ต้องใช้ css มาแสดงภาพเป็น background
จากตัวอย่าง css ด้านล่างนี้
css code
.catgame{background-image:url(./images/categame.png);background-repeat:no-repeat;background-position:left center;}
.fd-english{background-position:0 0;width:50px;height:50px;}
.fd-advise{background-position:0 -100px;width:50px;height:50px;}
.fd-adventure{background-position:0 -200px;width:50px;height:50px;}
.fd-card{background-position:0 -300px;width:50px;height:50px;}
.fd-action{background-position:0 -400px;width:50px;height:50px;}
html code
p class="catgame fd-english"> text ........
p class="catgame fd-advise">text ........
รับทําเว็บไซต์ 
แลกลิงค์ 
