Nếu bạn đã từng đau đầu vì đã làm mọi cách nhưng vẫn không thể tăng tốc website như mong muốn, vậy hãy kiểm tra lại xem liệu bạn có mắc một trong bảy sai lầm dưới đây không nhé.
Ngoài Hosting và CDN, chắc hẳn bạn đã nghe quá nhiều nên không cần phải đề cập. Mặc định rằng bạn đang có một hosting tốt. Vấn đề còn lại là bạn tối ưu cho website của bạn như thế nào mà thôi.
Sử dụng theme chứa quá nhiều tính năng…không dùng đến
Bạn dễ bị cuốn hút vào bẫy tiếp thị của các nhà làm theme với nhiều tính năng tích hợp tùy chỉnh đến không cần thiết như Woocommerce tích hợp, slide tích hợp, form tích hợp,…và website bạn trở nên nặng nề và dễ xung đột với plugin cài đặt thêm.
Thực tế bạn chỉ cần blog gọn gàng và đơn giản mà thôi. Những tính năng khác bạn không cần dùng đến nếu chưa cần.
Hãy bắt đầu với theme nhẹ và gọn gàng như Astra hay Suki theme, bạn không cần lo lắng quá nhiều về tính năng cái mà bạn có thể dễ dàng cài đặt thêm thông qua plugin.
Bạn hãy tham khảo thêm bài viết Tăng tốc WordPress với Astra theme
Cài đặt quá nhiều plugin chất lượng thấp mà không hay biết
Bạn sẽ khó nhận biết được đâu là plugin chất lượng thấp bởi vì việc kiểm tra plugin đòi hỏi test nhiều lần.
Do WordPress liên tục cập nhật nên các plugin chất lượng thấp thường dễ bị bỏ lại phía sau gây lỗi tương thích nếu nhà phát triển không tập trung phát triển.
Ngay cả những công ty lớn cũng gặp tình trạng này, nhưng khác ở chỗ họ thường phát hành bản cập nhật rất nhanh để thích nghi.
Một số dấu hiệu cho thấy plugin bạn đang xài có chất lượng thấp là
- Tần suất cập nhật không thường xuyên. Bạn có thể kiểm tra plugin ở phần changelog.
- Không hỗ trợ khi có sự thay đổi. Bạn có thể kiểm tra trong forum support của WordPress.
- Lỗi php trong dashboard WordPress. Bạn có thể kiểm tra bằng cách bật debug ở Cpanel.
- Lỗi JavaScript front-end. Bạn có thể kiểm tra bằng công cụ inspector của trình duyệt.
- Lỗi HTTPS API. Một số plugin sẽ gọi Api bên ngoài và tạo độ trễ phản hồi ở WordPress backend. Bạn có thể kiểm tra bằng cách cài plugin Querry monitor.
- Lỗi Loopback request. Lỗi này khiến website bạn trở nên chậm cả backend lẫn frontend bởi vì tài nguyên hosting bị ảnh hưởng. Thậm chí nhà cung cấp hosting có thể ban IP của bạn để bảo vệ máy chủ của họ. Đương nhiên webiste bạn sẽ bị down đến khi bạn liên hệ hỗ trợ để phục hồi. Bạn dùng Health Check & Troubleshooting để kiểm tra lỗi này.
Kinh nghiệm thực tế là hãy hạn chế cài quá nhiều plugin. Mỗi plugin khi cài đặt phải kiểm tra kỹ tránh tình trạng quay ngược lại kiểm tra khi có xung đột. Vấn đề này khá đau đầu nếu bạn không có kinh nghiệm.
Ngoài ra, tôi cũng hay tránh các plugin được phát triển dựa trên thư viện jQuery sẽ làm website bạn chậm lại đồng thời tạo thêm HTTP request. Bạn cần kiểm tra đi kiểm tra lại bằng công cụ GTmetrix.
Tưởng rằng dùng Google Font sẽ giúp tăng tốc website
Nếu bạn đang dùng Google Font và nghĩ rằng nó sẽ giúp bạn tăng tốc thì bạn đã lầm. Google font miễn phí và làm chậm website của bạn vì nó sẽ cần thời gian giao tiếp với máy chủ Google sau đó mới render trên website của bạn.
Bước giao tiếp này sẽ làm chậm website của bạn. Ngay cả khi bạn cài custom font, mặc dù không giao tiếp với máy chủ Google thì website bạn vẫn tốn thời gian loading font.
Cách giúp cho website bạn chạy nhanh nhất mà không load font bên ngoài là dùng system font. Font website sẽ dựa theo font mà thiết bị sử dụng. Nhưng khuyết điểm la font hệ thống thường khá xấu và có thể không hợp với phong cách và nhu cầu của bạn.
Cách thứ hai là dùng font theme mặc định. Thông thường theme hiện nay đều tích hợp những font bên trong như Helvetica, Arial, Courier, Times New Roman, Georgia, Verdana… nếu bạn chọn những font này sẽ giúp bạn tăng tốc độ load website. Đối với Tiếng Việt thì bạn nên chọn Arial, Helvatica hay Times New Roman.
Lệ thuộc vào plugin minify CSS, HTML, JavaScript thay vì minify thủ công
Ngày nay hầu hết plugin tạo cache đều tích hợp minify CSS, HTML, JavaScript nên bạn có thể ỷ lại vào chúng.
Quá trình giản lược (minify) những dòng code CSS, HTML hay JavaScript của các plugin này sẽ lấy đi của bạn một ít thời gian khiến website bạn bị chậm, chưa kể có thể gây lỗi cả website nếu bạn không test kỹ.
Bạn không cần lệ thuộc quá nhiều vào các plugin này trong khi đó bạn có thể minify thủ công bằng các dịch vụ online miễn phí đơn giản.
- Additonal CSS: đây là phần các bạn thường tùy chỉnh code và dễ bị duplicate làm cho file CSS trở nên nặng hơn. Bạn có thể dùng Minifier để tinh giản code CSS, dịch vụ sẽ tự động giản lược rất hoàn hảo các dòng code của bạn.
- JavaScript bên ngoài, tương tự với minify JavaScript. Nếu JavaScript của các dịch vụ bên ngoài đã được minify bạn có thể bỏ qua, nếu không bạn phải minify nó để tăng tốc website tốt hơn. Bạn cùng dùng Minifier để tinh giản code.
- HTML: bạn sẽ cần minify nếu bạn đang dùng HTML widget. Bạn có thể minify HTML bằng công cụ online HTML Minifier này.
Với cách minify thủ công như vậy bạn sẽ tăng tốc độ truy cập website thêm một chút nữa 🙂
Chèn mà JavaScript sai cách
Thông thường khi sử dụng dịch vụ bên ngoài WordPress bạn bắt buộc phải nhúng mã JavaScript của dịch vụ vào website.
Hầu hết các bạn sẽ chèn vào website head (head tag – website sẽ load đầu tiên). Vấn đề là chỉ đúng với JavaScript loại Async hay Defer mà thôi. Bạn cần phải kiểm tra xem bất cứ loại JavaScript thuộc Async, Defer hay không.
Để kiểm tra bạn nhìn vào mã JavaScript tìm trong đoạn mã đó có chứa từ “Async” hay “Defer” nếu không thì có là loại JavaScript bình thường.
- Async hay Defer. Bạn chèn vào website head. Website sẽ tự động load đồng thời JavaScript này với phần body của website giúp bạn tránh được render block (webiste load chậm trước khi hiện phần chữ).
- Loại bình thường. Bạn nên chèn vào website foot (vị trí sau body tag và load sau cùng). Giúp bạn tránh được render block như trên.
Ví dụ: Google Analytics có 2 loại JavaScript để bạn nhúng vào website là Gtag.js (đoạn mã bạn copy trên Google Analytics) và Analaytics.js (đoạn mã copy trong development Analytics với tùy chỉnh APP ID).
- Analytics.js là loại async và bạn nên chèn vào website head.
- Gtag.js là loại bình thường bạn có thể chèn vào website foot hay phần cuối body tag.
Nén ảnh mà quên mất kích thước ảnh
Đa số những plugin nén ảnh hay bạn nén bằng photoshop chỉ giải quyết được vấn đề là làm nhỏ dung lượng ảnh mà vẫn giữ được chất lượng ảnh tốt nhất.
Thực tế rằng một bức ảnh có dung lượng cao xuất phát từ độ phân giải của nó. Nếu bạn đang dùng sai độ kích thước ảnh (dimension) thì bạn có nén tốt cỡ nào cũng không hiệu quả.
Ví dụ: Favion website có kích thước tối đa 512px, bạn lại dùng 1020px, thực tế bạn chỉ cần upload ảnh 150px là đủ hiệu quả với gần hết trình duyệt và với ảnh 150px với 1020px sau khi nén có kích thước chênh lệch rất khác nhau.
Bạn cần upload ảnh đúng trước khi nén ảnh bao gồm cả thumbnail đúng. Thumbnail sẽ tùy vào theme của bạn và bạn cần phải set thủ công để có ảnh đúng.
Không kiểm tra lỗi front-end
Một vấn đề nữa sẽ khiến cho website bạn trở nên chậm thật sự nghiêm trọng do website bị một trong hai lỗi sau:
- Lỗi 404 not found. Thông thường xuất phát từ việc bạn đã xoá ảnh trong media library nhưng lại quên rằng bạn đã dùng ảnh đó trên website. Khi đó website sẽ bị chậm do không tìm thấy ảnh. Bạn có thể kiểm tra bằng công cụ GTmetrix để thấy rõ lỗi này.
- Lỗi JavaScript. Thỉnh thoảng bạn sẽ gặp lỗi này do dịch vụ bên ngoài update lại API do cập nhật tính năng mới hay xung đột với theme. Bạn có thể dễ dàng kiểm tra lỗi này bằng công cụ Inspector của trình duyệt.
Lời kết…
Tối ưu và tăng tốc webiste không dễ dàng. Mặc dù tốc độ website không ảnh hưởng quá nhiều đến SEO nhưng ảnh hưởng đến trải nghiệm sử dụng web của người dùng.
Thêm vào đó bạn sẽ cảm thấy không hài lòng khi đã trả tiền cho một hosting tốt nhưng vẫn không nhanh như mong đợi vì một số thiếu sót kinh nghiệm tối ưu.
Bạn có mắc những lỗi trên không hay bạn đang bị những lỗi khác làm chậm website của mình? Hãy chia sẻ để cùng nhau thảo luận bên dưới nhé!
