Tối ưu các yếu tố về tốc độ Website (Speed Rules)
Thời gian đáp ứng của máy chủ (Server Response Time)
Đây là yếu tố rất quan trọng và phức tạp nhất. Do yếu tố này liên quan đến nhiều phần tối ưu chuyên sâu liên quan đến VPS/Server (phần cứng CPU + RAM + HDD + Network), tối ưu MySQL, PHP, Nginx / Apache,… nên xTraffic.pep.vn sẽ có những bài viết riêng về các phần này để các bạn tham khảo chuyên sâu.
Cách đơn giản nhất là sử dụng Varnish Cache để lưu lại toàn bộ nội dung truy vấn và trả về cho người dùng khi đã tạo cache. Ưu điểm của Varnish Cache là không phân biệt bạn sử dụng LEMP hay LAMP, Varnish Cache sẽ xử lý toàn bộ truy vấn và lưu lại để trả về người dùng mà không cần phải gọi để PHP & MySQL xử lý, như vậy sẽ giảm tải rất nhiều cho Server (Xem thêm cách cài đặt Varnish Cache trên CentOS tại đây)
Kích cỡ của mã HTML gửi đến Browser
Do nhược điểm của giao thức TCP nên Google khuyến cáo bạn phải làm mọi cách để mã nguồn HTML có kích cỡ dưới 14 KB (Kilobytes) khi chuyển dữ liệu đến browser. Có nghĩa là dù bạn sử dụng gzip hay không thì dữ liệu truyền đến browser không được quá 14KB để đạt được hiệu quả cao nhất của giao thức TCP.
Nén các nội dung trước khi gửi đến Browser (Enable Gzip Compression)
Các trình duyệt hiện nay đều đã hỗ trợ phương thức nén Gzip để nén dữ liệu khi truyền tải giữa Server & Browser.
Hiện tại Gzip là phương thức nén mang lại hiệu quả cao về tỷ lệ nén (cao nhất đối với các loại dữ liệu văn bản như mã HTML, Javascript, CSS,…) và tài nguyên sử dụng (CPU, RAM). Do đó bạn nên bật tính năng nén Gzip trên Apache hoặc Nginx.
Sử dụng bộ nhớ đệm trên trình duyệt (Leverage Browser Caching)
Các trình duyệt hiện nay đều hỗ trợ lưu lại cache của các nội dung truy vấn. Tuy nhiên mặc định thì trình duyệt sẽ không lưu cache trừ khi bạn gửi chỉ thị cho trình duyệt biết nội dung nào cần lưu cache và lưu trong khoảng thời gian là bao lâu. Hiện tại có 2 cách gửi chỉ thị cache cho trình duyệt là :
- Cache-Control : chỉ thị cho trình duyệt cách lưu cache và trong khoảng thời gian là bao lâu. Ví dụ : Cache-Control : max-age=86400; chỉ thị cho trình duyệt lưu cache trong 86400 giây (1 ngày) kể từ lúc nhận chỉ thị. Tức là trong vòng 24h tới, trình duyệt sẽ không cần truy vấn đến Server để lấy nội dung này nữa mà sử dụng luôn nội dung trong bộ nhớ cache của trình duyệt để hiển thị cho người dùng
- ETag : là cách lưu cache dựa trên 1 khoá (id, bao gồm các chữ cái và chữ số, thường dùng hàm băm để làm khoá) gửi kèm. Khi trình duyệt truy vấn đến server sẽ gửi kèm khoá này để so sánh với nội dung trên Server, lúc này Server sẽ kiểm tra khoá mà trình duyệt gửi kèm với khoá trên Server, nếu 2 khoá khớp nhau thì Server chỉ cần gửi HTTP Status Code 304 Not Modifiedđể thông báo cho trình duyệt biết là nội dung không thay đổi, lúc này sẽ nhanh hơn rất nhiều so với việc gửi nguyên cả nội dung cho trình duyệt.
Trong 2 cách trên thì Cache-Control sẽ mang lại hiệu quả hơn vì browser không cần phải gửi bất kỳ truy vấn nào mà sẽ lấy luôn nội dung trong bộ nhớ cache của browser đến khi hết hạn.
Theo khuyến cáo của Google thì các nội dung ít thay đổi như hình ảnh, audio, video, .js, .css,… thì nên lưu cache tối thiểu là 1 tuần, và bạn có thể lưu cache lên đến 1 năm cho các nội dung này.
Để sử dụng Cache-Control tự động trên Apache thì bạn thêm đoạn sau vào file “.htaccess” nằm tại thư mục gốc của website
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 3600 seconds" ExpiresByType application/atom+xml "access plus 3600 seconds" # Favicon ExpiresByType image/x-icon "access plus 15552000 seconds" # Media: images, video, audio ExpiresByType image/gif "access plus 15552000 seconds" ExpiresByType image/png "access plus 15552000 seconds" ExpiresByType image/jpeg "access plus 15552000 seconds" ExpiresByType image/jpg "access plus 15552000 seconds" ExpiresByType video/ogg "access plus 15552000 seconds" ExpiresByType audio/ogg "access plus 15552000 seconds" ExpiresByType video/mp4 "access plus 15552000 seconds" ExpiresByType video/webm "access plus 15552000 seconds" # HTC files (css3pie) ExpiresByType text/x-component "access plus 15552000 seconds" # Webfonts ExpiresByType application/x-font-ttf "access plus 15552000 seconds" ExpiresByType font/opentype "access plus 15552000 seconds" ExpiresByType font/woff2 "access plus 15552000 seconds" ExpiresByType application/x-font-woff "access plus 15552000 seconds" ExpiresByType image/svg+xml "access plus 15552000 seconds" ExpiresByType application/vnd.ms-fontobject "access plus 15552000 seconds" # CSS and JavaScript ExpiresByType text/css "access plus 15552000 seconds" ExpiresByType application/javascript "access plus 15552000 seconds" ExpiresByType text/javascript "access plus 15552000 seconds" ExpiresByType application/javascript "access plus 15552000 seconds" ExpiresByType application/x-javascript "access plus 15552000 seconds" # Others files ExpiresByType application/x-shockwave-flash "access plus 15552000 seconds" ExpiresByType application/octet-stream "access plus 15552000 seconds"</ifModule> |
Để sử dụng Cache-Control trên Nginx thì bạn thêm dòng sau trong block “server {…}” tại file cấu hình Nginx :
1
2
3
4
5
6
| server { #Thêm dòng sau vào block server... location ~* \.(rtf|rtx|svg|svgz|txt|css|htc|less|js|js2|js3|js4|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip) { expires 365d; }} |
Minify Resources (HTML, CSS, and JavaScript)
Minify là kỹ thuật loại bỏ các ký tự thừa trong mã HTML, CSS, Javascript nhằm mục đích là giảm kích cỡ nội dung truyền tải từ Server cho Browser nhằm tăng tốc và tiết kiệm băng thông cho website.
nguồn blog-xtraffic.pep
nguồn blog-xtraffic.pep
Nhận xét
Đăng nhận xét