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

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.

​

Ở 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ẽ)

​

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.

​

Đế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