Trước khi đi vào bài viết mình cũng xin nói trước *Điểm chấm của PageSpeed Insights không phản ánh 100% tốc độ tải trang, mà điểm dánh giá đó bao gồm cả điểm chất lượng tối ưu sự tương thích của website với công cụ tìm kiếm của Google. Điểm chất lượng cao thì website sẽ được Google đánh giá ưu tiên hơn, SEO sẽ dễ dàng hơn*.
Dù website được xây dựng trên bất kỳ ngôn ngữ nào, Framework hay CMS nào đi chăng nữa thì tối ưu tốc độ tải trang cũng rất cần thiết. Hôm nay Lamkinhdesigner sẽ hướng dẫn các bạn một số cách làm để cải thiện vấn đề này .
Dưới đây là hình ảnh thực tế kiểm tra tốc độ và điểm chất lượng của website lamkinhdesigner.com
- Trên bản Desktop
- Trên bản Mobile
I. Cải thiện chất lượng Hosting bạn đang dùng
Hosting là vấn đề đầu tiên mình muốn nhắc đến bởi vì tốc độ tải trang nhanh hay chậm là do phần lớn thời gian phản hồi từ máy chủ. Web của bạn chưa tối ưu thì chưa nói đến, nhưng đến cả Hosting cũng phản hồi chậm nữa thì coi như thất bại hoàn toàn rồi. Nếu bạn có điều kiện thì có thể mua VPS để sử dụng, nhưng không phải ai cũng có điều kiện để dùng VPS, đa phần chúng ta đều sử dụng Hosting. Các bạn có thể chọn cho mình một nhà cung cấp Hosting uy tín và chất lượng để sử dụng, còn ai chưa tìm được nhà cung cấp thì có thể dùng Hosting của Azdigi bên mình cũng đang sử dụng Hosting của Azdigi thấy rất ổn định và ok, chưa hề có lỗi lầm gì, thời gian phản hồi của Hosting khá nhanh so với tầm tiền. Hosting Azdigi sử dụng ổ SSD thì nhanh hơn hẳn so với các Host dùng ổ HDD rồi. Các bạn có thể tham khảo các gói Hosting ở đây.
II. Website của bạn không nên cài quá nhiều Plugin
Không nên chứ không phải chúng ta không được cài plugin vào website, chúng ta nên hạn chế đến mức thấp nhất việc sử dụng. Những plugin nào thật cần thiết thì chúng ta để lại, cái nào không cần thiết thì gỡ bỏ bớt đi. Khi có nhiều plugin, đồng nghĩa với việc server của bạn phải làm việc nhiều hơn để xử lý các đoạn code bên trong đó, mỗi plugin khi kích hoạt lên cũng sẽ lưu lại một dữ liệu nhỏ trong database nên nếu bạn thử quá nhiều plugin thì sẽ khiến table wp_options sẽ phình to ra hơn, lúc đó server lại mất tài nguyên và thời gian để “listing” dữ liệu trong database trước khi lấy dữ liệu tương ứng với truy vấn gửi đến.
III. Sử dụng theme đơn giản
Website của bạn đẹp không có nghĩa là nó sẽ có lợi cho bạn, thực tế đã chỉ ra rằng theme càng đẹp, càng có nhiều tính năng thì nguy cơ làm ảnh hưởng đến tốc độ của website càng lớn.
Bạn hãy thử tưởng tượng một theme dạng tin tức, nó sẽ có chức năng hiển thị các bài theo chuyên mục và nó sẽ hiển thị ở nhiều chuyên mục khác nhau. Điều này có nghĩa là nó sẽ sản sinh ra rất nhiều truy vấn từ khách truy cập gửi đến máy chủ, sẽ làm cho máy chủ bạn tốn nhiều tài nguyên hơn và nặng hơn là tràn bộ nhớ.
Vấn đề thứ 2 là website của bạn càng lung linh bao nhiêu thì nó luôn chứa rất nhiều CSS và Javascript để tạo ra các hiệu ứng, mà CSS và Javascript lại là một trong các nguyên nhân làm website bạn tải lâu hơn.
Do đó, theo lời khuyên của mình thì bạn nên sử dụng theme có cấu trúc càng đơn giản càng tốt nếu có thể, trường hợp bạn cần một theme rườm rà thì hãy chọn đúng các theme ở các nhà cung cấp uy tín vì không phải theme nào trả phí là nó đều chạy tốt, rất nhiều theme trả phí nhưng vẫn chứa nhiều bug, lúc này server lại càng có thêm việc để làm là ghi log lỗi có trong website.
IV. Tối ưu hoá hình ảnh trên website
Hình ảnh chính là đối tượng dẫn đến website load rất lâu và tốn băng thông nhiều hơn vì dung lượng các tấm ảnh loại lớn không hề nhỏ, nếu website bạn đăng các ảnh với chất lượng cao như wallpaper máy tính, ảnh photographer thì lại càng nặng hơn.
Bạn hãy cân nhắc trước khi upload hình ảnh lên website, tất nhiên không phải chúng ta không được sử dụng hình ảnh. Mà khi ta sử dụng phải hợp lý và khéo léo, nếu ảnh có dung lượng lớn, size ảnh to thì bạn nên thu nhỏ nó lại với kích thước lớn nhất là 800×600 và sử dụng các phần mềm nén ảnh xử lý trước khi upload, hoặc bạn có thể nén ảnh trực tuyến bằng website http://tinypng.com bạn có thể kéo thả ảnh vào khu vực nén ảnh, rồi Download ảnh đã nén về để Upload lên website của mình.
Nếu bạn không thể sử dụng phần mềm nén ảnh thì có thể dùng plugin WP Smush.it hoặc EWWW để nó tự giảm chất lượng hình ảnh mỗi khi upload lên máy chủ.
Một thủ thuật khác để tăng tốc độ tải cho những website sử dụng ảnh là sử dụng kỹ thuật tải không đồng bộ lên nó, bạn có thể sử dụng các plugin như BJ LazyLoad, Advanced LazyLoad để cấu hình website sẽ chỉ tải hình ảnh nếu người dùng xem tới vị trí của nó, còn không nó sẽ không tải.
V. tối ưu cơ sở dữ liệu (Database)
Phần này thì mình khuyên nếu bạn nào không rành thì cần tìm hiểu kỹ trước khi làm, nhớ Backup lại database lại trước khi thực hiện tối ưu
Nếu website bạn đã có nhiều bài viết, dung lượng database đạt mức trên 100MB thì việc cấp bách bạn cần làm là nên tối ưu lại database để server có thể xử lý tốt hơn khi có truy vấn gửi vào.
Trước hết, hãy chắc chắn rằng database của bạn luôn được làm tươi vì nó cũng giống như ổ cứng vậy, sau khi thực hiện việc đọc/ghi dữ liệu quá nhiều nó cũng sẽ bị hiện tượng phân mảnh và chứa các dữ liệu rác (như log chẳng hạn) lưu trong đó, đó là chưa kể đến các dữ liệu không cần thiết như các transient, comment spam, bản nháp tự lưu, revisions,… Bạn có thể dễ dàng tối ưu database qua plugin tên là WP Optimize.
Còn nếu website bạn có mức độ lớn hơn, bạn có điều kiện hơn thì hãy sử dụng một máy chủ riêng để lưu trữ và xử lý database (Remote MySQL Server) vì việc xử lý database khá tốn tài nguyên nên nó sẽ làm ảnh hưởng đến việc xử lý các file PHP của server. Chỉ đơn giản là tìm một cái host khác và bỏ database vào đó rồi sửa phần hostname trong file wp-config.php thành địa chỉ của máy chủ đó. Hoặc bạn cũng có thể dùng các dịch vụ chuyên dụng hơn như Amazon RDS, Google Cloud Database.
VI. Hạn chế tới mức thấp nhất việc kết nối với tài nguyên bên ngoài
Tài nguyên bên ngoài ở đây nhắc đến có nghĩa là gì? Nó có nghĩa là các dịch vụ có trỏ liên kết ra bên ngoài và khi vào website bạn phải tải nó, ví dụ như các mã nhúng Google Analytics, Google+, Facebook,… (Ví dụ như bạn nhúng Iframe Google Map, fanpage facebook).
Lời khuyên chân thành nhất là bạn nên nhúng cái nào thật cần thiết thì nhúng vào, còn không cần thiết thì bỏ đi. Ví dụ như Iframe của Google Map, bạn có thể thay cái Map ấy bằng một bức ảnh rồi dẫn link đến Map của bạn như thế sẽ tối ưu hơn.
VII. Gzip và Cache cho trình duyệt
Gzip là một phương thức nén các dữ liệu nhận được từ máy chủ lại thành một gói dữ liệu nhỏ và gửi nó đến trình duyệt. Vì bản năng trình duyệt cũng là một phước thức tải file từ các website về dữ liệu cache của nó nên sẽ vô cùng mất thời gian nếu website bạn không sử dụng gzip. Sử dụng gzip có thể giúp website bạn được nén lại tới mức nhẹ tối đa nên khách truy cập sẽ tốn ít thời gian tải hơn.
Để kích hoạt gzip bạn có thể chèn đoạn sau vào file .htaccess (nếu sử dụng Shared Host/Apache):
[php] # Start gzip compressionAddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# End Gzip compression
[/php]
Còn bạn dùng NGINX thì hãy chắc chắn file nginx.conf của bạn có các dòng này:
[php] # Start Gzip compressiongzip on;
gzip_min_length  1100;
gzip_buffers  4 32k;
gzip_types text/plain application/x-javascript text/xml text/css;
gzip_vary on;
# End Gzip Compression
[/php]
Bạn kiểm tra xem Website của mình đã được bật nén hay chưa thông qua website http://checkgzipcompression.com/ nếu ok nó sẽ báo YES, Its GIP Enable.
Còn Cache cho trình duyệt (Browser Cache) là một cách để chỉnh sửa thời gian lưu bộ nhớ đệm của các file tĩnh như hình ảnh lâu lưu trữ lâu hơn ở trình duyệt trên máy tính, vì khi trình duyệt đã có cache các file đó rồi thì các lần load sau nó không phải mất công tải dữ liệu về nữa nên bạn sẽ truy cập được nhanh hơn.
Để thiết lập cache trình duyệt, bạn có thể chèn đoạn dưới vào file .htaccess (Apache):
[php] # Browser caching<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
# End Browser caching
[/php]
Cho NGINX:
[php] location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {expires max;
}
[/php]
VIII. Nén tối ưu các file Css và js
Việc tối ưu Css và Js cũng không kém phần quan trọng, nó được PageSpeed Insights thông báo là chặn hiển thị. Bạn không nên phân nhỏ quá nhiều File Css và Js vì việc đó ngẫu nhiên tạo thêm việc làm cho Server của bạn phải vất vả phản hồi thêm các yêu cầu từ máy khách Client. Chúng ta nên gộp các file nhỏ thành một file lớn để giảm tải công việc cho Server.
Ngoài ra bạn có thể sử dụng Plugin giúp tối ưu việc này như: Async JS and CSS.
Trên đây là 8 cách Lamkinhdesigner hướng dẫn các bạn giúp các bạn cải thiện được điểm tối ưu cũng như tốc độ tải trang cho website của bạn. Các bạn thực hiện theo các bước xong nhớ vào Pagespeed Insights để kiểm tra lại thành quả của mình nhé.
Nếu thấy bài viết hữu ích hãy chia sẻ cho bạn bè cùng biết và luôn ủng hộ cho website của chúng tôi nhé. Chúc thành công!
Facebook
