ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Brand & AuthorityShare B&Aแชร์ประสบการณ์!! วิธีทำให้ Facebook Page Plugin โหลดเร็วขึ้น เพิ่มคะแนน PageSpee
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: แชร์ประสบการณ์!! วิธีทำให้ Facebook Page Plugin โหลดเร็วขึ้น เพิ่มคะแนน PageSpee  (อ่าน 3990 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Judinho
ก๊วนเสียว
*

พลังน้ำใจ: 31
ออฟไลน์ ออฟไลน์

กระทู้: 421



ดูรายละเอียด เว็บไซต์
« เมื่อ: 19 ตุลาคม 2016, 19:50:18 »

แชร์ประสบการณ์!! วิธีทำให้ 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 กับรูปภาพเพียงอย่างเดียว
« แก้ไขครั้งสุดท้าย: 19 ตุลาคม 2016, 19:52:06 โดย Judinho » บันทึกการเข้า

placarp
สมุนแก๊งเสียว
*

พลังน้ำใจ: 77
ออฟไลน์ ออฟไลน์

กระทู้: 960



ดูรายละเอียด
« ตอบ #1 เมื่อ: 19 ตุลาคม 2016, 19:54:45 »

 wanwan017
บันทึกการเข้า
musichost
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 220
ออฟไลน์ ออฟไลน์

กระทู้: 1,838



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 19 ตุลาคม 2016, 20:36:44 »

ขอเอาไปลองครับ   wanwan017
บันทึกการเข้า

##โฮสติ้ง ยุคนี้ หมดปัญหาเรื่อง Permission Chmod 777, มี PHP 8.0/7.2 และ 5.6 - MariaDB 10
### Hosting/VPS/จดโดเมน ฟรีบริการย้ายข้อมูลเว็บ คลิกดูรายละเอียด ###
หนุ่มบ้านโคก
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 119
ออฟไลน์ ออฟไลน์

กระทู้: 3,128



ดูรายละเอียด
« ตอบ #3 เมื่อ: 19 ตุลาคม 2016, 20:37:23 »

เดี๋ยวลองครับ  wanwan017
บันทึกการเข้า

gd,lN
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 96
ออฟไลน์ ออฟไลน์

กระทู้: 1,743



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 19 ตุลาคม 2016, 20:51:41 »

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

Opcha7621
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 35



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 03 พฤศจิกายน 2016, 15:09:36 »

น่าสนใจ
บันทึกการเข้า

ผลิต จำหน่าย สร้างแบรนด์
รับตัวแทนทั้งแบบลงทุนไม่ลงทุน
ผลิตภัณฑ์จากถั่วดาวอินคา ถั่วดาวอินคาอบกรอบ ชาดาวอินคา มีรูปสินค้าให้ สอนการทำการตลาดเบื้องต้นฟรี ฟรีค่าสมัคร
markhacd
สมุนแก๊งเสียว
*

พลังน้ำใจ: 14
ออฟไลน์ ออฟไลน์

กระทู้: 589



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 03 พฤศจิกายน 2016, 15:23:19 »

เยี่ยมเลยขอบคุณที่แบ่งปัน
บันทึกการเข้า

หากคุณกำลังมองหาเครื่องสแกนลายนิ้วมือ / เครื่องสแกนใบหน้า / สแกนนิ้ว / สแกนนิ้วมือ แนะนำบริษัทที่จำหน่ายสินค้าคุณภาพที่ www.สแกนนิ้ว.com
หน้า: [1]   ขึ้นบน
พิมพ์