การทดสอบความเร็วในการโหลดเว็บเพจ

Performance testing speed vs abandonment

 

ในปัจจุบันมีการพูดถึงความเร็วในการโหลดหน้าเว็บมากขึ้นเรื่อย ๆ รวมไปถึงยังมีคำถามตามมาด้วยว่ามันมีผลต่ออันดับของเว็บไซต์หรือไม่ จากข้อมูลที่ผมศึกษามาผมจำได้ว่า ไม่มีผลตรง ๆ ต่อการจัดอันดับเว็บไซต์ หากแต่มีผลในทางอ้อม ยังไงก็ตามหากคุณเป็นเจ้าของเว็บที่โหลดเร็วอยู่แล้ว คงไม่มีผลกระทบอะไรมากนัก

ผลกระทบในทางอ้อมที่ผมหมายถึงนั้นก็คือ โอกาสของ Traffic ที่เราจะได้นั้นมีมากขึ้น เหมือนจะเคยได้ยินมาว่ามีการวิจัย (ผมไม่เคยอ่านนะ) บอกว่าเว็บเพจที่โหลดเร็วขึ้นนั้น ผู้ใช้จะทำการท่องเว็บของเราหลายเพจมากขึ้นตามไปด้วย ซึ่งนั่นก็หมายถึง % การดีดกลับ (bound rate) จะน้อยลงตามไปด้วย ซึ่งตรงนี้เองที่ไปเป็นส่วนช่วยให้เว็บเราดูดีขึ้นในสายตา Google เพราะมันบ่งบอกได้ถึงสิ่งที่มีคุณภาพมากขึ้น หากคุณสังเกตุดี ๆ ช่วงหลัง ๆ จะมีผู้คนมากมายในวงการนี้พูดถึง Panda ที่ต้องการเนื้อหาของเว็บไซต์ที่มากขึ้น รวมไปถึงมีรูปภาพหรือวีดีโอประกอบด้วย ซึ่งหากเรามองไปถึงคำว่า”เพื่ออะไร?” คำตอบก็คงจะเพื่อให้คนอยู่ในเพจของเรานานขึ้นนั่นเอง

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

เพราะฉะนั้นแล้ว ผมจะขอยกวิธีการหลัก ๆ ที่ผมแอบไปเจอมาเมื่อช่วงต้นปีนี้ มาบอกกล่าวกันตรงนี้ละกัน (คุณสามารถติดตั้ง Page Speed ในบราวเซอร์ Firefox หรือ Chrome เพื่อตรวจสอบความเร็วในการโหลดหน้าเว็บได้นะครับ แต่สำหรับ IE ไม่แน่ใจ อาจจะไม่ได้)

1. บีบอัดเนื้อหาด้วย Gzip compression technology ซึ่งการทำแบบนี้ Server จะทำการส่งข้อมูลที่อยู่ในรูปของการบีบอัด (ซึ่งเล็กกว่าเดิม) ไปที่ Browser โดยที่ Browser เองก็มีเทคโนโลยีที่จะปลดการบีบอัดอยู่แล้ว เพราะฉะนั้นมันจึงเร็วกว่าเดิม

Gzip Compression

Gzip Compression

 

ที่จริงการทำ 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 ขอโหลดรูปหลาย ๆ ครั้ง เป็นประโยชน์มากกับพวก ไอคอนต่าง ๆ ลองศึกษา CSS Sprite ผมไม่ได้เขียนอธิบานนะ เพราะเว็บภาษาไทยมีสอนเพียบเลย ลองดูแล้วกันนะครับ

คงเท่านี้ก่อนละครับ ไว้ถ้าเจออะไรดี ๆ เกี่ยวกับหัวข้อนี้จะเอามาเพิ่มนะ

 

References

[1] Speed up web page loading

 

2 Comments on SEO กับการเพิ่มความเร็วให้เว็บ (Page Speed SEO)

  1. วิทย์ says:

    CSS และ JS บีบด้วย
    http://compressor.ebiene.de/

    ลดได้เยอะ เหมือนกับเข้ารหัสเลย คนอ่านยากขึ้น

    • Ngokung says:

      งะ ไม่เคยลองแฮะ แต่น่าสนใจ เดี๋ยวเอาไว้ลองดู
      ขอบคุณครับ

Leave a Reply

*


*