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

[Judinho]

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

[placarp]

 

[musichost]

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

[หนุ่มบ้านโคก]

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

[gd,lN]

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

[Opcha7621]

น่าสนใจ

[markhacd]

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