Hướng dẫn tối ưu tăng tốc độ website nâng cao – Phần cuối – Các chiến thuật tối ưu cần tránh

Trên không gian rộng lớn của sự hiểu biết trên Internet, bạn có thể đã gặp phải nhiều lời khuyên về cách tối ưu hóa tốc độ và hiệu suất của trang web của bạn. Tuy nhiên, một số trong số đó lại giống như dấu vết của bánh mỳ ném bạn vào một khu rừng rậm của sự rối rắm. Đây là lúc chúng tôi bước vào để làm sáng tỏ về những lời khuyên tối ưu không cần thiết, không hợp lý và lạc hậu mà lan truyền trên mạng. Trong hướng dẫn này, chúng tôi sẽ liệt kê chi tiết những chiến thuật sai lầm này, kèm theo những suy nghĩ thẳng thắn của tôi, chỉ để trả lời sự tò mò của bạn. Hãy chuẩn bị tinh thần, vì bạn có thể phát hiện rằng, đáng ngạc nhiên, một số trang web chậm lại do chính người dùng!

Vậy tại sao hầu hết các chiến thuật tối ưu hóa này lại không đáng tin, bạn hỏi? Hãy cùng chúng tôi phân tích:

• Chúng không khắc phục được vấn đề gốc.
• Thay vì tăng tốc độ, một số lại làm cho tình trạng trở nên tồi tệ hơn.
• Chúng đã lỗi thời hoặc không còn phù hợp với công nghệ hiện đại.
• Trong quá trình theo đuổi tốc độ, chúng có thể phá vỡ thiết kế và chức năng của trang web của bạn.
• Chúng có thể gia tăng tải máy chủ của bạn đáng kể.
• Thậm chí, lợi ích mà chúng mang lại gần như không thể nhận biết, nếu có.
• Chúng thường chỉ hoạt động trong những tình huống hạn chế.
• Mặc dù có thể cải thiện điểm số trang web, nhưng thường làm trải nghiệm người dùng trở nên tồi tệ hơn.
• Tổng cộng, lợi ích của chúng không xứng đáng với nhược điểm đi kèm

Những chiến thuật tối ưu hosting sai lầm

Mở rộng theo chiều ngang (thêm nhiều máy chủ)

• Việc mở rộng theo chiều ngang sẽ không bao giờ nhanh hơn việc chạy tất cả các dịch vụ trên một máy chủ địa phương. Khi nối nhiều máy chủ lại với nhau, dữ liệu của bạn cần phải đi qua nhiều proxy hơn.
• Việc mở rộng theo chiều ngang được thiết kế để ngăn chặn lưu lượng cao gây làm chậm tốc độ cơ bản. Nó không thể làm tăng tốc độ trong môi trường có lưu lượng thấp.
• Duy nhất một loại mở rộng có thể tăng hiệu suất cơ bản là mở rộng theo chiều dọc, nghĩa là “nâng cấp tài nguyên máy chủ” như CPU, bộ nhớ, ổ đĩa, v.v.

Mua một máy chủ đắt tiền

• Đây chỉ là một biện pháp tạm thời để khắc phục sự chậm trễ của hệ thống.
  Số tiền thêm mà bạn tiêu cho việc lưu trữ có thể dễ dàng được dùng để tối ưu hóa mã nguồn tốt hơn
• Nếu trang web của bạn có lưu lượng thấp mà cần một máy chủ trị giá 300 đô la/tháng để có thể chấp nhận được, hãy tập trung vào việc sửa mã nguồn!
• Máy chủ đắt tiền chỉ hiệu quả hơn đối với tải động (trang quản trị, thanh toán) nếu trang web của bạn đã được cache một cách hiệu quả, thì sự khác biệt là không đáng kể.

Tối ưu hóa cho các kiểm tra tốc độ và điểm số trang web

• Bạn đã biết rằng tối ưu hóa để có điểm số trang cao đôi khi có thể làm cho trang web của bạn trở nên chậm hơn không? (Điều này là sự thật!)

Triển khai chiến thuật giam giữ cho máy chủ ít người dùng

• Nhiều người đọc các hướng dẫn và chiến thuật ngẫu nhiên (như cài đặt CloudLinux/CageFS) cho máy chủ và nghĩ rằng nó có thể giúp họ.
• Hầu hết các hướng dẫn đó được viết cho các máy chủ dành riêng có nhiều người dùng và không liên quan đến thời đại mới với VPS giá cả phải chăng chỉ có một vài trang web.
• Các chiến thuật giam giữ sẽ làm chậm trang web của bạn do chúng giới hạn tài nguyên.

Tối ưu hóa theme không tốt

Sử dụng theme quá đơn giản

• Nếu theme của bạn quá trống rỗng đến mức bạn phải tải các trình xây dựng trang và plugin thừa để có giao diện mong muốn, có lẽ bạn đang phá hoại mục tiêu của một theme nhẹ ban đầu!
• Hãy xem xét sử dụng một theme con tùy chỉnh hoặc một thiết kế trang web sẵn có cho Genesis hoặc GeneratePress. Ngoài ra Nevo cũng là một theme cực kỳ chất lượng.

Chuyển sang hệ thống quản lý nội dung tĩnh (không phải WordPress)

• Đây là một quyết định không sáng suốt.
• Hệ thống quản lý nội dung tĩnh nhanh vì chúng đơn giản. Chúng không thể thực hiện tất cả các thiết kế và chức năng phức tạp mà WordPress có thể thực hiện.
• Chuyển sang hệ thống quản lý nội dung tĩnh thực sự đòi hỏi kỹ năng phát triển nhiều hơn!

Tối ưu hóa plugin web không tốt

Cài đặt nhiều plugin tối ưu hóa

• Plugin duy nhất bạn cần là plugin cache. Đừng cài đặt nhiều plugin tối ưu hóa! (Cache trình duyệt, tắt wp-embeds, kết hợp CSS, tải ảnh lười biếng, vv.)
• Đừng cài đặt các plugin “tăng cường” cho các plugin khác, hãy chắc rằng họ sử dụng autoloads (bộ nhớ) để làm nhanh hơn… nhưng điều này chỉ làm nhanh hơn cho plugin cụ thể mà làm giảm tốc độ tải trang web toàn bộ của bạn.

Sử dụng plugin quản lý (tải theo điều kiện)

• Nếu bạn phải thông báo cho các plugin không tải trên các trang web mà họ không được sử dụng, có thể đó không phải là plugin tốt ban đầu.
• Tốt nhất là bạn nên loại bỏ hoặc thay thế những plugin đó.

Tối ưu hóa hình ảnh không tốt

Tải hình ảnh một cách lười biếng

• Đúng, tôi biết rằng quan điểm của tôi trái ngược với những gì nhiều người nghĩ.
• Nhưng tôi không quan tâm, tôi không thích tải lười biếng.
• Tất nhiên, nó giúp cải thiện điểm số trang web nhưng làm chậm trải nghiệm người dùng.
• Trang web luôn trông tốt hơn khi tắt nó đi!

Nén hình ảnh quá mức

• Đừng làm quá mức đến mức chúng trông xấu xí.
• Có thể làm cho chúng nhỏ hơn
• Hoặc nếu bạn giảm chất lượng, làm cho chúng tối và đặt văn bản lên trên để ít dễ nhận biết hơn.

Sử dụng quá nhiều SVG trực tiếp (inline SVG)

• Nếu bạn có 1 hoặc 2 thì không sao.
• Nếu nhiều hơn thế, bạn chỉ đang làm cho mã HTML của bạn trở nên lớn hơn.
• SVG hầu như luôn không phải là mục quan trọng.
• VÀ thường được tải trên mọi trang. Hãy để chúng được yêu cầu riêng biệt từ mã HTML để có thể được lưu trữ trong trình duyệt.
• Nếu bạn thực sự muốn nhẹ hơn, hãy tạo một phông biểu tượng tùy chỉnh!

Để lại bản sao nén hình ảnh trên máy chủ

• Nếu bạn sử dụng plugin nén hình ảnh, hãy xóa bản sao lưu khỏi máy chủ của bạn để giữ nó nhẹ nhàng.
• Nếu bạn muốn giữ bản gốc, hãy tải chúng xuống máy tính của bạn.

Dịch vụ lưu trữ đám mây cho phương tiện

• Có một công ty hấp dẫn nào đó đã thuyết phục bạn tải ảnh lên S3? Và sử dụng dịch vụ CDN tùy chỉnh của họ để “tải ảnh nhanh hơn”?
• Tôi có thể đảm bảo bạn rằng đó là một ý tưởng ngu ngốc. Các tài sản hình ảnh có khả năng tải nhanh hơn từ máy chủ nguồn của bạn hơn từ máy chủ lưu trữ bên ngoài chậm như S3.
• S3 về cơ bản chỉ là một biện pháp cuối cùng nếu bạn cạn kiệt không gian trên máy chủ của bạn và không muốn trả tiền cho một máy chủ đắt tiền (với ổ đĩa nhanh) ở nơi khác. Hãy để tôi lặp lại, S3 là lưu trữ chậm.
• Và chính vì S3 chậm mà các plugin và dịch vụ đám mây này cảm thấy cần thêm CDN vào nó. Đừng để họ lừa dối bạn. Việc tải ảnh từ lưu trữ bên ngoài chậm qua một proxy CDN sẽ chậm hơn so với việc tải từ máy chủ nguồn của bạn.
• Nếu có thể, hãy tải từ máy chủ cục bộ của bạn. Và nếu cần, hãy sử dụng CDN với máy chủ cục bộ của bạn.
• Lựa chọn duy nhất khi phương tiện lưu trữ ngoài và phương tiện CDN này thực sự hữu ích là khi bạn có các tệp video nặng hoặc nhiều hình ảnh hoặc muốn tiết kiệm tiền hoặc có quá nhiều lưu lượng truy cập để CDN của bạn luôn luôn ấm.
• Tôi cũng muốn thêm rằng nếu bạn chọn lựa chọn lưu trữ bên ngoài, bạn nên sử dụng một CDN đẩy hơn là một CDN kéo.

Tối ưu hóa caching không tốt

Bật mọi tính năng trên plugin cache

• Đừng là người ngốc mở mọi tính năng trên plugin cache và làm hỏng trang web của mình.
• Đừng bật cache riêng biệt cho điện thoại di động hoặc AMP nếu bạn không cần nó!
• Đừng cache cho người dùng riêng tư hoặc đăng nhập trừ khi bạn buộc phải làm như vậy.
• Đừng cache phiên giỏ hàng WooCommerce (gần như không cần thiết).
• Nếu bạn không hiểu một tính năng, hãy kiểm tra tài liệu hoặc hỏi người khác giúp đỡ.
• Hãy sử dụng chỉ những gì bạn cần. Ít hơn có nghĩa là nhiều hơn!

Bật bộ nhớ cache đối tượng khi không cần thiết

• Nó chỉ được thiết kế cho các trang động.
• Nếu tất cả các trang đều là tĩnh, việc sử dụng bộ nhớ cache đối tượng có thể làm chậm nó.
• Bộ nhớ cache đối tượng không cần thiết cũng có thể tiêu thụ bộ nhớ, cấu hình bộ nhớ cache đối tượng không đúng cách có thể phục vụ dữ liệu cũ.

Cache trình duyệt quá lâu

• Cache trình duyệt thường dành cho các tài sản tĩnh hiếm khi thay đổi (hình ảnh, CSS, JS).
• Cài đặt an toàn có thể là từ 1-7 ngày để chúng không được tải xuống lại nếu trình duyệt truy cập lại trong khoảng thời gian đó.
• Cài đặt quyết liệt có thể là tới 30 ngày hoặc thậm chí 1 năm.
• Vấn đề là nếu bạn thay đổi hình ảnh hoặc CSS trong khoảng thời gian đó, một số người dùng sẽ thấy phiên bản cũ.

Tải trước trang (Preload)

• Chiến thuật thông minh là tải trước các trang trước khi bạn nhấp vào chúng! (Sau đó, chúng xuất hiện ngay lập tức khi được nhấp vào.)
• Một số sẽ tải trước tất cả các liên kết có sẵn. Những người khác đoán hoặc chỉ tải trước những gì bạn di chuột qua.
• Có nhiều ý nghĩa kỹ thuật liên quan đến việc tải trước…chẳng hạn như các yêu cầu máy chủ bổ sung (đối với các mục thậm chí không được nhấp vào), vi phạm theo dõi chuyển đổi/liên kết, tự DDOS vô tình, thậm chí có thể phá vỡ thiết kế hoặc chức năng của trang do CSS/JS được tải vào những thời điểm không mong muốn.

Plugin/Dịch vụ WordPress tĩnh

• Tôi nghĩ rằng đây là cách phức tạp (thủ công) hơn để sử dụng cache.
• Nhưng có thể hữu ích đối với người dùng có hiểu biết và biết mình đang làm gì.
• Đối với tất cả mọi người khác, bạn có thể gặp nhiều vấn đề từ việc sử dụng chúng.
• Muốn thử? Hãy tự kiểm tra… WP2Static và Shifter.

Tối ưu hóa tải tài sản không tốt

Kết hợp tài sản CSS/JS

• Tôi ghét việc kết hợp CSS/JS.
• Có thể làm hỏng thiết kế trang, trì hoãn phản hồi ban đầu, tăng tải máy chủ hoặc thậm chí làm chậm tốc độ tải của trang web của bạn. Những lợi ích thậm chí không thể nhận biết (ngoại trừ các bài kiểm tra trang web ngớ ngẩn).
• Lợi ích tốt hơn nằm ở các trang web lớn và nặng nề, nhưng cũng có nhược điểm. Hãy thử nghiệm với tính năng này bật và tắt để so sánh (và thử nghiệm bằng mắt, không thông qua các bài kiểm tra trang).

Tạo Critical CSS

• Trừ khi trang web của bạn thực sự cần nó VÀ bạn tạo Critical CSS một cách cẩn thận
• Thường làm chậm tốc độ tải trang web của bạn, làm hỏng kiểu dáng hoặc tạo ra các vấn đề FOIT/FOUT.
• Cách duy nhất hiệu quả để tạo Critical CSS là tự làm nó thủ công. Nhưng hầu hết mọi người không có kỹ năng đó và làm nó thông qua plugin tự động hóa (thường bao gồm kiểu dáng không cần thiết và bỏ lỡ kiểu dáng cần thiết).
• Hoàn toàn không cần thiết cho các trang web đã gọn gàng.
• Thận trọng khi sử dụng Critical CSS.

Inlining CSS

• Thường là ý tưởng ngớ ngẩn
• Chỉ dành cho CSS cụ thể của từng trang, như những dòng 1 đoạn đơn giản không cần yêu cầu HTTP riêng biệt.
• Không dành cho việc xuất toàn bộ CSS vào mã HTML. Điều này làm tăng tải cho mỗi trang có thể được lưu trữ toàn cầu.
• Sẽ làm chậm tốc độ truy cập sau khi trang đã được lưu vào bộ nhớ đệm vì CSS đó phải được phân tích lại và có thể không được lưu vào bộ nhớ đệm.
• Chiêu này chỉ dành cho các trang siêu nhẹ với ít kiểu dáng gần như không có.
• Nó không thích hợp cho việc tăng tốc độ trang web nặng nề.

Xóa chuỗi truy vấn cho tài sản CSS/JS

• Có lẽ một số bài kiểm tra trang web đã bảo bạn làm như vậy.
• Nhưng sau đó điều gì xảy ra khi bạn làm điều đó? CSS thay đổi mất rất nhiều thời gian để hiển thị trên các trình duyệt đã xem trang web của bạn (vì họ đã lưu phiên bản cũ trong bộ nhớ đệm).
• Bây giờ bạn gặp vấn đề đánh đập bộ nhớ đệm.
• Chiêu này đã lỗi thời vì hầu hết các trình duyệt và dịch vụ (như CDN) có thể lưu tài sản hiệu quả với chuỗi truy vấn.
• Nếu bạn vẫn cố gắng thử nghiệm, ít nhất hãy chờ cho đến khi bạn hoàn toàn hoàn thiện thiết kế trang web. Hoặc những thay đổi thiết kế sẽ mất thời gian để hiển thị.

Hoãn việc tải CSS hoặc JS

• Một ý tưởng có thể ngớ ngẩn khác. (Thường được thực hiện bởi người dùng muốn tránh cảnh báo “chặn hiển thị” trong quá trình tải trang.)
• Nó có thể làm trễ CSS/JS quan trọng được sử dụng ở đầu trang của bạn (như cho các trình trượt hoặc hiệu ứng nội dung khác).
• Nếu bạn hoãn việc tải CSS/JS cho các mục quan trọng, trang của bạn có thể có điểm số trang cao hơn nhưng xuất hiện chậm hơn đối với khách truy cập.
• Một số nội dung cần phải chặn hiển thị vì một lý do nào đó. Đó là bởi vì họ kiểm soát nội dung trông như thế nào. Ví dụ…bạn có muốn hình ảnh trình chiếu của bạn được tải TRƯỚC khi trình chiếu? Hoặc bạn có muốn văn bản của bạn được tải trước phông chữ? KHÔNG!…bởi vì nó sẽ trông xấu hoặc không đều đặn!

Caching tất cả bằng Cloudflare

• Nhiều người đã thử, nhiều người đã thất bại.
• Dường như là một mẹo tuyệt vời cho đến khi bạn nhận ra một số chức năng bị hỏng.
• Tôi không đề nghị thử nghiệm điều này trừ khi bạn có một trang web đơn giản (mà có lẽ không cần nó).
• Bạn vẫn muốn thử? Plugin WP Cloudflare Super Page Cache.

Thiết lập Cloudflare không tốt

• Rocket Loader – không bật tính năng này! Nó làm hỏng mọi thứ.
• SSL/TLS ở chế độ Full (strict) – đừng sử dụng tùy chọn này vì nó làm cho quá trình bắt tay SSL của bạn mất thời gian. Chỉ sử dụng tùy chọn mặc định! Nó hoàn toàn tốt và mọi thứ sẽ trông bình thường với biểu tượng khóa.
• HSTS – để nó tắt! Nó sẽ ngăn trình duyệt hiển thị trang web của bạn nếu bạn có vấn đề về SSL.
• Cache toàn bộ trang với quy tắc trang – đã được đề cập ở trên.

Tối ưu hóa tài sản bên ngoài không tốt

Sử dụng CDN khi bạn có doanh nghiệp địa phương

• Hoàn toàn không cần thiết! Không giúp tăng tốc độ trang web!
• PS: Cloudflare có thể được sử dụng mà không cần các chức năng CDN của nó. Bạn có thể sử dụng nó chỉ để DNS.

Sử dụng Google AMP

• Lợi ích chính của AMP trong ý kiến của tôi là tốt hơn trong việc phân phối và SEO thông qua kết quả trên công cụ tìm kiếm của Google.
• Nhưng tôi nghĩ rằng nó chỉ hữu ích cho các trang web loại blog và tin tức.
• AMP không phải là một giải pháp tốt cho tốc độ. Nó làm phức tạp thêm trang web của bạn và thường làm hỏng các chức năng và thiết kế. Tệ hơn cả, nó không giúp tốc độ của bạn mà làm cho trang web (và máy chủ) của bạn phải làm việc chăm chỉ hơn để lưu trữ các tài sản.

Tối ưu hóa bảo mật không tốt

Triển khai bảo mật quá mức

• Lọc tường lửa quá mức – làm chậm việc truy cập trang web.
• Proxy bảo mật (Sucuri) – làm chậm việc truy cập.
• Bảo mật chống tấn công mạnh mẽ quá mức – chặn người dùng hợp pháp.

Kết hợp bảo mật máy chủ với bảo mật Cloudflare

• Có thể chặn người dùng hợp pháp vì tất cả người dùng đến từ Cloudflare đều chia sẻ cùng một IP. Và nếu hacker kích hoạt việc cấm IP, nhiều người dùng hợp pháp sẽ bị cấm!
• Hãy cẩn thận khi sử dụng proxy Cloudflare với bảo mật máy chủ.
• Thường không phải là một vấn đề trừ khi bạn sử dụng máy chủ riêng của mình.
• Để làm rõ: vấn đề thường xảy ra cho người dùng đã đăng nhập, người truy cập công cộng thường không gặp vấn đề gì.

HTTP Strict Transport Security còn được gọi là “HSTS”

• Ý tưởng ngớ ngẩn! Ít ích lợi nhưng dám đây là bạn có bất kỳ vấn đề SSL ngẫu nhiên nào (SSL không được gia hạn hoặc mất sau khi di chuyển), trang web của bạn sẽ không tải.
• Đó là một rủi ro lớn và luôn gây ác mộng cuối cùng.
• Đừng bao giờ bật tính năng này!

Cuối cùng, bài viết kết thúc với một số suy nghĩ và lời khuyên về cách tối ưu hóa tốc độ trang web WordPress một cách hiệu quả:

Bí quyết để tăng tốc trang web WordPress

Đối với tôi, trước đây, điều quan trọng là tìm kiếm vô số chiến thuật và vị trí để tối ưu hóa. Và nó đã hoạt động. Tôi đã có thể giảm từ 4 giây xuống còn 1 giây. Sau đó, từ 1 giây xuống 500ms. Sau đó, từ 500ms xuống 380ms, sau đó từng bước loại bỏ mỗi 10-20ms một cách cẩn thận. Tại điểm này, chỉ là 50ms.

… nhưng đây không phải là cách thế giới thực hoạt động.

• Không ai có thời gian như vậy.
• Không ai muốn tiêu tiền như vậy.

Tối ưu hóa tốc độ cho thế giới thực đòi hỏi trực giác. Bạn phải có khả năng nhìn vào một trang web, ngửi mùi nó và biết ngay lập tức nó cần gì. Điều này giúp bạn không tiêu phí nhiều giờ đồng hồ vào các chiến thuật không có ý nghĩa.

Vấn đề với hầu hết các chiến thuật tối ưu hóa tốc độ và dịch vụ tăng tốc:

• Họ sử dụng một công thức tổng quát không phải lúc nào cũng hoạt động cho mọi trang web.
• Họ thực hiện các thao tác một cách dễ dàng, không phải cách tốt nhất.
• Họ không xem xét luồng làm việc của người dùng và khoảng thời gian nội dung.
• Họ không xem xét loại webhosting (và các hạn chế của nó).
• Họ không xem xét trải nghiệm của người dùng.
• Họ hiếm khi thực hiện các tối ưu hóa thủ công.
• Họ chỉ tập trung vào điểm số trang A+ và thời gian tải tổng cộng… mà không bằng tốc độ thời gian đáp ứng đầu tiên (TTFB) và thời gian vẽ nội dung.

Dù sao đi nữa, tôi hy vọng hướng dẫn này sẽ giúp bạn. Hoặc ít nhất, giúp bạn tìm người có thể quan tâm đến trang web của bạn cũng như bạn. Tối ưu hóa tốc độ là một nghệ thuật tinh tế kết hợp các kỹ năng của nhà phát triển web, quản trị máy chủ, người thiết kế giao diện người dùng, và chủ sở hữu trang web đã từng sở hữu một trang web có lưu lượng truy cập cao trước đây.