ThaiSEOBoard.com

แชร์ประสบการณ์!! วิธีทำให้ 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 กับรูปภาพเพียงอย่างเดียว

 :wanwan017:

ขอเอาไปลองครับ   :wanwan017:

เดี๋ยวลองครับ  :wanwan017:

ตอนนี้ ผมทำลิงค์แทนใช้ script หมดครับ

น่าสนใจ

เยี่ยมเลยขอบคุณที่แบ่งปัน