- Giới thiệu đôi chút
- Tại sao tốc độ tải lại quang trọng với web bán hàng?
- Sao web bán hàng dùng WooCommerce lại chậm?
- Đi vào ví dụ thực tế
- Cách kiểm tra tốc độ của trang web
- Các bước tối ưu hiệu suất của website bán hàng WooCommerce
- Bước 1: Kiểm tra tốc độ của website
- Bước 2: Phân tích website
- Bước 3: Thực hiện các tối ưu hóa
- Tối ưu thời gian phản hồi đầu tiên của máy chủ (TTFB)
- Tối ưu hóa hình ảnh
- Các tối ưu khác part 1
- Các tối ưu khác part 2
- Tối ưu riêng dành cho thiết bị di động
- Bước 4: Kiểm tra lỗi sau khi tối ưu
- Bước 5: Kiểm tra lại web với các công cụ đánh giá hiệu suất
Sau khi thực hiện các hành động tối ưu, việc kiểm tra xem website có bị lỗi gì không là một công việc bắt buộc.
Giả sử như nếu điểm pagespeed có cao lên, nhưng website lại lỗi khiến khách hàng không thể xem sản phẩm được. Vậy thì điểm cao để làm gì?
Dưới đây là các lỗi bạn thường gặp phải sau khi tối ưu một trang web bán hàng
Lỗi giao diện web
Cái này khá dễ gặp khi bạn sử dụng tính năng nén + nối file css,js. Thường thì với các theme code không tốt sẽ có hiện tượng này, với các theme tối ưu cho trang web bán hàng thì hiếm gặp hơn.
Để xử lý lỗi này thì bạn có thể thêm từng file css,js vào danh sách ngoại trừ nén,nối. Đến khi nào tìm ra đúng các file không thể nén được thì thôi. Còn không thì bỏ tính năng này đi.
Giao diên trang bị vỡ trong giây lát
Lâu rồi không gặp trường hợp này nên cũng không đưa ra ảnh minh hoạ được. Cơ bản thì là do tính năng tải trì hoãn css, kèm theo tính nặng tạo css quan trọng không hoạt động.
File css được đưa về footer, vậy nên nội dung sẽ được hiển thị trước (lúc này chưa load file css) gây trang web chỉ toàn chữ liền lại với nhau. Tầm 1, 2 giây sau thì bắt đầu hiện lên giao diện đầy đủ.
Nếu bạn gặp lỗi này. Thử tự tạo css quan trọng của trang rồi thêm vào header xem.
Còn cách tạo như thế nào thì dùng trang này nhá https://jonassebastianohlsson.com/criticalpathcssgenerator/
Lỗi liên quan đến Jquery
Nếu mở tab Console trên Chrome dev tool lên có thấy cái nào liên quan đến Jquery thì nhớ lúc chọn Defer js bỏ qua cái Jquery đi nhá.
JavaScript hoạt động không đúng
Cũng do tính năng nối và nén như css bên trên thôi. Kiểm tra là tại file nào rồi bỏ qua là được.
Giỏ hàng hiển hiển thị sản phẩm không chính xác
Bạn gặp giỏ hàng hiển thị sản phẩm trống, sai sản phẩm, … Thử nhớ lại bài viết thực hiện hành động tối ưu khác phần 2 xem.
Ở phần thực hiện tối ưu có cái mục Bỏ WooCommerce Ajax Cart Fragments đó, nếu có lỗi thì bỏ phần tối ưu này đi.
Sản phẩm đã xem không hoạt động
Thực ra đây là một lỗi liên quan đến cache thì chính xác hơn. Cũng có khá nhiều cách để xử lý.
Đối với Litespeed cache thì dùng shortcode riêng, còn không thì dùng Ajax cũng được.
Bản thân mình cũng đang viết một plugin sản phẩm đã xem(Viết rồi cơ mà chỉ với flatsome thôi, hôm nào rảnh pack ra làm 1 bài viết riêng). Với độ tối giản nhất có thể và không ảnh hưởng tới hiệu suất website.
Quét mã QR để đọc bài viết này để xem tiếp trên điện thoại
