google page speed insights เป็นเครื่องมือที่ใช้สำหรับตรวจสอบความเร็วเว็บไวต์ ซึ่งจะมี api ที่เปิดไว้ โดยไม่ต้องใส่ api key (ไม่แน่ใจถ้าคนใช้มากๆอาจจะปิดในอนาคต) ซึ่งเราสามารถเรียก api ได้ด้วย url อย่างง่ายๆ และจะได้ข้อมูลของเว็บไซต์นั้น รวมทั้ง รูปภาพ Screenshot หน้าเว็บมาด้วย ผมจึงลองใช้ javascript เรียก api และนำออกมาแสดงผล
เรามาดูตัวอย่างกันครับ (ลองใส่ url เต็มและรอ รูปจะแสดงด้านล่าง)
ในส่วน source code ในส่วน javascript ดูตาม comment (ใช้ jQuery ในการเขียน)
$(document).ready(function(){ // รอทุก element พร้อมค่อยทำงาน
// url ของ google page speed api
var api = 'https://www.googleapis.com/pagespeedonline/v2/runPagespeed?';
// ดัก event เมื่อมีกดปุ่ม ดึงข้อมูล
$(".getdata").click( function(){
// ดึงค่า url จาก input id url
var url = $("#url").val();
// ใช้ jquery get ajax พร้อมทั้งส่งค่า url ที่ต้องการ
$.get( api+"url="+url +"&screenshot=true", function( data ) {
// object data ที่กลับมาจะเป็น json ซึ่งจะมีข้อมูลมีเว็บที่เราเรียกไปหลายอย่าง ลอง console.log(data) ดูก็จะเห็น
// สร้างตัวแปรเพื่อแปลงค่า data.screenshot
var screenshoot = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
// สร้าง base64 image
obimage = "data:"+data.screenshot.mime_type+";base64,"+screenshoot;
// นำรูปไปแสงใน html
$(".imageshow").attr("src", obimage );
});
});
นอกจากข้อมูล Screen shot แล้ว ยังมีข้อมูล css,js และขนาดไฟล์ต่างๆของเว็บนั้นๆกับมาด้วย ซึ่งสามารถนำมาใช้งานได้ นอกเหนือจากตัวอย่างที่ทำมาแต่ screen shot เพียงอย่างเดียว