กำหนดการแคชในเบราว์เซอร์ แปะไว้กันลืม

พอดีได้ไปนั่งแก้ไขเว็บไซต์ รุ่นพระเจ้าเหามาที่เคยทำไว้ครับ เค้าบอกว่ามันช้า ผมเลยลองเอาเข้าไปเทสสปีดเว็บไซต์ดู ปรากฏว่า แม่เจ้า ได้แค่ 60/100 เองครับ สรุปให้อย่างแรก หลังจากทดสอบมานะครับ สิ่งที่ทำให้คะแนนมันต่ำเตี้ยเรี่ยดินขนาดนี้ก็คือ การไม่ได้แคชไฟล์รูปภาพในเว็บนะครับ วิธีการแก้ไขนะครับ

สำหรับคนที่ใช้โฮสแบบ Linux
ให้เข้าไปแก้ที่ .httaccess ครับโดยเพิ่มคำสั่งเหล่านี้ไปครับ

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000

**604800 คือหน่วยวินาทีครับ บวกลบคูณหารแล้วก็คือ เก็บไว้ 7 วันครับ

สำหรับคนที่ใช้ host แบบ window server
ให้เข้าไปแก้ไฟล์ web.config ครับ โดยเพิ่มตามนี้

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
  </system.webServer>
</configuration>

**7.00:00:00 หมายถึงเจ็ดวันครับ

ทำไมถึงต้องเจ็ดวัน ผมลองน้อยกว่านี้ page speed มันไม่ผ่านอ่ะครับ  ผมเลยเข้าใจว่า มันคงให้เก็บแคชไว้น้อยสุด 7 วันครับ

ปล. ไฟล์ .htaccess หรือ web.config หากไม่มี เพิ่มเองได้เลยครับ วางไว้ที่ อยู่เดียวกับไฟล์ index หน้าแรกครับ

อันนี้คือพอแก้ไขเสร็จแล้วครับ

พอแก้เรื่อง cache แล้วความเร็วก็พุ่งประมาณนี้ล่ะครับ จาก60/100

ว่างๆ เด๋วจะมาต่อเรื่อง css/js กับการบล๊อกเนื้อหาด้านบนนะครับ

ทำปุ่มลูกศรด้านล่างเว็บ เพื่อไปยังด้านบนสุดของเพจ (back-to-top button)

เคยเจอไหมครับ เวลาเราเข้าเว็บไปแล้วเลื่อนอ่านลงไปสักพัก แล้วจะมีปุ่ม เขียนประมาณว่า "กลับไปบนสุด" หรือเป็นรูปลูกศรชี้ขึ้น ในที่นี้เรียกว่าปุ่ม back to top ก็แล้วกันครับ ใครอยากหาวิธีทำเพิ่มเติม แนะนำให้ Search google คำนี้เลยครับ back to top button

ส่วนบทความนี้อีกเช่นเคย แปะไว้กันลืม การทำปุ่ม back to top ครับ
เริ่มจากเราต้องแอด jquery.min.js มาก่อนครับในtag <header>

** jquery.min.js ไปหาโหลดเอาเองได้ทั่วไปนะครับ หรือจะใส่ลิงค์จากต้นทางอื่นๆ ก็ได้นะครับ **

<header>
.
.
<script src="jquery.min.js"></script>
</header>



ขั้นต่อมาให้ใส่โค๊ดตามนี้

<script type='text/javascript'>
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
<a href="javascript:void(0);" id="scroll" title="กลับไปบนสุด" style="display: none;">Top<span></span></a>

<script>
var amountScrolled = 300;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>

และให้ใส่ใน css ตามนี้
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
   opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

ภาพปุ่ม back-to-top อยู่มุมขวาล่าง

แค่นี้ครับ โดยที่ตัวอักษรสีแดง หมายถึง ถ้าเลื่อนลงไปกี่พิกเซล ปุ่มถึงจะโผล่มา กำหนดเองได้เลยครับ
ส่วนตัว css นั้นก็กำหนดสีสันของปุ่มได้ครับ แล้วแต่เลยครับ จบฮะ