10 bước để tăng tốc website ngay lập tức

Tăng tốc website WordPress luôn là vấn đề nan giải cho rất nhiều bạn hiện nay. Như chúng ta đã biết WordPress là hệ thống quản lý nội dung (CMS) hàng đầu và phổ biến nhất trên thế giới. Trên thực tế, nó hiện đang cung cấp cho hơn 42% các trang web trên internet và tiếp tục giành được thị phần hàng năm. Các thương hiệu và tổ chức uy tín như Stanford, The National Archives, Creative Commons, Sony Music, Fortune và thậm chí cả Nhà Trắng sử dụng WordPress để cung cấp năng lượng cho các trang web của họ. Vậy câu hỏi đặt ra là có nên tăng tốc website wordpress không? Cùng anhlinhmkt tìm hiểu nhé.

Tại sao tăng tốc website wordpress lại là quan trọng?

Bởi vì nó sẽ luôn luôn bất lợi cho trải nghiệm và ấn tượng đầu tiên của khách truy cập. Nó đóng một yếu tố quan trọng trong tỷ lệ thoát và chuyển đổi. Và đương nhiên mọi người không có sự kiên nhẫn như trước đây. Nếu họ phải đợi một thời gian dài để một trang tải, rất có thể họ sẽ nhấn nút quay lại và chọn kết quả công cụ tìm kiếm tiếp theo.

Không ai thích một trang web chậm (kể cả Google)

Mặc dù WordPress cực kỳ phổ biến, nhưng việc sử dụng nó cũng có thể đi kèm với chi phí hiệu suất nếu bạn không biết mình đang làm gì. Ban đầu, WordPress chủ yếu là một nền tảng viết blog. Nhưng nó đã phát triển thành nhiều hơn thế, vì nhiều chức năng đã được thêm vào trong những năm qua. Vấn đề bây giờ là với rất nhiều cấu hình và tùy chọn khác nhau, WordPress có thể chạy chậm nếu không được thiết lập hoặc tối ưu hóa chính xác.

Tăng tốc website thậm chí được coi là vô cùng quan trọng?

Giống như WordPress đã phát triển qua nhiều năm, việc đo lường hiệu suất cũng vậy. Mặc dù tổng thời gian tải vẫn còn quan trọng, nhưng nó không phải là một phép đo bạn nên tập trung vào nữa. Google hiện đang sử dụng cái mà họ gọi là Core Web Vitals. Trang web của bạn nhận được điểm số dựa trên sự kết hợp của những thứ như sơn nội dung lớn nhất (LCP), độ trễ đầu vào đầu vào đầu tiên (FID) và thay đổi bố cục tích lũy (CLS). Chính vì thế việc tăng tốc website cực kì quan trọng.

Nói một cách đơn giản, trong khi số lượng mã sẽ luôn quan trọng đối với hiệu suất, bây giờ bạn cũng phải xem xét cách trang web của bạn tải mã. Tốc độ trang di động cũng là một yếu tố xếp hạng. Đó là lý do tại sao Core Web Vitals và cách họ lập chỉ mục SERPs hoàn toàn dựa trên thiết bị di động. Google không quan tâm trang web của bạn tải nhanh như thế nào trên máy tính để bàn.

Kiểm tra tốc độ website như thế nào?

Điều đầu tiên bạn nên làm là kiểm tra tốc độ website WordPress của mình. Điều này sẽ cung cấp cho bạn một điểm chuẩn bạn có thể sử dụng nó làm cơ sở để tiến hành tối ưu nhé. anhlinhmkt khuyên bạn nên sử dụng công cụ PageSpeed Insights miễn phí của Google. Nếu bạn muốn có thêm một chút dữ liệu liên quan đến khả năng truy cập, SEO, v.v., bạn có thể sử dụng công cụ Đo lường web.dev. Cả hai đều được phát triển bởi Google, được cung cấp bởi Lighthouse và sử dụng Core Web Vitals để ghi điểm.

Do bộ nhớ đệm, CDN và các kịch bản của bên thứ ba khác, hãy đảm bảo luôn chạy các bài kiểm tra tăng tốc website của bạn ít nhất ba lần để có được kết quả chính xác. Và bất kể công cụ bạn sử dụng, điều quan trọng là chọn một và gắn bó với nó. Mỗi công cụ đo tốc độ khác nhau và bạn cần một đường cơ sở chính xác để theo dõi các cải tiến hiệu suất.

Nếu bạn cần đo lường các truy vấn và hiệu suất tải cơ sở dữ liệu, Query Monitor và New Relic APM là những giải pháp tuyệt vời. Nếu bạn đang lưu trữ với Kinsta, họ cũng có một công cụ APM miễn phí trong bảng điều khiển MyKinsta của họ.

10 bước để tăng tốc website ngay lập tức

Bài đăng này sẽ bao gồm từng bước chính xác cách mình cấu hình tất cả các trang web WordPress của mình, kết hợp các blog có lưu lượng truy cập cao và các trang web thương mại điện tử. Nó chứa các đề xuất áp dụng cho cả front-end và back-end (bảng điều khiển quản trị WordPress) và tối ưu hóa được thiết kế đặc biệt cho Google Core Web Vitals.

Mình đã dành nhiều thời gian để tối ưu hóa và tăng tốc website WordPress để đảm bảo rằng chúng đang chạy ở hiệu suất tối ưu. Tôi hứa với bạn, bất kể nền tảng hay trình độ chuyên môn của bạn là gì, bạn sẽ tìm thấy một cái gì đó trong bài đăng 10 bước tăng tốc website này rất hữu ích nhé.

1. Hệ thống lưu trữ WordPress

Tác động: Tốc độ front-end và back-end (bảng điều khiển quản trị WordPress).

Một trong những cách dễ nhất và quan trọng nhất để tăng tốc website WordPress là bắt đầu với một nền tảng vững chắc. Và điều đó có nghĩa là bạn cần chọn một máy chủ WordPress nhanh và đáng tin cậy. Thật không may, bước đầu tiên này là nơi có rất nhiều người làm hỏng. Nhiều người đánh giá thấp mức độ ảnh hưởng của một nhà cung cấp dịch vụ lưu trữ đối với hiệu suất của bạn. Làm đúng điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian và sự thất vọng.

Nếu bạn đang ở trên một trang web nhỏ, rất có thể bạn đang ở trên một kế hoạch lưu trữ web chia sẻ giá rẻ hay còn gọi là share. Thuật ngữ “chia sẻ” có nghĩa là trang web của bạn được lưu trữ trên máy chủ cùng với rất nhiều trang web của người khác. Điều này có nghĩa là tất cả các website đang hoạt động trên cùng một nguồn lực.

Khi nói đến lưu trữ, không có cái gọi là “tài nguyên không giới hạn.” 🙅 Đây chỉ đơn giản là một mánh lới quảng cáo tiếp thị.

Tôi chắc chắn rằng bạn thấy các blogger và nhà tiếp thị liên kết mọi lúc quảng cáo các nhà cung cấp dịch vụ lưu trữ giá rẻ như BlueHost hoặc GoDaddy. Xin lỗi vì là người mang tin xấu, nhưng 99% các trang web này được điều hành bởi các nhà tiếp thị liên kết chỉ đơn thuần là cố gắng kiếm tiền nhanh chóng. Chọn một máy chủ giá rẻ là một trong những quyết định tồi tệ nhất bạn có thể thực hiện khi lưu trữ trang web của mình.

Nếu bạn quan tâm về máy chủ có thể xem qua TẠI ĐÂY. Đây là máy chủ mình đang xài. Hoặc nếu cần bạn có thể inbox mình sẽ tư vấn.

2. Thực hiện bộ nhớ đệm để tăng tốc website. Hay còn gọi là cache

Tác động: Tốc độ front-end và back-end (bảng điều khiển quản trị WordPress)

Cache là gì?

Cache là lớp nằm ở giữa máy chủ của bạn. Bộ nhớ cache được xây dựng và lưu trữ trong RAM hoặc đĩa trong yêu cầu ban đầu đó và các yêu cầu tiếp theo nhấn lớp bộ nhớ cache thay vì máy chủ của bạn. Điều này dẫn đến tốc độ nhanh như chớp (nhanh hơn tới 40% trong thử nghiệm của tôi) cho người dùng vì về cơ bản nó bỏ qua giai đoạn xử lý máy chủ. Một lợi ích khác là nó cũng làm giảm tải trên máy chủ của bạn.

Cache hoạt động như thế nào?

Khi người dùng truy cập trang web của bạn lần đầu tiên, máy chủ sẽ xử lý yêu cầu, bao gồm tất cả các truy vấn cơ sở dữ liệu cần thiết để hiển thị trang. Trang sau đó được chuyển đến trình duyệt của người dùng. Thời gian xử lý ban đầu là lý do tại sao điều quan trọng là phải có một nhà cung cấp dịch vụ lưu trữ nhanh.

Nếu bộ nhớ đệm không được thiết lập chính xác, điều này sẽ gây ra thời gian để đầu tiên (TTFB) cao hơn và những gì còn được gọi là “thời gian chờ đợi”. Về Google Core Web Vitals, điều này sẽ tạo ra một cảnh báo để “giảm thời gian phản hồi máy chủ ban đầu”. Cảnh báo kích hoạt nếu TTFB cao hơn 600 ms (nguồn).

Như đã đề cập trước đó, do bộ nhớ đệm, hãy đảm bảo luôn chạy các bài kiểm tra tốc độ của bạn ít nhất ba lần để có được kết quả chính xác. Nếu bộ nhớ cache của trang web của bạn vừa hết hạn, bạn sẽ thấy cảnh báo trên ngay lần đầu tiên bạn chạy thử nghiệm.

Bộ nhớ đệm thường được thực hiện theo hai cách khác nhau:

• Cache máy chủ: Cache máy chủ là những gì tôi khuyên bạn nên vì nó nhanh và dễ dàng. Các nhà cung cấp dịch vụ lưu trữ WordPress đã có bộ nhớ cache cấp máy chủ cho bạn và không nên vội vàng với các plugin hoặc cài đặt quá nhiều thứ. Mọi thứ hoạt động bên ngoài, cho dù bạn có một blog có lưu lượng truy cập cao hay một trang web thương mại điện tử năng động hơn. 

• Plugin cache WordPress: Nếu nhà cung cấp dịch vụ lưu trữ của bạn không có bộ nhớ cache máy chủ, đó là khi bạn cần cài đặt plugin bộ nhớ cache WordPress. Tôi đã thử nghiệm nhiều plugin bộ nhớ đệm trong những năm qua và tôi khuyên bạn nên đi với một trong những điều sau đây:

1. WP Fastest Cache (free)
2. Cache Enabler (free)
3. WP Rocket (premium)

Cải thiện bộ nhớ cache của bạn để tăng tốc website

Một cách dễ dàng để cải thiện bộ nhớ đệm của bạn là tăng thời gian hết hạn bộ nhớ cache trên trang Web WordPress của bạn. Thời gian bộ nhớ cache dài hơn dẫn đến hiệu suất trang web được cải thiện và tỷ lệ HIT bộ nhớ cache tốt hơn. Nó cũng có thể sửa cảnh báo từ Google để “phục vụ tài sản tĩnh với chính sách bộ nhớ cache hiệu quả”.

3. Sử dụng chủ đề WordPress nhẹ. Cái này hay gọi là Theme nhé

Chủ đề WordPress có thể tạo hoặc phá vỡ trang web của bạn dẫn đến việc tăng tốc website khá là khó. Có rất nhiều chủ đề cồng kềnh ngoài kia có thể mang trang web của bạn thu thập dữ liệu. Ngay cả với lưu trữ và bộ nhớ đệm WordPress nhanh được triển khai, số lượng mã và yêu cầu vẫn quan trọng, đặc biệt là khi nói đến Google Core Web Vitals.

Khi bạn đang tìm kiếm một chủ đề WordPress, bạn cũng muốn chắc chắn rằng bạn đang mua từ một công ty có uy tín với các nhà phát triển và hỗ trợ tốt. Tôi đã sử dụng Flatsome cho tất cả các trang web WordPress của mình, bao gồm blog và trang web thương mại điện tử của tôi trong hơn 5 năm qua. Tôi không thể hạnh phúc hơn và không thể giới thiệu nó đủ! nhưng Flatsome nhẹ và vẫn bao gồm vô số chức năng mà tôi cần.

4. CDN giúp bạn tăng tốc website

Tác động: Tốc độ front-end.

Cho dù nhà cung cấp dịch vụ lưu trữ WordPress của bạn có nhanh như thế nào, bạn không bao giờ có thể đánh bại vấn đề độ trễ mạng. Đó là toán học cơ bản. Dữ liệu của bạn được lưu trữ vật lý trên máy chủ trong trung tâm dữ liệu và mọi thứ trở nên chậm hơn đối với người dùng khi họ càng ở xa vì nó phải tải xuống trang web của bạn trên một khoảng cách lớn.

Một mạng phân phối nội dung (CDN) khắc phục điều đó bằng cách lưu trữ các bản sao tài sản của bạn (hình ảnh, CSS, JS và thậm chí HTML) trên các máy chủ cạnh trên toàn cầu. Nó cũng lưu trữ chúng. Khi khách truy cập tra cứu trang web của bạn, nội dung được phân phối từ máy chủ cạnh địa lý gần nhất (bộ nhớ cache) thay vì máy chủ web của bạn. Nếu bạn muốn tìm hiểu thêm về cách CDN hoạt động có thể nghiên cứu thêm trên mạng nhé.

Có hai nhà cung cấp CDN mà tôi đề xuất, mỗi nhà cung cấp có cách tiếp cận hơi khác nhau mà bạn có thể tham khảo:

• Cloudflare với APO
• KeyCDN

5. Tối ưu hóa hình ảnh để tăng tốc website

Tác động: Tốc độ front-end.

Tối ưu hóa kích thước hình ảnh và phân phối của bạn là điều bạn không thể bỏ qua. Theo The HTTP Archive, tính đến tháng 2 năm 2021, hình ảnh chiếm trung bình 48% tổng trọng lượng trang của một trang web trên thiết bị di động. Đó là khá gần một nửa số tài sản mà trình duyệt phải tải xuống và cung cấp cho người dùng.

Nén hình ảnh để tăng tốc website

Nén là một cách để làm cho các tệp hình ảnh của bạn nhỏ hơn bằng cách loại bỏ dữ liệu. Đó là một trong những cách dễ nhất để giảm tổng kích thước trang web của bạn. Tải hình ảnh độ phân giải đầy đủ lên các trang web, đặc biệt là những hình ảnh trên các trang web được chia sẻ trên mạng, sẽ ngay lập tức làm chậm thời gian tải trang web của bạn.

Tôi nén tất cả các hình ảnh của mình bằng cách sử dụng photoshop trước khi đưa lên. Điều này đảm bảo kích thước trọng lượng trang nhỏ và hình ảnh tải nhanh mà vẫn trông đẹp. Mỗi hình ảnh tôi thêm vào một trang hoặc bài đăng đều có kích thước nhỏ. Lời khuyên của tôi là luôn giữ hình ảnh của bạn dưới 100 KB.

Tôi cũng tận dụng .webp ddeer định dạng hình ảnh. Đây là một định dạng hình ảnh được phát triển bởi Google nhỏ hơn nhiều so với PNG hoặc JPG. Bây giờ nó được hỗ trợ bởi tất cả các trình duyệt hiện đại. Tôi sử dụng hình ảnh WebP trên tất cả các trang web của tôi. Plugin ShortPixel cũng có thể làm điều này cho bạn một cách tự động.

Lười tải hình ảnh để tăng tốc website

Ngoài nén hình ảnh, bạn cũng có thể tối ưu hóa việc phân phối hình ảnh của mình bằng cách sử dụng tải lười biếng. Đây là phương pháp trì hoãn hoặc trì hoãn việc tải hình ảnh cho đến khi người dùng cuộn xuống trang (hình ảnh nhập vào trong viewport).

Nếu bạn lười tải hình ảnh, nó sẽ chỉ tải hình ảnh về phía đầu trang mà người dùng nhìn thấy trong trình duyệt của họ. Số lượng hình ảnh thay đổi dựa trên loại trình duyệt, phương pháp tải lười biếng, kích thước của viewport, v.v. Nhưng bất kể, ý tưởng là nó thường cắt giảm 85% + yêu cầu hình ảnh. Google thực sự khuyên bạn nên tải lười biếng. Nếu bạn không thực hiện nó, bạn sẽ thấy cảnh báo sau đây để “trì hoãn hình ảnh ngoài màn hình”.

Kích thước hình ảnh để tăng tốc website

Nghe có vẻ tương đối đơn giản, nhưng một cách dễ dàng để cải thiện CLS của bạn và giảm sự thay đổi bố cục là xác nhận rằng tất cả các hình ảnh của bạn đều có bộ thuộc tính chiều rộng và chiều cao. Nếu một hình ảnh bị thiếu các thuộc tính này, rất có thể bạn sẽ thấy cảnh báo “các yếu tố hình ảnh không có chiều rộng và chiều cao rõ ràng” từ Google.

6. Thực hiện font chữ và icon cho web đúng cách

Theo The HTTP Archive, tính đến tháng 2 năm 2021, phông chữ chiếm trung bình 6% tổng trọng lượng trang của một trang web trên thiết bị di động. Mặc dù điều đó có vẻ nhỏ, nhưng nó vẫn ảnh hưởng đến cách tải trang web của bạn. Có những lĩnh vực liên quan đến hiệu suất mà bạn không thể sửa chữa trên trang web của mình, vì vậy bạn nên giành ưu tiên ở những nơi bạn có thể. Dưới đây là một vài tùy chọn tôi khuyên bạn nên cho các phông chữ hoạt động tốt hơn.

Tùy chọn 1: Ngăn xếp phông chữ hệ thống (những gì tôi làm)

Tôi sẽ bắt đầu với tùy chọn yêu thích và nhanh nhất mà bạn có cho phông chữ web. Nó đang chuyển sang cái mà họ gọi là ngăn xếp phông chữ hệ thống.

Các thương hiệu tên tuổi lớn như GitHub, Bootstrap, Medium, Ghost và thậm chí cả bảng điều khiển quản trị WordPress của bạn đều sử dụng những gì họ gọi là ngăn xếp phông chữ hệ thống. Điều này có nghĩa là họ sử dụng phông chữ trên máy tính của bạn. Một vài năm trước, điều này sẽ không được tốt lắm. Nhưng với các hệ điều hành mới hơn ngày nay, tất cả chúng đều có phông chữ đẹp hơn được cài đặt sẵn.

Khi sử dụng ngăn xếp phông chữ hệ thống, không cần phải tải bất kỳ phông chữ nào trên trang! Điều đó khá lớn! Nó cũng loại bỏ bất kỳ FOUT (đèn flash của văn bản không tự do) hoặc FOIT (đèn flash của văn bản vô hình) xấu xí. Trang web của chúng tôi sử dụng phông chữ hệ thống và tôi cá là bạn thậm chí không nhận thấy. Đúng vậy; trang web này không tải một phông chữ duy nhất.

Tùy chọn 2: Tự lưu trữ Phông chữ Google (hoặc phông chữ tùy chỉnh)

Google Fonts miễn phí, rất phổ biến và được sử dụng bởi hơn 42 triệu trang web trên toàn thế giới Họ đã có một lợi thế về hiệu suất và đó là phông chữ có thể đã được lưu trữ từ CDN của Google trong trình duyệt của người dùng.

Giải pháp là tự lưu trữ Google Fonts trên máy chủ hoặc CDN của bạn. Điều này cũng loại bỏ tra cứu DNS cho Google và tiêu đề HTTP bộ nhớ đệm của máy chủ của bạn sẽ tự động được áp dụng.

Tinh chỉnh biểu tượng phông chữ của bạn

Font Awesome là tuyệt vời, và hàng triệu trang web sử dụng nó trên web để hiển thị các biểu tượng bạn nhìn thấy hàng ngày. Tuy nhiên, theo mặc định, nó tải toàn bộ thư viện biểu tượng cho trang web của bạn.

7. Tối ưu hóa JavaScript để tăng tốc website

Theo The HTTP Archive,tính đến năm 2021, JavaScript chiếm trung bình 22% tổng trọng lượng trang của một trang web trên thiết bị di động. Sau hình ảnh và video, JavaScript là nguồn trọng lượng trang lớn thứ ba. Dưới đây tôi sẽ đi sâu vào một vài cách khác nhau mà bạn có thể tối ưu hóa JavaScript trên trang web WordPress của mình.

Kiểm tra plugin của bạn

Phần lớn JavaScript đến từ đâu? Hai địa điểm: chủ đề và plugin. Vì vậy, khuyến nghị đầu tiên là thực hiện kiểm tra các plugin của bạn và loại bỏ những plugin bạn có thể sống mà không có.

Như bạn có thể thấy, có một số plugin tôi không cần, hoặc có các lựa chọn thay thế tốt hơn. Bằng cách loại bỏ những điều này, tôi đã giảm đáng kể các yêu cầu trên trang web của mình và tổng kích thước trang. Tôi khuyên bạn nên thực hiện kiểm tra và đánh giá plugin trên trang web của bạn ngay lập tức! Ở đây tôi dùng WP Extra có thể thay thế được nhiều plugin khác nhau mà tôi cần.

Google Analytics

Trớ trêu thay, Google Analytics có bộ vấn đề riêng với hiệu suất. Đầu tiên, bạn có yêu cầu DNS của bên thứ ba ngay lập tức. Thứ hai, và vấn đề quan trọng hơn là với thời gian hết hạn bộ nhớ cache. Google đặt hết hạn bộ nhớ cache rất ngắn và điều này có thể khiến cảnh báo hiển thị.

Một cách dễ dàng để giải quyết những vấn đề này là lưu trữ Google Analytics cục bộ trên máy chủ hoặc CDN của bạn. Có một vài lợi thế cho điều này:

1. Bạn tận dụng lợi thế của một kết nối HTTP / 3 duy nhất.
2. Kịch bản Google Analytics của bạn nhận được tiêu đề bộ nhớ đệm từ máy chủ của bạn và hoặc CDN.
3. Có một yêu cầu ít ngay lập tức của bên thứ ba.

Defer JavaScript

Do tính chất của cách JavaScript hoạt động, rất có thể bạn sẽ thấy cảnh báo “Loại bỏ tài nguyên chặn kết xuất” từ Google. Điều này có nghĩa là các tệp JavaScript của bạn làm chậm (chặn) bản sơn đầu tiên của trang WordPress khi tải.

Một cách dễ dàng để tăng tốc độ sơn của một trang là trì hoãn tất cả các JavaScript không quan trọng. Điều này có nghĩa là các tập lệnh sẽ tải sau khi phần còn lại của trang đã tải. Về cơ bản, bạn đang đẩy chúng xuống đáy thác nước. Điều này được thực hiện bằng cách thêm một thuộc tính defer trên mỗi tệp JavaScript.

Kết hợp JavaScript

Một cách khác để tối ưu hóa JavaScript của bạn, đặc biệt là trên các trang web lớn hơn, là kết hợp các tệp JavaScript của bạn. Đây là một kỹ thuật bị loại bỏ kể từ HTTP /2 (nay là HTTP/3/QUIC); tuy nhiên, nó vẫn có thể giúp cải thiện điểm số của bạn với Core Web Vitals. Chủ yếu liên quan đến cảnh báo “loại bỏ các tài nguyên chặn kết xuất”. Để kết hợp các tệp JavaScript, tôi khuyên bạn nên sử dụng plugin Autoptomize miễn phí.

Minify JavaScript

Minification là quá trình loại bỏ tất cả các khoảng trắng trong mã của bạn. Rất nhiều nhà phát triển đã khai thác kịch bản của họ trước. Do đó, đây không phải là một ưu tiên lớn vì 90% JavaScript của bạn có lẽ đã được khai thác..min.jsfile.min.js Đối với điều này, tôi khuyên bạn nên plugin Autoptimize miễn phí. Hoặc, nếu bạn đang sử dụng Cloudflare, bạn có thể dễ dàng bật minification cho JavaScript dưới tab “Tối ưu hóa tốc độ →”.

Trì hoãn JavaScript

Trong khi trì hoãn JavaScript đẩy kịch bản xuống cuối tải trang, bạn có thể trì hoãn JavaScript dựa trên tương tác của người dùng. Đây có thể là một cách tuyệt vời để tăng tốc độ sơn của trang cho Core Web Vitals khi có thứ gì đó không cần thiết ngay lập tức. Đặc biệt là các tập lệnh của bên thứ ba nặng nề như Google Adsense, Google Analytics, pixel chuyển đổi (FB, Google Ads),…

Loại bỏ JavaScript không sử dụng

Tiếp theo, bạn có cảnh báo từ Google để “loại bỏ JavaScript không sử dụng”. Điều này có nghĩa là không phải tất cả các mã từ tệp JavaScript được tải (từ chủ đề hoặc plugin WordPress của bạn) đang được sử dụng trên trang bạn đang thử nghiệm.

8. Tối ưu hóa CSS để tăng tốc website

Theo The HTTP Archive, tính đến năm 2021, CSS chiếm trung bình 4% tổng trọng lượng trang của một trang web trên thiết bị di động. Sau hình ảnh, video và JavaScript, CSS là nguồn trọng lượng trang lớn thứ tư. Dưới đây tôi sẽ đi sâu vào một vài cách khác nhau bạn có thể tối ưu hóa CSS trên trang web WordPress của mình.

Giảm CSS tùy chỉnh

Điều đầu tiên bạn nên làm là giảm bất kỳ CSS tùy chỉnh nào trên trang web WordPress của bạn. Điều này có nghĩa là theo thời gian, bạn có thể đã tích lũy thêm CSS mà bạn không cần. Hoặc bạn đã thay đổi chủ đề hoặc plugin và CSS thậm chí không còn áp dụng nữa. Bây giờ là lúc để quay trở lại và dọn dẹp nó.

Chỉ tải CSS tùy chỉnh khi cần

Có những lúc bạn có thể cần thêm một số CSS tùy chỉnh vào trang web của mình, nhưng nó không nhất thiết phải tải ở khắp mọi nơi. Nếu bạn thả nó vào WordPress Customizer, điều này là xấu! Bởi vì nó sẽ tải nó trên toàn bộ trang web của bạn.

Kết hợp CSS

Giống như JavaScript, một cách khác để tối ưu hóa CSS của bạn, đặc biệt là trên các trang web lớn hơn, là kết hợp các tệp CSS của bạn. Đây là một kỹ thuật bị loại bỏ kể từ HTTP /2 (nay là HTTP/3/QUIC); tuy nhiên, nó vẫn có thể giúp cải thiện điểm số của bạn với Core Web Vitals. Chủ yếu liên quan đến cảnh báo “loại bỏ các tài nguyên chặn kết xuất”.

Để kết hợp các tệp CSS, tôi khuyên bạn nên sử dụng plugin Autoptomize miễn phí. Tuy nhiên, tôi không đề nghị chỉ mù quáng làm điều này cho mọi trang web. Bạn nên kiểm tra xem tệp nào hoạt động tốt hơn cho bạn, các tệp không kết hợp hoặc các tệp kết hợp. Hãy nhớ rằng, bạn cũng có thể tải trước bảng phong cách CSS nếu cần.

Minify CSS

Giống như JavaScript, rất nhiều nhà phát triển đã minify biểu đồ phong cách của họ trước. Do đó, đây không phải là một ưu tiên lớn vì 90% CSS của bạn có lẽ đã được khai thác..min.cssfile.min.css

Với điều đó đang được nói, bạn vẫn có thể min hóa CSS của bạn. Đối với điều này, tôi khuyên bạn nên plugin Autoptimize miễn phí. Hoặc, nếu bạn đang sử dụng Cloudflare, bạn có thể dễ dàng bật minification cho CSS dưới tab “Tối ưu hóa tốc độ →”.

Loại bỏ CSS không sử dụng

Giống như JavaScript, bạn có thể có cảnh báo từ Google để “loại bỏ CSS không sử dụng”. Điều này có nghĩa là không phải tất cả các mã từ tệp CSS được tải (từ chủ đề hoặc plugin WordPress của bạn) đang được sử dụng trên trang bạn đang thử nghiệm.

Có một vài cách để giải quyết vấn đề này. Tuy nhiên, tôi không thể diễn tả điều này quan trọng như thế nào. Nếu bạn làm theo tất cả các lời khuyên ở trên liên quan đến chủ đề WordPress nhẹ và bỏ các công cụ xây dựng trang cho một giải pháp thay thế như GenerateBlocks, CSS không sử dụng sẽ không phải là một vấn đề lớn.

Google trước tiên khuyên bạn nên giảm hoặc chuyển đổi số lượng plugin WordPress đang tải CSS không sử dụng. Hãy nhớ rằng, số lượng plugin không quan trọng bằng cách chúng được mã hóa tốt như thế nào.

9. Tối ưu hóa HTML để tăng tốc website

Theo The HTTP Archive,tính đến năm 2021, HTML chiếm trung bình 1,5% tổng trọng lượng trang của một trang web trên thiết bị di động. Mặc dù đây không phải là một số tiền lớn, nhưng nó vẫn rất quan trọng. Dưới đây tôi sẽ đi sâu vào một vài cách khác nhau mà bạn có thể tối ưu hóa HTML trên trang web WordPress của mình.

Sử dụng HTML từ cạnh Cloudflare

Tôi đã đề cập đến điều này ở trên; Tôi khuyên bạn nên sử dụng Cloudflare APO. Với CDN truyền thống, HTML của bạn được phục vụ từ máy chủ nguồn gốc trong khi tài sản của bạn được phục vụ từ CDN. Với Cloudflare APO, tài sản và HTML của bạn được phục vụ từ CDN. Hãy nghĩ về nó giống như chuyển đổi trang web WordPress của bạn thành một trang web HTML tĩnh. Điều này dẫn đến tốc độ cực nhanh và TTFB thấp.

Minify HTML

Giống như JavaScript và CSS, bạn có thể khai thác HTML của mình. Đối với điều này, tôi khuyên bạn nên plugin Autoptimize miễn phí. Hoặc, nếu bạn đang sử dụng Cloudflare, bạn có thể dễ dàng bật minification cho HTML dưới tab “Tối ưu hóa tốc độ →”.

10. Mẹo về tài nguyên để tăng tốc website

Tôi đã tối ưu hóa hàng ngàn trăm web WordPress trong những năm qua, vì vậy tôi nghĩ sẽ rất hữu ích khi bao gồm một phần khác mà tối ưu hóa linh tinh, mẹo và tài nguyên. Nhiều trong số này là những điều tôi thấy hàng ngày làm việc với khách hàng.

Không sử dụng Google AMP.

Trước hết, Google AMP khiến bạn khó khắc phục sự cố hơn, vì theo một số cách, đó là một silo từ trang web chính của bạn. Thứ hai, Google AMP cũng rất khó để di chuyển ra khỏi, vì họ cố gắng khóa bạn trong hệ sinh thái của họ. Chỉ cần dành thêm thời gian đó và tập trung vào việc làm cho trang web đáp ứng của bạn nhanh chóng cho người dùng di động và máy tính để bàn. Nó sẽ được đền đáp trong thời gian dài. Kể từ năm 2021, Google không còn ưu đãi cho những người sử dụng AMP.

Google Maps

Hãy cẩn thận với Google Maps và chỉ cần thả nó vào chân trang web của bạn. Nó là khủng khiếp cho hiệu suất do kích thước chuyển lớn của nó. Tôi đã thấy một bản đồ tạo ra tới 26 yêu cầu HTTP (đó không phải là lỗi đánh máy). Tôi khuyên bạn nên  thay thế nó bằng một hình ảnh được thiết kế tốt bằng CTA và một liên kết bên ngoài đến Google Maps.

Thanh trượt

Bỏ thanh trượt của bạn và thay vào đó sử dụng tiêu đề tĩnh. Thanh trượt gây ra sự thay đổi bố cục khủng khiếp (CLS) cho Core Web Vitals, đặc biệt là trên thiết bị di động. Chúng cũng ảnh hưởng tiêu cực đến việc chuyển đổi của bạn.

Lên trên

Những điều nhỏ nhặt quan trọng. Ví dụ: tôi quyết định tắt nút “cuộn lên trên”. Điều này có nghĩa là một tải tệp JavaScript ít hơn. Tôi nhận ra là một người dùng; Tôi không bao giờ nhấp vào những thứ này.

Kiểm tra mã

Sử dụng Yellow Labs Tool và Waterfaller để kiểm tra mã trang web của bạn. Đây có thể là một cái nhìn thay thế tuyệt vời về mọi thứ để tối ưu hóa trên trang web của bạn, khác với Core Web Vitals hoặc GTmetrix.

Gravatars

Tải Gravatars của bạn từ CDN của bạn và lười tải chúng.

ReCAPTCHA

ReCAPTCHA của Google là một kẻ giết người hiệu suất. Tôi đã thấy nó giảm điểm số di động hơn 30 điểm một mình. Điều quan trọng là không sử dụng nó trên toàn trang web. Nhiều nhất, hãy chắc chắn rằng điều này chỉ đang tải trên trang liên hệ của bạn. Tuy nhiên, hầu hết các plugin biểu mẫu liên hệ đều có các biện pháp chống thư rác và honeypot đã được tích hợp sẵn. Nếu không, bạn có thể sử dụng một plugin miễn phí như WP Armour. Do đó, tôi khuyên bạn không nên sử dụng reCAPTCHA.

Rocket Loader.

Nếu bạn đang sử dụng Cloudflare, hãy tắt Rocket Loader. Tính năng này được cho là giúp tăng tốc các trang web di động, nhưng tất cả những gì tôi thấy là làm chậm chúng và gây ra vấn đề. Tắt nó cũng sẽ loại bỏ yêu cầu trên trang web của bạn ().rocket-loader.min.js

Địa chỉ Email Obfuscation

Nếu bạn đang sử dụng Cloudflare, hãy tắt Địa chỉ Email Obfuscation. Đầu tiên, bạn không nên đặt địa chỉ email của mình ở bất cứ đâu trong tầm nhìn rõ ràng. Nó chỉ yêu cầu spam. Các hình thức liên lạc tồn tại vì một lý do. Thứ hai, tắt tính năng này cũng sẽ loại bỏ yêu cầu trên trang web của bạn ().email-decode.min.js

Lời kết:

Vài tháng trước, tôi nói rằng điểm số của PageSpeed không quan trọng để tăng tốc website. Và đó là sự thật lúc đó. Tuy nhiên, thời thế đã thay đổi. Với việc phát hành Google Core Web Vitals và thực tế là nó bây giờ là một yếu tố xếp hạng, Tăng tốc website và điểm số do vấn đề ở một mức độ nào đó. Bạn phải thoát khỏi suy nghĩ về tổng thời gian tải và chuyển trọng tâm của bạn sang cách trang của bạn đang tải.

Tin tốt là điểm số thường tương quan tốt hơn rất nhiều bây giờ với tổng thời gian tải so với trước đây. Khi bạn nhận được điểm số cao hơn, bạn hy vọng sẽ đạt được thời gian tải nhanh hơn. Và hãy nhớ rằng, chúng ta luôn nói về điện thoại di động những ngày này vì đó là những gì Google đang sử dụng cho Core Web Vitals.