วิธีลดขนาด CSS ให้บล็อกโหลดได้เร็วขึ้น

 

 

ก่อนอื่นก็ขอกล่าวถึง CSS โค้ดให้พอรู้จักเสียก่อนครับก่อนที่จะไปทำการลดรูปมันอีกที

 

xhtmlimage

 

CSS โค้ดเป็นโค้ดส่วนที่กำหนดการแสดงผลและจัดองค์ประกอบต่าง ๆให้กับบล็อกของเรา เช่น กำหนดกว้าง-ยาว พื้นหลัง สีและขนาดอักษร หรือการใส่ขอบของภาพเป็นต้น ซึ่งถ้าเราเข้าไปที่เมนู >> แก้ไข HTML ก็จะเห็นโค้ดเหล่านี้อยู่ในตำแหน่งระหว่าง tag <head> กับ </head> ถ้ายังนึกไม่ออกก็ดูที่โค้ดสีเขียวด้านล่างนี้ ครับ

 

 


<html>
    <head>

      /* ตัวอย่างของ CSS โค้ด */     

     body {
                background-color : #f7f7f7;
            }
            #sample1 {
                border-collapse : collapse;
                width : 510px;
                background-color : #fff;
                border-left : 1px solid #000;
                border-right : 1px solid #000;
            }
            #sample1 td {
                padding : 5px;
            }


            #sample2 {
                margin : auto; padding : 5px;
                width : 500px;
                background : #fff;
                border-left : 1px solid #000;
                border-right : 1px solid #000;
            }


    </head>

 

    <body>

 

        <!--ส่วนนี้เป็น HTML โค้ด-->

 

    </body>
</html>



ขนาดของ CSS มีผลต่อการโหลดบล็อกของเราแน่นอนครับ หากมีโค้ดมาก และขนาดใหญ่เกินไป ดังนั้นหากใครต้องการลดขนาด CSS โค้ดให้เล็กลงก็ดำเนินการตามนี้ได้เลยครับ

 

ขั้นที่ 1 ไปที่แผงควบคุม รูปแบบ แก้ไขHTML ขยายแม่แบบเครื่องมือ

 

ขั้นที่ 2 ทำการ back up Template ไว้ก่อน กันพลาด โดยคลิกที่ข้อความ “ดาวน์โหลดแม่แบบฉบับเต็ม” เพราะหากลดขนาดแล้วไม่เหมือนเดิม หรือแสดงผิดพลาด ก็อัปโหลดแม่แบบขึ้นมาใหม่ ทุกอย่างก็จะยังเหมือนเดิมครับ

 

backup Templates

ขั้นที่ 3 ให้คัดลอก CSS โค้ดทั้งหมดที่อยู่ระหว่าง โค้ด <b:skin><![CDATA[/* และ  ]]></b:skin>

 

<b:skin><![CDATA[/*


คัดลอกโค้ดที่นี่


]]></b:skin>



ขั้นที่ 4 ไปที่ http://tools.arantius.com/css-compressor 

 

นำโค้ดที่คัดลอกมาไปวางในส่วน Code in

CSS 

 

ขั้นที่ 5  คลิกเลือก 

-Strip comments at least 4 characters long และ
-One rule per line

แล้วกด ปุ่ม Compress

 

CSS1

 

ขั้นที่ 6  arantius.com จะทำการจัดเรียงและลดขนาด CSS โค้ดให้เรา >> เมื่อเสร็จแล้วก็คัดลอก โค้ดในส่วน Code out มาวางใน Template แทนที่ โค้ดเดิม หากทดลองแสดงผลแล้วไม่พบข้อผิดพลาดใดๆ ก็บันทึกแม่แบบ ก็ถือว่าจบขั้นตอนครับ

ตอนนี้มีความคิดเห็น : 2 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอนคุณมากค่ะลองลดขนาดดูแล้วไม่มีปัญหา...

  1. ขอบคุณมากเลยนะครับ เว็บโหลดเร็วขี้นเยอะ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel