วิธีทำให้ PageSpeed(เพจสปีด) Joomla (จูมล่า)คะแนนดีขึ้น

คู่มือ แชร์วิธีใช้งาน Joomla ทุกเวอร์ชั่น ตั้งแต่ การติดต้้งและใช้งานต่างๆ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pond
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 571
ลงทะเบียนเมื่อ: 25/05/2016 9:44 am

วิธีทำให้ PageSpeed(เพจสปีด) Joomla (จูมล่า)คะแนนดีขึ้น

โพสต์โดย pond » 29/09/2016 1:51 pm

วิธีทำให้ เพจสปีด PageSpeed คะแนนดีขึ้น
ก่อนอื่นเลยต้องรู้ก่อนว่า PageSpeed คืออะไร PageSpeed ก็คือเว็บไซต์ของกูเกิ้ล Google ที่สามารถวิเคราะห์โครงสร้างเว็บการเชื่อมต่อต่างๆแล้วบอกคะแนนความเร็วและการเชื่อมต่อของเว็บไซต์ว่าได้เท่าไหร่ โดยคะแนนที่ได้จาก PageSpeed นั้นมีผลต่อ เสิร์ชเอ็นจิ้น SEO ด้วยที่จะช่วยให้เว็บไซต์ของเราติดอันดับ Google กูเกิ้ลในลำดับแรกๆโดยแบ่งออก เป็นทั้งรูปแบบ Responsive Web Design เรซสปอนต์ซีฟ เว็บ ดีไซน์ หรืออยู่ในหมวด Mobile Friendly โมบาย เฟรนด์ลี่ นั่นเอง และอีกรูปแบบ Desktop เดสท็อป คือขนาดหน้าจอคอมพิวเตอร์นั่นเอง

โดนการให้คะแนนของเพจสปีด PageSpeed นั้นจะสูงสุดที่ 100 คะแนนนับจากการไม่มีข้อผิดพลาดที่ทาง เพจสปีด PageSpeed ได้กำหนดไว้ซึ่งเราจะรู้ได้จากการไปที่เว็บ เพจสปีด PageSpeed เสียก่อน จากนั้นกด Use PageSpeed Insight
htaccessnaja.png
htaccessnaja.png (58.17 KiB) เปิดดู 374 ครั้ง

หลังจากนั้นจะเจอหน้านี้ทำการกรอก URL ลงในช่องเสร็จแล้วกด Analyze
pagespeed2.png
pagespeed2.png (55.75 KiB) เปิดดู 374 ครั้ง

หลังจากนั้น เราจะเห็นคะแนนและเหตุผลที่คะแนนไม่เต็ม โดยสีแดงนั้นหมายถึงเป็นปัจจัยใหญ่ๆเลยทำให้คะแนนน้อยลง สีเหลืองคือพอประมาณ และสีเขียวคือผ่าน
openzz.png
openzz.png (15.47 KiB) เปิดดู 374 ครั้ง

วิธีเพิ่มคะแนนให้ PageSpeed
Leverage browser caching
โดยหลักๆแล้วเว็บไซต์ของ joomla จะติดปัญหาการเคลียแคสเก่าที่ไม่ได้ใช้แล้ว ตัวอย่างเช่น แคสเก่าให้แสดงภาพๆหนึ่ง แต่ภาพๆนั้นในปัจจุบันไม่มีอยู่จริงหรือแสดงในหน้านั้นๆแล้ว วิธีแก้ปัญหาก็คือให้ไปที่ไฟล์ htaccess.txt ให้เข้าไปกำหนดระยะเวลา ของแคสต่างๆตัวอย่างเช่น code ดังต่อไปนี้ให้ไปวางไว้ตรงส่วนท้ายข้างในไฟล์ htaccess.txt
d1pagespeed.png
d1pagespeed.png (75.09 KiB) เปิดดู 374 ครั้ง


โค้ด: เลือกทั้งหมด

########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"

ExpiresByType application/smil "now plus 1 month"
# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"

Optimize images image, JavaScript, CSS
Optimize images คือการลดขนาดของภาพที่ไม่จำเป็นออก เช่นคุณมีภาพบนเว็บไซต์ที่ไว้ใช้แสดงเป็นไอค่อนปุ่มเล็กๆขนาด 30 * 30 pixel โดยใช้ CSS ในการกำหนดขนาดแต่ทว่าภาพที่คุณใช้นั้นมีขนาดจริงขนาดความกว้างถึง 500 * 500 pixel แบบนี้เป็นต้น ซึ่งมี pixel เกินมาเป็นจำนวนมากมีผลต่อการให้คะแนนของ เพจสปีด PageSpeed ต้องทำการลดขนาดของภาพให้เหมาะสมกับการใช้งาน
JavaScript, CSS คือการลดขนาดตัวอักษรที่ไม่จำเป็นออกเช่น การเว้นวรรค ต่างๆแบบนี้เป็นต้น
วิธีแก้ไข ก็คือให้เลื่อนหน้าเว็บ เพจสปีด PageSpeed ลงมาข้างล่าง ซึ่ง เพจสปีด PageSpeed ได้ทำการแก้ไขข้อผิดพลาดเหล่านี้ไว้ให้แล้วให้เราทำการกด Download มาได้เลย
downloadoptimizedz.png
downloadoptimizedz.png (16.05 KiB) เปิดดู 374 ครั้ง

จะได้ไฟล์
pagespeedconfig.png
pagespeedconfig.png (51.58 KiB) เปิดดู 374 ครั้ง


เปิดออกมาจะเจอโฟลเดอร์เก็บ css image js เก็บไฟล์ที่ทำการ Optimize มาให้จาก PageSpeed และมีไฟล์ MANIFEST ติดมาด้วยมีข้อมูลที่บอกว่าจะเอาไฟล์ไหนไปทับไฟล์เดิมบ้าง
pagespeed3.png
pagespeed3.png (57.35 KiB) เปิดดู 374 ครั้ง


Eliminate render-blocking JavaScript and CSS in above-the-fold content
โดย render-blocking นั้นเป็นปัญหาใหญ่ไม่แพ้ caching เลย ถ้าแก้ได้นั้นคะแนน PageSpeed จะขึ้นเป็นจำนวนมาก แก้โดยการติดตั้งJoomla Extension(จูมล่า เอ็กเทนชัน) อย่างตัว Plugins(ปลั๊กอิน) jbetolo ซึ่งตัวนี้ช่วยได้เยอะเลยสามารถแก้ปัญหา render-blocking ของเว็บไซต์สำเร็จรูปอย่าง Joomla(จูมล่า)ได้เป็นอย่างดี ซึ่งมีความสามารถมากมายสามารถเข้าไป Config(คอนฟิก) ได้อย่างง่ายกายเพียงไม่กี่คลิ๊กพร้อมทั้งรวมไฟล์ css ที่จะใช้ไว้ในไฟล์เดียวสามารถเรียกใช้ได้เร็วขึ้นอีกด้วย
loadma.png
loadma.png (8.4 KiB) เปิดดู 374 ครั้ง

ผลลัพธ์
fpagespeed.png
fpagespeed.png (16.91 KiB) เปิดดู 374 ครั้ง

หมายเหตุ* ถ้าเว็บไซต์ของท่านมีการ iframe เว็บไซต์อื่นมา ทำให้เป็นไปได้ยากที่เว็บไซต์ของท่านจะได้เต็ม 100 คะแนนนะครับ แค่ทำให้เป็นสีเขียวก็ถือว่าอยู่ในระดับที่ดีแล้วครับ

ร่วมสร้างสังคมแห่งการแบ่งปันความรู้ เว็บไซต์สำเร็จรูป Joomlaจูมล่า ได้ที่นี่เลยนะจ๊ะ

samrajka
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 30/09/2016 4:32 pm
ติดต่อ:

Re: วิธีทำให้ PageSpeed(เพจสปีด) Joomla (จูมล่า)คะแนนดีขึ้น

โพสต์โดย samrajka » 30/09/2016 4:39 pm

ขอบคุณมากเลยครับ เดี๋ยวจะลองทำดู :lol:


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน