เทคนิคทำให้เว็บโหลดเร็ว 8 วิถี

กุมภาพันธ์ 27, 2017, 01:31:43 PM *
ข่าว: ของเล่นเสริมพัฒนาการ ของเล่น ของเล่นแปลกๆ ของขวัญวันเกิด ของเล่นเก๋ๆ GadGet ไอเดี20/12/2016

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

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
Ran Assassin
      โปรโมชั่น    ของขวัญ   เสื้อผ้าเกาหลี   ของขวัญวันเกิด   
      โฆษณาป้ายละ 500    ป้ายโฆษณา   โฆษณาราคาถูก   Ads ป้ายละ 500   ติดโฆษณา
ติดต่อ Webmaster : 0829755777 Email : decha (@) me.com
ติดต่อโฆษณา ตำแหน่งใดก็ได้ ที่หน้าเวป, ปักหมุดกระทู้
หน้า: [1]
  ส่งหัวข้อนี้  |  พิมพ์  
ผู้เขียน หัวข้อ: เทคนิคทำให้เว็บโหลดเร็ว 8 วิถี  (อ่าน 2525 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
20/12/2016
Administrator
บุคคลในตำนาน
*****
เพศ: ชาย
Last Login:8 ชั่วโมงที่แล้ว
กระทู้: 2759
หลงเข้ามาคนที่: 1

Level and Hp mod by the DtTvB :: version 1.02 :: Made for Zone-IT.com Level 42 : Exp 73%
HP: 5.9%

ขายของเล่นไฮเทค ของเล่นแปลกๆ


Hyde4fun hyde4fun
เว็บไซต์












« เมื่อ: พฤษภาคม 26, 2012, 02:48:47 AM »


Ran Online
เคยมั้ยเวลาเขียนเวปเสร็จแล้วรู้สึกว่ามันโหลดช้าๆ ไม่ว่าจะเขียนเอง หรือใช้ CMS ก็เถอะ วันนี้เรามาไขความลับวิธีทำให้เวปโหลดเร็วกัน ซึ่งนอกจากจะทำให้เวปโหลดเร็วแล้ว มันยังมีประโยชน์ด้าน SEO ด้วยนะครับ วิธีที่จะแนะนำกันก็ไม่มีอะไรยากเกินความสามารถแน่นอน ถ้าพร้อมแล้วมาลองทำตามกันดูครับ



เทคนิคทำให้เว็บโหลดเร็ว 8 วิถี

1. ตั้งค่าความกว้างและความสูงของรูปภาพ และต้องตั้งค่าให้ถูกต้อง
ก่อนหน้านี้หลายคนเข้าใจผิดว่าการไม่ใส่ความกว้าง ความสูง ทำให้ลด Coding ลงไป เว็บไซต์ไม่ว่าเป็นเว็บอะไรก็แล้วแต่ยังไงก็ต้องมีส่วนประกอบของ รูปภาพ ทั้งนั้น แต่ผมเชื่อว่าหลายคนยังไม่รู้ว่า การตั้งค่าความกว้างและความสูงของรูปภาพ ให้ถูกต้องจะช่วย ทำให้เว็บโหลดเร็ว ด้วยคำสั่ง width="" height="" หลายคนไม่ใส่ขนาดไฟล์รูปภาพเพราะ ขี้เกียจ!! หรืออาจไม่เห็นความจำเป็นใน การตั้งค่า เพราะยังไงใส่ไม่ใส่ผลที่ออกมาก็แสดงเหมือนกัน บางคนคิดกลับกัน การไม่ใส่ทำให้ ประหยัดขนาดจำนวนข้อความในหน้าเว็บให้น้อยลง แต่ก่อนผมก็เคยคิดแบบนั้น แต่พอศึกษาเข้าจริงๆ การไม่ใส่ค่าขนาดภาพนั่นเหละเป็นปัญหาที่แท้จริง ทำให้การแสดงผลของหน้าเว็บคำนวนได้ช้าลง และก็ไม่ควรนำรูปขนาดอื่นๆ มาใส่ width, height ให้ได้ขนาดที่เราต้องการ เราควรจะ resize รูปภาพตามขนาดที่เราต้องใช้และระบุขนาดให้ถูกต้อง ยกเว้นภาพที่เรียกใช้ ใน css นะครับ อันนั้นไม่เกี่ยวกัน

2. เลือกนามสกุลรูปภาพและบันทึกรูปภาพใช้สำหรับเว็บ
รูปภาพมีหลายนามสกุล แต่ละนามสกุลก็จะมีข้อดีของแต่ละตัวแตกต่างกันไป ขนาดรูปที่จะกล่าวถึงต่อไปนี้เป็นขนาดของพื้นที่เก็บข้อมูล ไม่ใช่ขนาด กว้าง(width) ยาว(height) ไฟล์นามสกุล png สามารถทำให้มองทะลุไปยังข้างหลังได้ เหมาะแก่การนำมาทำเมนู ปุ่มกดต่างๆ รูปภาพไอคอน แต่ถ้าหากเป็นรูปภาพที่มีขนาดใหญ่ รูปคน รูปวิวต่างๆ ควรจะใช้รูปภาพที่มีนามสกุล jpg เพราะไฟล์นามสกุลนี้มีขนาดเล็ก การบันทึกรูปภาพก็มีส่วนสำคัญในการจัดการเกี่ยวกับรูปภาพ หากคุณใช้ photoshop วิธีการที่จะให้ภาพมีขนาดเหมาะเล็กที่สุด เวลาเซพคุณต้องใช้เมนู Save for wab คุณจะสามารถเลือกคุณภาพ(Quality) ของรูปภาพให้เหมาะสมกับรายละเอียดของภาพได้ และยังมีการแสดงตัวอย่างรูปภาพให้ดูก่อนเซพอีกด้วย ส่วนผู้ที่ใช้ firework นี่คงไม่ต้องแนะนำแล้วมั้งครับ เพราะ firework เป็นโปรแกรมเกิดมาเพื่อเว็บอยู่แล้ว แต่ขอแนะนำคนที่ยังไม่รู้หน่อยแล้วกัน firework เวลาจะเซพรูปภาพเขาจะไม่เซพธรรมดาทั่วไป แต่จะใช้เครื่องมือที่ชื่อ Slice tool ลากกำหนดขอบเขตรูปภาพก่อนแล้ว ปรับเปลี่ยนรายละเอียดรูปภาพที่ต้องการใน Optimize แล้ว Export ไฟล์ออกมา จะทำให้ได้ขนาดภาพที่เล็กมาก โดยที่ความคมชัดของภาพยังเท่าเดิม เมื่อรูปภาพมีขนาดเล็กลงก็ ทำให้เว็บโหลดเร็ว ได้

3. แสดงรูปภาพขนาดเล็กด้วย CSS Image Sprites
หากคุณต้องการแสดงรูปภาพ ไอคอน หรือรูปภาพรายการต่างๆ ที่เป็นรูปขนาดเล็กหลายๆ รูป หากเรียกใช้แบบปรกติทั่วไป เวลาโหลดหน้าเว็บเกิดการร้องขอไปที่เซพเวอร์จำนวนมาก ทำให้ใช้ทรัพยากรเซพเวอร์จำนวนมาก เราควรนำรูปขนาดเล็กมารวมกันเป็นรูปเดียว แล้วใช้คำสั่ง css กำหนดตำแหน่งรูปภาพที่ต้องการแสดง เป็นเทคนิคที่ ทำให้เว็บโหลดเร็ว ขึ้นอย่างมาก เช่น เรามีรายการ ต้องการแสดงในแท็ก ul > li เรากำหนดให้แท็ก <ul class="list"> ใน css สั่งให้ .list li{ background-image:รูปภาพ; } ในแท็ก <li class="row_a"> ใน css สั่งว่า .row_a{ background-position: 32px -32px; } ในแท็ก li แต่ละตัวก็ใช้คลาสที่ตั้งค่า background-position ใว้ต่างกัน รูปที่ออกมาก็จะแสดงไม่เหมือนกัน ตามรูปแบบรูปภาพ และ การเล็งตำแหน่งที่กำหนดใว้ นี่เป็นเพียงแนวคิดการทำ CSS Image Sprites เพื่อเป็นการเพิ่มประสิทธิภาพในการทำงานของหน้าเว็บ

4. พอกันทีกับหน้าเว็บที่ออกแบบด้วย Table !!
ก่อนหน้านี้ผมนี่แหละใช้แต่ table แต่การออกแบบเว็บด้วย table เป็นวิธีการเก่าแก่และโบราณมาก table จุดประสงค์ของ แท็กนี้คือการแสดงรายการข้อมูล แต่ช่วงหลายปีก่อนเป็นที่นิยมในการใช้ออกแบบเลย์เอ้าหน้าเว็บ แต่ table มีข้อเสียคือทำให้หน้าเว็บไซต์มีขนาดใหญ่ และประมวลผลช้า ถ้าเราจะออกแบบหน้าเว็บควรใช้แท็ก div เป็นดีที่สุด ควรศึกษารายละเอียดแท็กต่างๆ ให้ดีและใช้ให้ถูกต้อง นอกจาก ทำให้เว็บโหลดเร็ว แล้วยังมีคุณภาพและยังง่ายต่อการทำ SEO ทำให้ติดอันดับสูงๆ ใน search engine ด้วย แม้แต่ช่วงหลังๆ มานี้ รายการข้อมูล โปรแกรมเมอร์หลายคน(เช่นผม) รายการข้อมูลยังใช้แท็ก li แทนด้วยซ้ำ

5. พยายามไม่ใช้ แท็ก <style> ในหน้าเว็บ
คนที่ทำเว็บไซต์แน่นอนจะต้องออกแบบหน้าเว็บด้วย css แต่ถ้าหากคุณวางโค้ดนี้จำนวนมากใว้ในหน้าเว็บจะทำให้หน้าเว็บของคุณโหลดช้าลง เพราะตัวเว็บต้องรอข้อมูลในแท็ก head โหลดให้เสร็จก่อน ถึงจะโหลดส่วนของ body หากคุณมีโค้ดไฟล์ css จำนวนมากควรจะแยกออกเป็นไฟล์ css ต่างหาก และไม่ควรมีไฟล์ css แยกย่อยหลายๆ ไฟล์ ควรจะรวมกันเป็นไฟล์เดียว ส่วนการวางแท็ก style ในส่วนของ body เป็นเรื่องที่ไม่ควรอย่างมาก ยิ่งเป็นการหน่วงหน้าเว็บลงไปอีก และ browser อย่าง ie บางครั้งยังไม่ยอมอ่านค่า css อยู่ในแท็ก style ในแท็ก body อีกด้วย!! หากคุณจำเป็นต้องใส่ค่าแสดงผลให้แท็กควรจะใส่แบบนี้ <div style="width:100px;">

6. บีบอัดไฟล์ javascript และ css ให้มีขนาดเล็ก
เราสามารถลดขนาดของไฟล์ javascript หรือ css ลงได้โดยการเว้นช่องว่างที่ไม่จำเป็นของโค้ดออกไป เวลาเราเขียนเว็บขึ้นมา เราจะเว้นช่องว่างใว้ และขึ้นบรรทัดใหม่ เพื่อความเข้าใจในตัวโค้ดของคนเขียน เมื่อเมื่อเราจะนำมาใช้งานจริงๆ แล้ว เราควรจะบีบอัดไฟล์ก่อนที่จะเอามาใช้งานจริง เพื่อลดขนาดของไฟล์ที่เกินจำเป็นลงได้ เมื่อไฟล์พวกนี้มีขนาดเล็กลง ก็ ทำให้เว็บโหลดเร็ว ขึ้นได้ ไฟล์ javascript เราสามารถลดขนาดลงด้วย JS Minifier ลดขนาด Javascript ด้วย JSMinifier โดย 20/12/2016 และไฟล์ css คุณสามารถเข้าไปที่ บีบอัด Css หรือ Css Compressor โดย 20/12/2016 เพื่อลดขนาดไฟล์ css ของคุณ แต่ cleancss ยังไม่สนับสนุน css3 นะครับ ใครที่บีบอัดไฟล์ css3 อาจจะทำให้ error ได้

7. พยายามอย่าให้มีลิ้งขาดในเว็บ
หลังจากที่เราทำเว็บเมื่อใช้งานไปเรื่อยๆ อาจจะมีรูปภาพหรือไฟล์ อย่าง javascript,css เปลี่ยนที่อยู่หรือถูกลบไป ทำให้เมื่อหน้าเว็บของเรา เมื่อส่งคำร้องขอไฟล์แต่ไม่ได้รับการตอบกลับจะทำให้หน้าเว็บของเราต้องรอจนกว่าจะได้รับการตอบกลับว่าไม่มีไฟล์ หรือ หมดเวลา (timeout) ไปเอง ส่วนมากมักเจอในรูปภาพ นอกจากจะทำให้เว็บโหลดช้า และหน้าเว็บยังไม่สวยอีกด้วย

8. ซ่อมแซมฐานข้อมูลอยู่บ่อยๆ
เว็บที่เราทำล้วนใช้ระบบฐานข้อมูลกันทั้งนั้น มันเป็นวิธีที่ง่ายที่สุดใน การจัดการกับข้อมูล จำนวนมาก เมื่อใช้ไปเรื่อยๆ มีข้อมูลมากๆ เข้าก็ทำให้ระบบฐานข้อมูลมีขนาดใหญ่ขึ้น เรียกข้อมูลได้ช้าลง เราควรปรับแต่งอย่างน้อยเดือนละครั้ง เพื่อประสิทธิภาพในการเรียกใช้ข้อมูล เมื่อข้อมูลถูกเรียกได้เร็ว ก็จะ ทำให้เว็บโหลดเร็ว ขึ้นด้วย วิธีการคือเราควรเข้าไปที่ phpmyadmin เลือกตารางทั้งหมด แล้วทำกับที่เลือก ตรวจสอบตาราง > ปรับแต่งตาราง > ซ่อมแซมตาราง > วิเคราะห์ตาราง

Source http://codeigniter.in.th

.

แรนเถื่อน | เสื้อผ้าเกาหลี | แรงบันดาลใจ | Ran | Ragnarok เถื่อน | RO เถื่อน



Follow Decha Chanwirun Liang's board GadGetMaShow.com on Pinterest.
บันทึกการเข้า
หน้า: [1]
  ส่งหัวข้อนี้  |  พิมพ์  
 
กระโดดไป:  

Sitemap Decha Chanwirun เกมส์ออนไลน์ Game PC  
Thank SMF Security Check DMCA.com Protection Status



Google เข้าเยี่ยมชมหน้านี้ล่าสุดเมื่อ : ธันวาคม 30, 2016, 04:19:19 PM