Mầy mò cách tăng tốc độ website

Thảo luận trong 'SEO Onpage - Tối Ưu Website' bắt đầu bởi hoanganha1q2, 10/9/15.

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. hoanganha1q2

    hoanganha1q2 Hướng tới tương lai !!!!!

    Bài viết:
    905
    Đã thích:
    607
    Chẳng là trước nay vấn đề tốc độ website đang là ''khúc xương'' khó nhai đối với các seoer. Mình cũng vậy, nhận dự án mới với website mới tinh mà chưa có mấy bài viết mà tốc độ web chưa có được 50% (kiểm tra tại https://developers. google.com/speed/pagespeed/insights/). Đứa bạn nó bảo là bỏ đi thui chứ mai web có nhiều dữ liệu thì nó nặng web chạy sao nổi. Nhận rồi thì biết sao bây giờ, mầy mò tìm hiểu và khắc phục đến đâu hay đến đó vậy. Chẳng còn đi học nên cũng chẳng có thầy nào dậy nữa cả, các cao nhân thì bận việc của họ đâu có thời gian trả lời mấy câu hỏi vớ vẩn của mình chứ. Thôi thì tài liệu duy nhất là google vậy, Nhiều phần mình thấy hữu ích nên mình cũng lấy y nguyên 1 phần bài của tác giả khác. Cũng biết là nhiều anh em trong ngành cũng gặp tình trạng như mình nên biết đến đâu chia sẻ đến đó cho anh em cùng tham khảo đúng thì cùng biết còn sai thì cho ít gạch về xây lại kiến thức ah.

    Đa số hiện nay các website đều sử dụng WordPress, web mình nhận cũng vậy nên mình chỉ tìm hiểu trong wordpress và trong bài này cũng chỉ nói về vấn đề tối ưu tốc độ website trong wordpress thui nhé.
    Như chúng ta đã biết thì tốc độ website rất quan trọng, tăng được tốc độ web sẽ làm giảm được tối đa cho máy chủ và tiết kiệm thời gian tải trang cho người sử dụng, nó liên quan trực tiếp đến Page View, tỷ lệ Bounce rates,.... Những vấn đề này có thể ảnh hưởng trực tiếp đến lượng khách hàng của bạn vì vậy là 1 seoer ai cũng luôn tìm cách tối ưu hóa cho website của mình có tốc độ load nhanh nhất.
    Một trong những việc làm quan trọng đầu tiên khi nhận 1 dự án mới đó là kiểm tra tốc độ website, có rất nhiều website và công cụ trợ giúp bạn trong việc này, và kiểm tra xong rùi tất nhiên là bạn phải đi tối ưu lại website sao cho đạt tốc độ nhanh nhất có thể, và với các công cụ kiểm tra này luôn đưa ra cho chúng ta những gợi ý về những vấn đề cần khắc phục và đa số đề tập trung vào mấy mục chính như sau:
    1. Nén/giảm dung lượng hình ảnh
    2. Sử dụng bộ nhớ đệm - Cache
    3. Làm nhẹ CSS
    4. Sử dụng Minify
    5. Nén Gzip – Gzip File Compression
      Đối với máy chủ Apache
      Đối với máy chủ Nginx
    6. Sử dụng Browse Caching
      Đối với máy chủ Apache
      Đối với máy chủ Nginx
    7. Tiết kiệm dung lượng MySQL Database
      Tối ưu database
    8. Sử dụng CDN – Content Devilery Network
    9. Sử dụng kỹ thuật Async cho Javascript
    Bây giờ chúng ta sẽ đi vào từng phần để giải đáp bài toán này nhé.

    1. Nén/Giảm dung lượng hình ảnh:

    Website khi mới thiết kế hoặc trước kia người seo người up bài không chú ý up bài với những hình ảnh quá lớn (không cần thiêt) thì việc nén hình ảnh là 1 việc không thể bỏ qua nếu muốn cải thiện tốc độ website của bạn. Bạn có thể chọn 2 cách nén là nén trực tiếp trên máy tính và nén bằng plugin.

    Về nén trực tiếp trên máy thì bạn có thể dùng phần mềm FILEMinimizer Picture, phần mềm này khá phổ biến và dễ sử dụng.

    Còn muốn nén tự động bằng plugin thì các bạn có thể dùng WP Smush.It,EWWW Image Optimizer. Sau khi cài đặt, mỗi lần upload ảnh lên nó sẽ tự động nén cho bạn. Hoặc có thể sử dụng Bulk Optimize trong phần Media để nén tất cả hình ảnh có trên host.

    Mã:
    Để dơnload WP Smush It EWWW Image Optimizer các bạn coppy và dán link sau vào trình duyệt:
    https://wordpress.org/plugins/wp-smushit/
    2. Sử dụng bộ nhớ đệm – Cache

    Trong các cách giúp tăng tốc website sử dụng WordPress thì cách này rất quan trọng và được áp dụng nhiều nhất vì nó sẽ giúp website của bạn giảm đến 70% gánh nặng cho máy chủ cũng như thời gian tải trang. Và nếu bạn đang dùng các gói host phục vụ tốt cho WordPress như A2Hosting, StableHost, Site5 thì lại càng nên sử dụng bộ nhớ đệm cache vì nó sẽ giúp bạn tiết kiệm tài nguyên hơn.

    Trong WordPress, có 2 plugin hỗ trợ tạo cache tốt nhất đó là:
    • WP Super Cache – Plugin tạo cache đơn giản nhưng rất tốt, thích hợp cho những ai đang sử dụng hosting thông thường.
    • W3 Total Cache – Plugin tạo cache miễn phí chuyên nghiệp nhất mọi thời đại, thích hợp cho website WordPress đang chạy trên môi trường máy chủ riêng (VPS/Dedicated Server)
    Tuyệt nhiên, bạn chỉ nên sử dụng 1 trong 2 plugin nói trên.

    3. Làm nhẹ CSS

    Thường thì khi lập web code thường không để ý đến vấn đề này nên mỗi file CSS thường có chứa rất nhiều các thành phần không quan trọng như note, khoảng trắng, code trùng lặp, thừa ký tự,…v.v.. Điều này gây ra trở ngại không nhỏ đến tốc độ của website, vì vậy hãy làm nhẹ tất cả file CSS có trong website của bạn bằng cách sau đây:

    Truy cập vào CleanCSS.Com

    Copy nội dung của các file CSS có trong website vào ô CSS input, hoặc nhập URL dẫn đến file CSS tại ô CSS form URL.
    12.
    Ở phần Code Layout bên cạnh các bạn nên thiết lập như sau (Chọn các trường như trong hình vẽ)

    13.
    Sau đó nhấn nút Process CSS bên dưới và bạn sẽ nhận được một code CSS mới, kèm theo đó là nó sẽ cho bạn biết đã được giảm xuống bao nhiêu phần trăm so với kích thước cũ. Bây giờ bạn chỉ việc copy đoạn CSS mới đó vào file ban nãy bạn copy để thay thế là được.

    Cứ làm tương tự cho các file CSS khác. Việc này bạn cần làm tay không nên đòi hỏi plugin gì cả tránh sai sót.

    Nếu sau khi nén mà theme bị lỗi, thì bạn lấy đoạn CSS đã được nén bỏ vào lại và chọn Compression (code layout) là Standard.

    4. Sử dụng Minify

    Minify nghĩa là kỹ thuật gộp các file CSS và JS riêng lẻ đang có trên website của bạn thành một file lớn để người dùng có thể tải toàn bộ nội dung về chỉ với một truy vấn duy nhất, và bản thân file lớn này sẽ được lưu cache vào trình duyệt của người dùng nên sẽ giúp họ truy cập nhanh hơn ở lần truy cập thứ hai.

    Trên WordPress, bạn có thể dùng các plugin sau đây:
    • WP Minify
    • Better WordPress Minify
    Khi sử dụng Minify, hãy lưu ý rằng website của bạn có thể tải chậm hơn bình thường ở lần tải thứ nhất, và không phải theme nào cũng có thể sử dụng Minify vì trong vài trường hợp, website sẽ bị lỗi vỡ khung khi dùng minify. Lúc này bạn không nên cài nó vào nữa.

    5. Nén Gzip – Gzip File Compression

    Nén Gzip sẽ làm giảm thiểu tối đa thời gian phản hồi bằng cách giảm dung lượng tải về từ giao thức HTTP. Nó có thể nén các thành phần tĩnh trên website như CSS, Javascript, HTML nhưng trên lý thuyết và 1 số trường hợp, nó có thể làm việc cùng với XML và JSON. Các thành phần khác như hình ảnh, tài liệu PDF..v.v..có thể không cần sử dụng gzip vì bản thân nó đã được nén sẵn.
    14.
    Đến đây bạn cần chú ý một chút đó là xác định cho đúng máy chủ của mình đang sử dụng và áp dụng đúng nhất.

    Đối với máy chủ Apache

    Nếu bạn dùng host thông thường thì dĩ nhiên host của bạn sẽ thuộc loại Apache Webserver, do vậy bạn sẽ cần chèn đoạn sau vào file .htaccess ngoài thư mục gốc của website.
    Mã:
    # BEGIN GZIP
    <ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
    </ifmodule>
    # END GZIP
    Đối với máy chủ Nginx

    Nếu máy chủ của bạn đang sử dụng Nginx Webserver thì chèn đoạn sau vào file cấu hình domain trong NGINX. Không cần quan tâm vấn đề này nếu nếu website đã dùng WP Super Cache hoặc W3 Total Cache.
    Mã:
    server {
        gzip on;
        gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
    }
    Việc này là không cần thiết nếu website của bạn đã dùng WP Super Cache hoặc W3 Total Cache.

    6. Sử dụng Browse Caching

    Hãy tưởng tượng bạn là một người dùng, khi bạn vào một website bất kỳ thì trình duyệt phải bắt buộc tải về tất cả thành phần có trong một website để có thể phân tích và hiển thị nó. Và mỗi lần truy cập trình duyệt đều cần phải làm công việc này, khá mất thời gian nếu bạn thường xuyên vào một website nào đó.

    Vậy giải pháp Browse Caching có nghĩa là nó sẽ tạo ra bản bộ nhớ đệm của một website và lưu nó vào máy, kể từ các lần truy cập sau trình duyệt sẽ mang dữ liệu trong bộ nhớ đệm này ra thực thi mà không cần phải tải lại một lần nào nữa.

    Ở đây các bạn cũng nên lưu ý chọn máy chủ đang sử dụng nhé:

    Đối với máy chủ Apache

    Apache sẽ đảm nhận chức năng này với 2 module mod_expires và mod_headers.

    Để kích hoạt nó bạn chèn đoạn nội dung sau vào file .htaccess
    Mã:
    # BEGIN Expire headers
    <ifModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 5 seconds"
        ExpiresByType image/x-icon "access plus 2592000 seconds"
        ExpiresByType image/jpeg "access plus 2592000 seconds"
        ExpiresByType image/png "access plus 2592000 seconds"
        ExpiresByType image/gif "access plus 2592000 seconds"
        ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
        ExpiresByType text/css "access plus 604800 seconds"
        ExpiresByType text/javascript "access plus 216000 seconds"
        ExpiresByType application/javascript "access plus 216000 seconds"
        ExpiresByType application/x-javascript "access plus 216000 seconds"
        ExpiresByType text/html "access plus 600 seconds"
        ExpiresByType application/xhtml+xml "access plus 600 seconds"
    </ifModule>
    # END Expire headers
    # BEGIN Cache-Control Headers
    <ifModule mod_headers.c>
        <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
            Header set Cache-Control "public"
        </filesMatch>
        <filesMatch "\.(css)$">
            Header set Cache-Control "public"
        </filesMatch>
        <filesMatch "\.(js)$">
            Header set Cache-Control "private"
        </filesMatch>
        <filesMatch "\.(x?html?|php)$">
            Header set Cache-Control "private, must-revalidate"
        </filesMatch>
    </ifModule>
    # END Cache-Control Headers
    Đối với máy chủ Nginx

    Chèn đoạn sau vào file cấu hình domain.

    Mã:
    location ~* .(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
           expires max; log_not_found off; access_log off;
    }
    Không cần làm nếu website đã dùng WP Super Cache hoặc W3 Total Cache.

    7.Tiết kiệm dung lượng MySQL Database

    Các bạn cũng biết là bây giờ WordPress có thêm tính năng tự động lưu các bản nháp bài viết sau mỗi thời gian nhất định. Điều này có thể rất tiện dụng cho bạn nhưng nó lại làm kích thước cơ sở dữ liệu của bạn phình to ra nếu như các bạn không thường xuyên dọn dẹp nó. Còn nếu bạn lười dọn dẹp thì tắt nó luôn là tốt nhất.
    Khai báo đoạn code này trong file wp-config.php
    Mã:
    define('WP_POST_REVISIONS', false );
    Tối ưu database

    Trong một thời gian dài, database của bạn sẽ sinh ra một số thành phần rác được lưu vào đó sau mỗi lần thực thi lệnh từ máy chủ. Vì vậy không có gì quý hơn là hãy chủ động dọn dẹp nó sau một thời gian nhất định. Mình thường dọn database khoảng 1 tuần 1 lần. Bạn có thể sử dụng các plugin sau đây để dọn dẹp database:



      • WP Optimize
      • Yoast Optimize DB
    Ngoài ra, có một lưu ý là khi bạn cài plugin bất kỳ vào thì nó sẽ tự động sinh ra một cột dữ liệu trong table wp_options, nhưng khi tháo plugin ra thì các cột dữ liệu này vẫn giữ nguyên. Vì vậy mỗi lần tháo plugin, tốt nhất bạn nên dùng thêm plugin WP Options Editor để xóa các cột dữ liệu không còn sử dụng.

    8. Sử dụng CDN – Content Devilery Network

    Nếu blog bạn có nhiều hình ảnh, video, bla bla…thì sử dụng CDN là cách để cải thiện tốc độ cũng như giảm tải cho máy chủ tốt nhất. Một số nhà cung cấp CDN trả phí tốt nhất hiện nay là:



      • Amazon CloudFront
      • MaxCDN
    Nhưng thông thường các dịch vụ CDN luôn có giá hơi đắt, thích hợp sử dụng trên các blog lớn hoặc website quy mô tầm trung trở lên. Nếu bạn muốn dùng CDN miễn phí, hãy cài đặt CloudFlare vào website của bạn là có ngay CDN miễn phí.

    9. Sử dụng kỹ thuật Async cho Javascript

    Async nghĩa là kỹ thuật tải không đồng bộ, tức là các file Javascript sẽ không tải ngay khi trình duyệt vừa mở mà sẽ chỉ bắt đầu tải khi trình duyệt đã tải xong các thành phần khác trong website (tải nội dung chính của web trước). Để áp dụng kỹ thuật Async trong website, bạn có thể dùng CloudFlare để tùy chỉnh nếu bạn có đang dùng nó, hoặc bạn xem qua các plugin hỗ trợ Async cho WordPress.

    *** Trên đây là những phần cơ bản nhất mình tích lỹ và lấy được từ trên mạng từ những nguồn đáng tin cậy và trong quá trình tối ưu web của mình về cách tăng tốc độ tải trang, mọi người ai thấy còn thiếu sót hoặc sai gì thì góp ý giúp mình để để mình hoàn thiện kiến thức.
    Còn đây dành cho ai muốn ai muốn tìm hiểu thêm cho website mới:
    Kế hoạch SEO cho một web mới trong giai đoạn đầu
     
    Đang tải...
    travel, kaka and dulichviet like this.
  2. taigametop1

    taigametop1 Member

    Bài viết:
    17
    Đã thích:
    2
    Cách này của bạn giúp load nhanh hơn bao nhiêu % vậy? mình cũng thử dùng coi sao
     
    hinhyeuphuong thích bài này.
  3. daithanh

    daithanh Well-Known Member

    Bài viết:
    133
    Đã thích:
    18
    Có thể chia sẻ cách để biết được web mình đang sài host apache hay nginx không?
     
  4. Phong Nguyễn

    Phong Nguyễn Well-Known Member

    Bài viết:
    107
    Đã thích:
    6
    Thấy mục hình ảnh là bị nhiều nhất :) - file quá to. Thay đổi xíu làm nên kết quả khác .. hehe
     
  5. hinhyeuphuong

    hinhyeuphuong Well-Known Member

    Bài viết:
    89
    Đã thích:
    10
    Bài viết dài đọc rối quá bác ak! Mà làm sao để biết được tốc độ web chậm mà tăng tốc nhỉ?
     
  6. s2dungnguyen

    s2dungnguyen Well-Known Member

    Bài viết:
    83
    Đã thích:
    30
    xem chừng bạn phải làm nhiều việc đó :v......................
     
    vantruong231 thích bài này.
  7. sangame

    sangame Well-Known Member

    Bài viết:
    117
    Đã thích:
    18
    mình không làm web như mấy bác, mình làm trang game nên giao diện khá là nhẹ, máy chủ đặt ở sing nên tốc độ về việt nam rất tốt, chỉ cần cài thêm cache và nén ảnh trước khi upload là vi vu
     
    vantruong231 thích bài này.
  8. Gamemobi24h

    Gamemobi24h Well-Known Member

    Bài viết:
    132
    Đã thích:
    5
    em thấy chuẩn đấy phải sử lý hình ảnh với bộ nhớ được thì mới mong có tốc độ tốt được
     
  9. dulichviet

    dulichviet Member

    Bài viết:
    19
    Đã thích:
    10
    Bài này cũng khá chi tiết, nhưng 1 số điểm không được chuẩn cho lắm, nên bạn nào biết về code thì hãy động vào, bạn nào chưa biết thì nhờ các tiền bối nhé, không biết mà động vào thì không biết sẽ thành như thế nào đâu
     
    travel thích bài này.
  10. monster12345

    monster12345 Well-Known Member

    Bài viết:
    94
    Đã thích:
    9
    Hình như bài này bạn copy bên thachpham thì phải mình đọc thấy rất quen nhưng mà làm không được
     
Trạng thái chủ đề:
Không mở trả lời sau này.
Đang tải...
Đang tải...