xác thực google maps

Code tăng tốc độ load website

Thảo luận trong 'Hỗ trợ Lập Trình, Mã Nguồn' bắt đầu bởi Mr.N2, 25 Tháng năm 2012.

Lượt xem: 109,611

  1. Mr.N2

    Mr.N2 Administrator Staff Member

    Bài viết:
    2,252
    Đã được thích:
    5,105
    Chào các bạn.

    Mình viết bài viết này với mục tiêu chia sẻ code tăng tốc độ load nhằm tối ưu hóa website tốt hơn. Một trong những yếu tố góp phần google index nhanh website của bạn.

    code_tang_toc_do_load_1.jpg

    Về ý tưởng tăng tốc độ load website, mình xin mô tả là đoạn code này dựa trên yếu tố trình duyệt là chủ yếu. Nội dung website khi đã load 1 lần rồi, thì nó sẽ lưu lại dữ liệu là các tập tin javascript, hình ảnh (gif, png, jpg), css,... Ngoài việc lưu lại các tập tin này, thì nó sẽ còn gia tăng chỉ số expires của các tập tin, giúp nó lưu vào trình duyệt lâu hơn.

    Bạn cần tạo 3 tập tin sau:

    .htaccess (với nội dung):
    PHP:
    #### Gzip
    <IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule 
    ^(.*)(js|css)$ redir.php?file=$1$2&type=$[L]
    </
    IfModule>
    #### Expires
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=31449600, public"
    </FilesMatch>
    #### Turn off the ETags
    Header unset ETag
    FileETag None
    #### Charset
    AddDefaultCharset UTF-8
    pre.php (với nội dung):
    PHP:
    <?php
    $path 
    pathinfo($_SERVER['SCRIPT_NAME']);
    if (
    $path['extension'] == 'css')  {
      
    header('Content-type: text/css');
    }
    if (
    $path['extension'] == 'js')  {
      
    header('Content-type: application/x-javascript');
    }
    ?>
    redir.php (với nội dung):
    PHP:
    <?php
    # this is the file redir.php, to gzip javascript and css
    # set the request file name
    $file=str_replace(chr(0x0),"",$_REQUEST['file']);
    $allowedfiles = array('js','gif','png','jpg','css','txt','swf');
    if (!
    in_array(str_replace(chr(0x2E),"",substr(chr(0x2E).$file,-3)),$allowedfiles)){ exit ("Hacking attempt!"); }
    # Set Expires, cache the file on the browse
    header("Expires:".gmdate("D, d M Y H:i:s"time()+15360000)."GMT");
    header("Cache-Control: max-age=315360000");
    # set the last modified time
    $mtime filemtime($file);
    $gmt_mtime gmdate('D, d M Y H:i:s'$mtime) . ' GMT';
    header("Last-Modified:" $gmt_mtime);
    # output a mediatype header
    switch ($_REQUEST['type']){
      case 
    'css':
        
    header("Content-type: text/css");
        break;
      case 
    'js' :
        
    header("Content-type: text/javascript");
          break;
      default:
        
    header("Content-type: text/plain");
    }
    # echo the file's contents
    echo implode(''file($file));
    if(
    extension_loaded('zlib')){
      
    ob_end_flush();
      
    # set header the content's length;
      # header("Content-Length: ".ob_get_length()); # (It doesn't work? )
      
    ob_end_flush();
    }
    ?>
    Để chạy pre.php thì chúng ta cần 1 tập tin trong hệ thống là php.ini có nhiệm vụ hoạt động ngầm, nhằm thực thi pre.php

    php.ini đặt tại thư mục root, có nội dung như sau:
    PHP:
    zlib.output_compression on
    zlib
    .output_compression_level 3
    zlib
    .output_handler on
    auto_prepend_file 
    "pre.php"
    Trong đoạn php.ini này mình đặt tỷ lệ nén ở mức trung bình là 3, tỷ lệ nén file có giá trị từ 0 đến 9 (9 là mức cao nhất). Đoạn code trên mình viết có tính năng lưu cache và sử dụng module nén là deflate, chứ nó chả đã động tới module zlib cũng là nén luôn nhé các bạn.

    Mình phân biệt giữa 2 module zlibmodule deflate cho các bạn nắm rõ:

    - module zlib: còn được gọi là PHP's zlib output_compression sẽ chỉ được chạy với lớp PHP handler (các files .php chẳng hạn)
    - module deflate: còn được gọi là Apache's mod_deflate có thể chạy với bất kỳ tập tin nào như jpg, css, javascript,...

    Mục đích tạo php.ini là nhằm nén các tập tin ở lớp PHP handler (.php) giúp bạn có 1 hệ thống nhanh hơn, khi vừa được nén các file sử lý php, nén luôn các tập tin (jpg, css, javscript,...) khi kết hợp nén với module deflate.

    Trong đoạn php.ini trên mình đã đặt mức nén ở level 3, và khi kiểm tra bằng phpinfo() kết quả sẽ như sau:

    code_tang_toc_do_load_2.jpg

    PHP handler là cái gì ?
    Khi chạy một site PHP, server phải cần thông dịch PHP và tạo ra trang web khi người dùng truy cập vào. Tùy vào từng người dùng, thời gian địa điểm mà webiste có thể được tạo ra khác nhau. Code PHP được phiên dịch dựa vào bộ thư viện PHP như PHP4 và PHP5. PHP handler sẽ điều khiển quá trình những gì load lên từ bộ thư viện PHP.

    Đây là mô hình web server của chúng ta hoạt động, mọi thứ sẽ diễn ra thông qua lớp thông dịch là PHP, sau khi thông dịch web server sẽ trả về máy người dùng.

    Mục đích của mình là sẽ làm mọi thứ nhanh hơn khi qua lớp thông dịch PHP này, đây cũng là ý tưởng để mình viết bài này đó các bạn.

    code_tang_toc_do_load_3.gif

    P/S: Có một số bạn dùng Wordpress có sẵn các plugin, mình nghĩ nếu phân tích ra thì cũng chỉ nằm vỏn vẹn cho các module zlibmodule deflate thôi. Cái quan trọng là chúng ta hiểu về nó thế nào để còn làm việc, chứ không phải có gì là quất cái đó đâu nhé.

    Hãy thử và cảm nhận tốc độ load website của bạn nhé.

    Demo: Hội Quán Tin Học
    Ghi rõ nguồn IDVS khi bạn copy code tăng tốc độ load website này.​

    Nguyên Nghĩa - Mr.N2
     
  2. Mr.N2

    Mr.N2 Administrator Staff Member

    Bài viết:
    2,252
    Đã được thích:
    5,105
    Mình đã mô tả rất rõ rồi, bạn cứ test thử rồi biết.

    Miễn server hỗ trợ php và apache là chạy được hết nha bạn.
     
    Ngoctuantran and Thietkenha like this.
  3. bingteam

    bingteam Thành viên

    Bài viết:
    135
    Đã được thích:
    28
    Hay à nhà mình áp dụng cho list wp của mình
     
    luubuikt and Thietkenha like this.
  4. IDVS

    IDVS Thông báo từ BQT

    Bài viết:
    329
    Đã được thích:
    374
    Mình đã thử cái này, tốc độ tăng lên tầm 130-150% tùy vào site.
     
  5. kristagiang

    kristagiang Dự bị

    Bài viết:
    24
    Đã được thích:
    105
    Vãi ái, thử test một số site nhỏ xem thế nào, cám ơn chủ thớt
     
    Thietkenha thích bài này.
  6. steven6879

    steven6879 Dự bị

    Bài viết:
    26
    Đã được thích:
    12
    quá hay, để test và cảm nhận rồi lên comment cho anh em ý kiến, thanks chủ thớt !
     
    ideaofcuong and Thietkenha like this.
  7. phamvan1988

    phamvan1988 Dự bị

    Bài viết:
    3
    Đã được thích:
    2
    cài này đúng cái đang tìm
     
    ideaofcuong and Thietkenha like this.
  8. resetmayin

    resetmayin Thành viên

    Bài viết:
    95
    Đã được thích:
    22
    xài được bạn à
     
    ideaofcuong thích bài này.
  9. Mr.N2

    Mr.N2 Administrator Staff Member

    Bài viết:
    2,252
    Đã được thích:
    5,105
    HTML là sao bạn? Chỉ cần đặt vào là chạy ngay thôi, hỗ trợ các loại mã nguồn khác nhau.

    Các bạn chép code ra 3 file như mình mô tả nhé, rồi đặt ở thư mục Root. Các file đặt ngang hàng với nhau.
     
    ThangPV.HR thích bài này.
  10. ThangPV.HR

    ThangPV.HR Thành viên thân thiết

    Bài viết:
    1,339
    Đã được thích:
    408
    Mình sẽ cho áp dụng vào web bên mình vào ngày mai và sẽ có kết quả báo cáo mọi người. Cảm ơn bác Mr.N2!
     

Chia sẻ trang này