22
Th4

Làm thế nào để tăng tốc độ khi thiết kế website

1. Tại sao lại cần tăng tốc website

Người dùng sẽ không đủ kiên nhẫn chờ website của bạn load 7-8 giây, họ sẽ rời khỏi trang web của bạn trước khi thông tin và hình ảnh tuyệt vời của trang web hiển thị lên.

Google sẽ ưu tiên hiển thị trang có tốc độ cao lên trên top trong danh sách kết quả tìm kiếm.

2. Một số quan niệm sai lầm về tốc độ website  

Khi thiết kế website, nhiều bạn thường có quan niệm chưa đúng về tốc độ website:

  • Hy sinh toàn bộ đồ họa hiệu ứng để có một website tốc độ cao. Một website tẻ nhạt, nội dung nghèo nàn không bắt mắt thì tốc độ cao cũng không có ý nghĩa với người dùng.
  • Website có tốc độ cao là SEO được. Tốc độ chỉ là một phần nhỏ trong cộng việc SEO, không phải cứ tốc độ lên trên 90 là lên top Google.
  • Tăng tốc độ website không hề rẻ tiền, có khi là phải làm lại cả website để có được tốc độ như mong muốn.
  • Website chậm là do hosting. Không phải hoàn toàn như vậy, hosting chỉ là 1 trong những nguyên nhân làm chậm website thôi.

3. Cái gì làm chậm website

  • Web Hosting.
  • Dịch vụ thiết kế web không tốt : website không được cài đặt cache, wordpress không được cập nhật, quá nhiều bài viết rác, comment rác, user rác, lưu quá nhiều các bản edit của trang, bài viết.
  • Kích thước trang:  90% do bạn để hình ảnh quá lớn đặc biệt các hình png đòi hỏi transpatrent, hình ảnh không được nén đúng cách.
  • Các scripts: các script quảng cáo cho hãng thứ 3 như google, script hiệu ứng như slider, animation,…
  • Plugins: cài quá nhiều plugin, các plugin cài  các file css, javascript riêng làm chậm trang.

4. Kiểm tra tốc độ.

Tôi dùng website của công ty làm thí nghiệm: https://software.maytech.vn

Mở công cụ đánh giá tốc độ website:

Google Pagespeed Insights

Nhập đường dẫn website rồi bấm Analize : https://software.maytech.vn

Chờ 1-2 phút và xem kết quả

Trên mobile

Trên Desktop

5. Xác định nguyên nhân

Cơ hội để tăng tốc nằm ở 4 dòng đầu tiên do nó chiếm khá nhiều thời gian. Chúng ta bắt đầu quá trình tăng tốc website qua các bước sau:

6. Làm sạch WordPress

  • Update WordPress.
  • Update toàn bộ plugin.
  • Xóa các plugin không cần thiết
  • Xóa các theme không dùng.
  • Làm sạch cơ sở dữ liệu bằng cách cài WP-Sweep plugin. Plugin này sẽ xóa sạch các dữ liệu rác khỏi database.

7. Xử lý hình ảnh

Mở rộng dòng đầu tiên trong bảng kiểm tra tốc độ của google.

File hình ảnh quá lớn, chúng ta sẽ dùng photoshop để làm nhỏ lại hình, cách nhanh nhất là lấy file về, mở file rồi chọn Save for Web (lưu file cho web):

Chọn đúng kích thước khi hiển thị trên trang web, tránh lưu file có lích thước lớn. Bạn nên xác định kích thước hình ảnh hiện thị trên web là bao nhiêu như hình dưới:

Khi có kích thước hiển thị hình ảnh trên website, bạn đổi kích thước hình ảnh như hình dưới:

Xong thử lại tốc độ đã được cải thiện, tốc độ load hình ảnh xuống còn 1 giây.

8. Cài bộ đệm cache

Bạn cài plugin  Fastest Cache

Cài xong bạn cấu hình như bên dưới :

Kiểm tra lần nữa, tốc độ web đã cải thiện đáng kể.

Trên mobile

Trên Desktop

9. Tối ưu cấu trúc trang

So sánh với Thế Giới Di Động

Trang software.maytech.vn

Trang thegioididong.com:

Rõ ràng cấu trúc trang còn quá phức tạp làm cho tốc độ trang chậm 4.8 giây so với 1.2 giây của TGDĐ.

Trang web đang dùng Revolution Slider trên banner bao gồm 2 slide. Có thể đây là nguyên nhân. Hy sinh hiệu ứng để có được tốc độ, mình thay slide bằng một tấm hình, xóa plugin Revolution Slider, kết quả cải thiện đáng kể:

Trên mobile

Trên Desktop

10. Kết luận

Đây là cách cơ bản để cải thiện tốc độ website ở mức chấp nhận được. Để tốc độ lên trên  90 như TGDĐ, chúng ta cần phải đầu tư thêm:

  • APM cho Mobile.
  • Dùng CDN
  • Dùng Hosting cao cấp.
  • Viết lại website mà không dùng tới bộ Page Builder nào cả.

Tôi sẽ học và thực hành cách tối ưu website lên 90, nếu thành công sẽ có các cách thức trong bài  kế tiếp.

Chúc các bạn áp dụng thành công kỹ thuật của tôi vào website của bạn.

Cám ơn