3 tuyệt chiêu với .htaccess giúp tối ưu hóa tốc độ website

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 15/7/12.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Thời đại ngày nay cũng đã khác xưa khi tốc độ website quyết định việc người dùng có hoặc không dừng lại tại website của bạn. Một website có tốc độ tải trang quá 10 giây coi như … chết chắc. Bởi vì người dùng thời nay khó tính và không đủ kiên nhẫn ngồi đợi website bạn được tải lên. Đó là chưa nói đến yếu tố tốc độ tải trang cũng có 1 giá trị rất quan trọng nếu bạn muốn làm SEO. Vậy làm thế nào để nâng tốc độ tải trang, khiến website bạn truy cập … vèo vèo !

    Giải pháp tăng tốc độ tải trang có rất nhiều, trong đó tôi đặc biệt chú ý đến công cụ YSlow nằm trong bộ Addon của Firefox có hướng dẫn khá đầy đủ về việc làm thế nào để tối ưu hóa website của bạn. Bạn có thể tìm hiểu thêm về YSlow và cách tối ưu hóa website bằng YSlow để biết thêm. Tôi cũng xin lưu ý với các bạn rằng những hướng dẫn của YSlow có thể chỉ dành cho dân developer thôi bởi những tùy chỉnh chuyên sâu của YSlow dân làm blog sẽ mù tịt.

    [​IMG]

    Nhưng xin các anh, chị và các bạn blogger đừng hoang mang, trong khuôn khổ bài viết này tôi xin hướng dẫn các bạn 3 giải pháp tương đối đơn giản để tối ưu hóa khối lượng tải xuống của website bằng cách can thiệp vào file .htaccess. Phương pháp này có vẻ đơn giản và dễ thực hiên hơn rất nhiều lần. Bạn nào xài máy chủ Window thì xin phép ngồi nhìn thôi hen !

    Chiêu thứ nhất: Disable Etags
    Entity tags (ETags) là một cơ chế giúp máy chủ web và trình duyệt dùng xác định xem thành phần trong bộ nhớ cache của trình duyệt có phù hợp với thành phần gốc trong máy chủ hay không.Theo các qui định tối ưu hóa của Yahoo! Việc tắt Etags có thể góp phần giảm tải cho máy chủ và giảm đi một lượng băng thông đáng kể cho website.

    Để tắt Etag đi, bạn chỉ cần đặt đoạn code sau vào file .htaccess:

    Mã:
    Header unset ETag
    FileETag None
    Chiêu thứ hai: Thêm Expires Headers
    Expires Headers (tôi xin phép giữ nguyên thuật ngữ này khi trình bày) – là một dạng khai báo nhằm thông báo với trình duyệt rằng các thành phần được tải xuống (như hình ảnh, file video, file flash…) được lưu trữ trong bộ nhớ cache đến một thời gian nhất định nào đó. Việc này giúp ích cho lần truy cập tiếp theo của người dùng sẽ nhanh hơn do trình duyệt không yêu cầu tải lại các thành phần này mà nó sẽ lấy từ bộ nhớ cache. Miễn sao các thành phần này vẫn còn thời gian hiệu lực.

    Để thêm expires header bạn thêm .htaccess đoạn code sau:

    Mã:
    Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"
    Còn nếu bạn muốn chỉ một số thành phần được lưu trữ lại trong bộ nhớ cache chúng ta có thể thêm điều kiện như sau:

    Mã:
    <FilesMatch ".(ico|jpg|jpeg|png|gif|js|CSS|swf)$">
    Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"
    </FilesMatch>
    
    Trong ví dụ trên, chỉ những file có đuôi (hay định dạng) .icon,.jpg, .jpeg, .png, .gif, .js, .CSS, .swf mới được thêm Expire Header. Các thành phần khác vẫn được gọi lại (vì mục đích làm mới trang chẳng hạn).


    Ví dụ trên cho phép bạn cấu hình Expires Headers theo một điểm thời gian xác định; bạn cũng có thể cấu hình Expires Headers theo một khoảng thời gian xác định bằng cách sau:

    Mã:
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
    Ví dụ trên cho bạn cấu hình thời gian quá hạn của cache trong vòng 10 năm dựa trên thời gian truy cập. Nếu bạn muốn cấu hình thời gian theo thời điểm hiện tại, bạn có thể sử dụng code sau:

    Mã:
    ExpiresActive On
    ExpiresDefault "now plus 10 years"
    Thật đơn giản phải không các bạn đọc NhanWeb ?

    Ngoài ra, bạn có thể cấu hình riêng cho từng định dạng file bằng cách sau:

    Mã:
    ExpiresActive On
    ExpiresByType text/html "access plus 1 day"
    ExpiresByType image/gif "access plus 10 years"
    ExpiresByType image/jpeg "access plus 10 years"
    ExpiresByType image/png "access plus 10 years"
    ExpiresByType text/CSS "access plus 10 years"
    ExpiresByType text/javascript "access plus 10 years"
    ExpiresByType application/x-javascript "access plus 10 years"

    Và đây là kiểu kết hợp cả phương thức theo khoảng thời gian và theo định dạng file nếu bạn nào quan tâm:

    Mã:
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
    ExpiresByType text/html "access plus 1 day"
    Đoạn code trên sẽ cấu hình thời gian quá hạn của tất cả các file được tải xuống trong vòng 10 năm. Riêng file HTML sẽ quá hạn trong vòng 1 ngày. Điều này khá tốt cho các website, blog vì việc cập nhật thông tin là hàng ngày nhưng hình ảnh thì rất ít khi thay đổi.

    Với cách này bạn có thể tiết kiệm một lượng băng thông kha khá được tiêu tốn bởi bạn đọc trung thành của bạn đấy ! NhanWeb.com cũng đang sử dụng cách này và lượng tài nguyên tiêu thụ đã giảm, tốc độ tải trang thì tăng lên rõ rệt.

    Lưu ý là chiêu này đòi hỏi bạn phải mở mod mod_expires lên nhé !

    Tuyệt chiêu thứ 3: Nén file
    Nén file có thể bạn đã nghe nhiều; nhưng kĩ thuật nén file có lẽ là ít người biết bởi nó liên quan đến ngôn ngữ lập trình bạn sử dụng. Bằng cách sử dụng.htaccess, chúng ta cũng có thể nén file lại trước khi chuyển nó đến tay khách truy cập. Việc này chẳng những tăng tốc độ tải trang mà nó còn khiến cho băng thông của bạn thoải mái hơn.

    Cách làm như sau:

    Mã:
    SetOutputFilter DEFLATE
    Tương tự như trên, bạn có thể kết hợp với điều kiện nén:
    Mã:
    <FilesMatch ".(js|CSS|html|htm|php|xml)$">
    SetOutputFilter DEFLATE
    </FilesMatch>
    Tương tự như chiêu thứ 2, chiêu này đòi hỏi mod mod_deflate phải được cài đặt trên server của bạn. Thông thường mod này không được cài đặt sẵn nên bạn phải yêu cầu cài đặt và config nó mới có thể sử dụng. Bạn có thể kiểm tra bằng cách tạo file phpinfo.php và yêu cầu người quản trị hệ thống cài đặt cho bạn nếu cần.

    Kiểm tra như thế nào ?
    Một Addon của Firefox có thể giúp bạn kiểm tra những đoạn mã tôi đã cung cấp cho bạn ở trên có hoạt động hay không đó là Firebug.Bạn chỉ cần mở tab NET trên Firebug và kiểm tra các thông số có liên quan như hình sau:

    Hoặc bạn có thể cài thêm ứng dụng YSlow để thêm điểm số (score) của YSlow cung cấp cho bạn sẽ biết hiệu quả.

    [​IMG]
    Đây là bài viết mình viết trên blog cá nhân của mình giờ move qua đây cho anh em nào quan tâm thì tìm hiểu thêm.

    Rất mong nhận được góp ý của mọi người.

    Nguồn: 3 tuyệt chiêu với .htaccess giúp tối ưu hóa tốc độ website

    P/S: Copy thì nhớ trích nguồn và đặt liên kết về bài viết gốc giúp nhé các webmaster, blogger.
     
  2. tin2308

    tin2308 Lính mới

    Tham gia ngày:
    2/4/13
    Bài viết:
    3
    Đã được thích:
    0
    Điểm thành tích:
    1
    thêm exprires head theo mình nghĩ nó sẽ làm chậm hơn chứ, vì tốn thêm 1 bước load mà.
     
  3. dichvuketoan

    dichvuketoan Lính mới

    Tham gia ngày:
    13/12/13
    Bài viết:
    26
    Đã được thích:
    0
    Điểm thành tích:
    1
    Mình cũng đã từng làm qua. Thấy được đó. Mọi người thử
     
  4. hanhnv_93

    hanhnv_93 Guest

    Với cách này bạn có thể tiết kiệm một lượng băng thông kha khá được tiêu tốn bởi bạn đọc trung thành của bạn đấy ! NhanWeb.com cũng đang sử dụng cách này và lượng tài nguyên tiêu thụ đã giảm, tốc độ tải trang thì tăng lên rõ rệt.
     
  5. 3zoka

    3zoka Guest

    Cái Yslow thì nó giống Google page còn chỉnh sửa htacess bây giờ mới biết config .Để mình thử xem .Thanks nhiều :theft:
     
  6. vanbach26

    vanbach26 Đang làm quen

    Tham gia ngày:
    24/4/14
    Bài viết:
    119
    Đã được thích:
    1
    Điểm thành tích:
    18
    Trước khi dùng file . htaccsess các bạn nên backup cẩn thận dữ liệu của mình, tránh trường hợp có trục trặc xảy ra, việc khôi phục trở nên đơn giản.Vì lần đầu tiên sử dụng mình cũng bị dính lỗi với file này.
     
  7. HostVN.net

    HostVN.net Đang làm quen

    Tham gia ngày:
    30/12/13
    Bài viết:
    45
    Đã được thích:
    0
    Điểm thành tích:
    6
    Nơi ở:
    36A ngõ 65 Hoàng Cầu, Đống Đa, Hà Nội
    Cái này là hoàn toàn chính xác, vì nhiều web server khác nhau thì cấu hình cũng khác nhau nên sử dụng.
    .htaccess bị lỗi 500 hầu như là do hàm nào đó bị chặn dẫn tới lỗi này. :hehe:
     
  8. krone

    krone Đang làm quen

    Tham gia ngày:
    20/10/12
    Bài viết:
    65
    Đã được thích:
    0
    Điểm thành tích:
    6
    Mình nghĩ cái thủ thuật này chỉ giúp không nhiều trong viẹc tối ưu tốc độ site. Tốc độ load site cần nhiều thử: tốc độ xử lý host, code web (lập trình),file hình ảnh nhiều hay ko, nơi đặt site...
     
  9. fanfan

    fanfan Guest

    Thì title là giúp tối ưu mà bạn .Nó là một trong nhiều yếu tố giúp load site nhanh hơn mà :byebye:
     
  10. phamhuanmko

    phamhuanmko Lính mới

    Tham gia ngày:
    13/9/12
    Bài viết:
    23
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Bài viết quá hay vừa rồi chuyển host pagespeed đang 85 giờ còn có 61 nản ko chịu được! cái này chắc giải quyết đc
     
  11. phaman

    phaman Lính mới

    Tham gia ngày:
    20/12/13
    Bài viết:
    22
    Đã được thích:
    0
    Điểm thành tích:
    1
    đúng là nhanh hơn thật. của em đang từ 75 lên 81 rồi
     
  12. banhmysaigon

    banhmysaigon Lính mới

    Tham gia ngày:
    13/4/15
    Bài viết:
    24
    Đã được thích:
    0
    Điểm thành tích:
    1
    3 cách này thật sự rất hay, mình thử thấy thời gian load công nhận có nhanh hợn (mặc dù trang của mình vốn đã nhanh sẵn rồi) :dangmo:
     
  13. thang5link

    thang5link Đang làm quen

    Tham gia ngày:
    5/5/15
    Bài viết:
    124
    Đã được thích:
    0
    Điểm thành tích:
    16
    có được htaccess rồi thì tốc độ nhanh hơn hẳn đó bác ak.thanks bác nhiều nhé
     
  14. reddevy

    reddevy Lính mới

    Tham gia ngày:
    3/4/13
    Bài viết:
    5
    Đã được thích:
    0
    Điểm thành tích:
    1
    Cách của bạn cũng rất hay,web mình load cũng lâu mà code thì viết không đâu vào đâu cả
     
  15. dat47th

    dat47th Đang làm quen

    Tham gia ngày:
    21/2/14
    Bài viết:
    36
    Đã được thích:
    0
    Điểm thành tích:
    6
    Ngoài ra server và host của bạn phải đảm bảo băng thông tốt, site của mình cần tới hình ảnh nhiều ngoài cải thiện những vấn đề như bạn nói còn phải thuê server đến là khổ
     
  16. 4ntyLov3

    4ntyLov3 Đang làm quen

    Tham gia ngày:
    2/10/14
    Bài viết:
    109
    Đã được thích:
    0
    Điểm thành tích:
    16
    Sao mình check vs tool gtmetrix nó vẫn báo là expried header nhỉ, mặc dù đã chèn code tìm trên mạng vào rồi :(.
    Phần tối ưu speed mình làm vẫn chưa thực sự chuẩn
     
Đang tải...

Chia sẻ trang này