แชร์ประสบการณ์!! วิธีทำให้ Facebook Page Plugin โหลดเร็วขึ้น เพิ่มคะแนน PageSpee

แชร์ประสบการณ์!! วิธีทำให้ Facebook Page Plugin โหลดเร็วขึ้น ก่อนอื่นต้องบอกก่อนว่าเป็นการค้นหาปรับจูน เยอะ พอสมควร แต่สุดท้ายก็มาจบที่ Facebook SDK ช่วงแรกที่เอา Fan Page Facebook มาติดที่เว็บเรา โค้ดที่ได้มาจะเป็น

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v2.8&appId=xxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

แบบนี้ใช่ไหมครับ เลยทองเทส PageSpeed Insights คะแนนอยู่ที่ 53 สำหรับมือถือ คะแนน 68 สำหรับคอมพิวเตอร์

จากนั้น ผมเลยเปลี่ยนแปลงใหม่ โดยใช้โค้นี้ และแทรกโค้ด js.async = true; เข้าไป

<script>
  window.fbAsyncInit = function() {
   FB.init({
   appId : 'xxxxxxxxxxxxxx',
   xfbml : true,
   version : 'v2.8'
   });
   FB.AppEvents.logPageView();
  };

  (function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.async = true;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

ทองเทส PageSpeed Insights คะแนนอยู่ที่ 60 สำหรับมือถือ คะแนน 77 สำหรับคอมพิวเตอร์ เลยทีเดียว

ลองดูนะครับ หากทำแล้วผลคะแนนยังไม่เพิ่มเท่าไหร่ ลองเพิ่ม htaccess ด้วยนะครับ อย่าเช่น

<IfModule mod_deflate.c>
   AddType x-font/woff .woff
   AddOutputFilterByType DEFLATE image/svg xml
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/xml
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE application/xhtml xml
   AddOutputFilterByType DEFLATE application/rss xml
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(.gz)?$">
<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresDefault A0
   ExpiresByType image/gif A2592000
   ExpiresByType image/png A2592000
   ExpiresByType image/jpg A2592000
   ExpiresByType image/jpeg A2592000
   ExpiresByType image/ico A2592000
   ExpiresByType image/svg xml A2592000
   ExpiresByType text/css A2592000
   ExpiresByType text/javascript A2592000
   ExpiresByType application/javascript A2592000
   ExpiresByType application/x-javascript A2592000
</IfModule>
<IfModule mod_headers.c>
   Header set Expires "max-age=2592000, public"
   Header unset ETag
   Header set Connection keep-alive
   FileETag None
</IfModule>
</FilesMatch>

<FilesMatch ".(html|htm)$">
   AddDefaultCharset UTF-8
<ifModule mod_headers.c>
   FileETag None
   Header unset ETag
   Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
   Header set Pragma "no-cache"
   Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT"
</ifModule>
</FilesMatch>

สามารถนำไปประยุกต์ ดูนะครับ ผมทดสอบกับเว็บ http://www.1000tipsit.com/

ครับ อีกอย่างหนึ่ง หากเว็บท่านใช้ js เยอะแนะนำให้ติดตั้งปลั๊กอิน

Async JavaScript สำหรับทำ Defer JavaScript ลดปัญหา Render-Blocking JavaScript in Above the fold content
Jetpack ใช้ในส่วนของ Photon เพื่อใช้ CDN กับรูปภาพเพียงอย่างเดียว