Plugin WordPress tốc độ trang Google
|
Chà, trong bài đăng này, tôi sẽ chỉ cho bạn các bước chính xác mà Tribe SEO đã thực hiện để chuyển từ điểm số Google PageSpeed trên thiết bị di động là 37% lên mức hoàn hảo 100%. Show
Vì vậy, nếu bạn muốn xếp hạng cao hơn trên Google, cung cấp trải nghiệm người dùng tuyệt vời cho khách truy cập của bạn và vượt qua bài kiểm tra Thông tin chi tiết về tốc độ trang của Google, thì bạn đang ở đúng nơi Tôi sẽ chia nhỏ tất cả những trở ngại đã vượt qua và thành năm cột mốc quan trọng giúp chúng tôi đạt 100% điểm Google Page Speed trên thiết bị di động
Bây giờ, trước khi chúng tôi nhảy vào, một chút từ chối trách nhiệm. Kể từ khi xuất bản bài đăng này, trang chủ Tribe SEO đạt điểm số 100% trên Google PageSpeed trên thiết bị di động trong khoảng một nửa thời gian. Điều đó khá điển hình, vì bạn sẽ thường thấy một số biến thể khi chạy kiểm tra tốc độ trang Được rồi, vậy chúng ta hãy nhảy vào nó Cột mốc số 1. Đảm bảo Code sạchCho dù bạn có nhận ra hay không, các trang web của bạn được tạo thành từ một loạt các tập lệnh ảnh hưởng đến tốc độ trang của trang web của bạn Đối với các trang web WordPress đơn giản nhất, các tập lệnh PHP và MySQL được chạy bất cứ khi nào người dùng yêu cầu một trang web từ máy chủ  Tuy nhiên, một trang web WordPress điển hình sẽ sử dụng một chủ đề, nhiều plugin và đôi khi là trình tạo trang. Điều này dẫn đến nhiều tập lệnh hơn được xử lý – cả phía máy chủ như PHP và MySQL và phía trình duyệt, như JavaScript và CSS Nhưng đây là điều. Nhiều tập lệnh bổ sung này không cần thiết trong cách bạn muốn các trang của mình trông và hoạt động. Điều này dẫn đến mã cồng kềnh và tốc độ trang chậm hơn Để giúp minh họa điều này, đây là một số thống kê được cung cấp bởi Oxygen4fun Nếu xem xét cài đặt mặc định cho ba trình tạo trang phổ biến, chúng ta có thể thấy kích thước tệp JavaScript và CSS kết hợp cho Brizy Pro, Divi Builder và Elementor Pro lần lượt là 1624 KB, 1243 KB và 966 KB Vì vậy, trong ba phần mềm, Elementor Pro có kích thước tệp nhỏ nhất, vì vậy mã gọn gàng nhất Nhưng nó không có nghĩa là gọn gàng nhất trong tất cả các trình tạo trang vì WP Bakery, Beaver Builder và Oxygen Builder có kích thước tệp nhỏ hơn lần lượt là 494 KB, 59 KB và 34 KB Rõ ràng là Oxygen Builder có mã CSS và JavaScript tinh gọn nhất. Nó chiếm khoảng 4% tổng kích thước khi so sánh với Elementor Pro và 2% khi so sánh với Brizy Pro Đó là bởi vì Oxygen Builder được xây dựng dựa trên tiền đề chỉ tải những gì cần thiết và khi cần thiết Oxygen Builder cũng tạo mã HTML rất rõ ràng. Các trình tạo khác tạo số lượng lớn các div lồng nhau cho các thành phần nội dung đơn giản như tiêu đề H1, điều này làm tăng thêm mã. Ngược lại, Oxygen không tạo ra các div không cần thiết Trên hết, Oxygen Builder đóng vai trò vừa là chủ đề vừa là trình tạo trang, do đó, nó tạo ra mã rất gọn gàng và có thể được mô tả chính xác hơn là trình tạo trang web Do mã gọn gàng và cộng đồng Facebook hỗ trợ, Tribe SEO đã chọn Oxygen Builder để giúp phát triển trang web mới của chúng tôi Chúng tôi cũng cẩn thận trong việc lựa chọn các plugin không bị phình to. Ví dụ: WP Fluent Forms có kích thước tệp rất nhỏ Cột mốc số 2. Cài đặt Plugin tốc độ trangSau khi thử một số plugin tăng tốc độ trang WordPress, tôi đã quyết định chọn WP Rocket vì nó không chỉ tạo ra điểm số tốc độ trang tốt nhất mà còn dễ sử dụng và có khả năng tương thích tuyệt vời với thiết lập trang web của chúng tôi Ngay lập tức, nó cung cấp các tính năng tuyệt vời như bộ nhớ đệm của trang và trình duyệt, cũng như nén GZIP, v.v. Tuy nhiên, chính tính năng “Tối ưu hóa tệp” của WP Rocket đã tạo ra tác động đáng kể nhất Nhưng trước tiên, hãy xem lại trang chủ của Tribe SEO hoạt động như thế nào khi không cài đặt WP Rocket Điểm số trên thiết bị di động trên Google Page Speed của nó là 37%. Google đã đánh dấu “hình tam giác màu đỏ” cho Nội dung vẽ lớn nhất, Thời gian tương tác và Tổng thời gian chặn. Vì vậy, tôi biết những lĩnh vực này cần cải thiện
Khi tôi nhấp để đọc thêm về cách xóa JavaScript không sử dụng, Google đã đánh dấu ba tệp JavaScript cần chú ý
Tiêu điểm đã được sử dụng cho chín video, tất cả đều chứa hình ảnh ngoài màn hình dưới dạng hình thu nhỏ của video Vì vậy, sửa chữa là gì? Cách khắc phục là trì hoãn JavaScript của ba tệp Điều này rất dễ thực hiện trong WP Rocket, nhưng nó đòi hỏi một chút nỗ lực của tôi Vì vậy, đây là những gì tôi đã làm Trong WP Rocket, tôi duyệt đến tab “Tối ưu hóa tệp” rồi cuộn xuống phần JavaScript. Tôi đã bật tính năng “Trì hoãn tải JavaScript”, nhưng điều kỳ diệu thực sự xảy ra bằng cách bật tính năng “trì hoãn thực thi JavaScript” WP Rocket thêm một số tệp JavaScript mặc định và cũng cho phép bạn thêm các tập lệnh tùy chỉnh của riêng mình. Bạn có thể thấy tôi đã thêm Chatra, Convertbox và Spotlight, trong số những thứ khác, vào danh sách
Chà, nó đã làm được nhiều hơn là chỉ trì hoãn JavaScript. Nó đã tăng điểm trang chủ Tribe SEO từ 37% điểm Google PageSpeed trên thiết bị di động lên 97%. Tốt nhất vẫn là cấu hình WP Rocket chỉ mất khoảng năm phút để thiết lập
Cột mốc số 3. Nâng cấp máy chủ webVào tháng 12 năm 2020, chúng tôi đã ra mắt trang web mới được xây dựng bằng Oxygen trên máy chủ web Kinsta. Kinsta được biết đến là một trong những giải pháp lưu trữ WordPress chuyên dụng nhanh chóng và nhìn chung, tôi thấy sự hỗ trợ và trải nghiệm rất tốt Tuy nhiên, vài tháng sau, Cloudways, một công ty lưu trữ web nổi tiếng khác, đã tiếp cận tôi về việc tổ chức hội thảo trên web về Trải nghiệm trên Trang Chúng tôi đã đồng ý về hội thảo trên web và chúng tôi cũng đồng ý rằng tôi sẽ kiểm tra hiệu suất tốc độ trang của trang web của chúng tôi trên máy chủ của họ Lúc đầu, có vẻ như hiệu suất thấp hơn so với những gì chúng tôi trải nghiệm với Kinsta. Điểm Google PageSpeed trên thiết bị di động của chúng tôi đã giảm từ 97% xuống 94% Nhưng có gì đó không ổn. Màu nội dung lớn nhất và Thời gian tương tác được cải thiện, nhưng Thay đổi bố cục tích lũy đã tăng từ 0 lên 0. 781. Điều này thật lạ vì không có CSS hay HTML nào thay đổi Vì vậy, sau một hồi thao tác, tôi quay lại phần “Tối ưu hóa tệp” của WP Rocket và tôi đã thử nghiệm bằng cách tắt “Tối ưu hóa phân phối CSS” Sau đó, nhanh chóng xóa bộ nhớ cache, sự cố CLS đã được khắc phục và điểm số tốc độ trang trên thiết bị di động trên Google của chúng tôi đã tăng từ 97% với Kinsta lên 99% hài lòng với Cloudways
Nếu bạn đang thắc mắc chúng tôi đã chọn gói nào với Cloudways, thì đó là RAM 2 GB tần số cao của Vultr có giá 26 đô la / tháng, rẻ hơn một chút so với những gì chúng tôi đang trả với Kinsta Bây giờ, để hiểu cách cải thiện từ điểm số 99% trên thiết bị di động lên 100%, tôi đã truy cập trang Máy tính tính điểm của Lighthouse và chơi xung quanh với các mặt số tính điểm của họ Rõ ràng là các số liệu về Màu sắc có nội dung lớn nhất và Thời gian tương tác là những liên kết yếu, vì vậy đó là điều tôi sẽ tập trung vào trong lần thúc đẩy cuối cùng Cột mốc số 4. Cải thiện nội dung lớn nhấtThe Largest Contentful Paint (LCP) là chỉ số tốc độ trang của Google đo lường thời gian cần thiết để phần tử nội dung lớn nhất của trang web tải đầy đủ Bây giờ, chúng tôi đã thấy tiến trình LCP tốt thông qua việc trì hoãn JavaScript và nâng cấp máy chủ web của chúng tôi–nhưng chúng tôi có thể làm gì khác? Vâng, yếu tố LCP cho trang chủ của chúng tôi là một hình ảnh. Đó là một hình ảnh SVG cho “ngọn núi SEO” của chúng tôi Nếu phần tử LCP của bạn là một hình ảnh, đây là một số điều phù hợp với chúng tôi 1. Tải trước hình ảnh LCP của bạnTài nguyên tải trước cho phép bạn tải phông chữ, hình ảnh, JavaScript và CSS ở vị trí cao hơn trong mã nguồn của trang web, để chúng được nhìn thấy ngay lập tức với độ trễ tối thiểu WP Rocket cung cấp chức năng tải trước phông chữ nhưng theo như tôi thấy thì không phải cho hình ảnh Tôi đã cài đặt plugin Code Snippets miễn phí trên trang web của mình và điều này cho phép tôi tạo quy tắc trang chủ tùy chỉnh để tải trước hình ảnh ngọn núi SEO, sử dụng thuộc tính 'link rel=“preload”'
2. Đảm bảo nén phía máy chủĐối với trang chủ Tribe SEO, định dạng hình ảnh của phần tử LCP của chúng tôi đã tốt vì SVG thường có kích thước tệp rất nhỏ cho đồ họa dựa trên vectơ. Kích thước tệp của nó là 13 KB Khi tôi chạy trang chủ của chúng tôi thông qua GTMetrix và nhìn vào sơ đồ thác nước, tôi rất vui khi thấy hình ảnh ngọn núi SEO là tệp đầu tiên được tải. Điều này cho thấy quá trình tải trước hình ảnh đang hoạt động bình thường
Điều này thật lạ vì tính năng nén phía máy chủ của WP Rocket đang hoạt động đối với hình ảnh và văn bản thông thường trên trang web của chúng tôi Tôi đã gửi phiếu yêu cầu hỗ trợ máy chủ lưu trữ web tới Cloudways, họ đã xác nhận rằng tính năng nén SVG không được bật trên máy chủ của họ theo mặc định nhưng họ đã bật tính năng này cho tôi từ lúc đó Kết quả cuối cùng là tệp 13 KB đã giảm xuống chỉ còn 3. 9KB Điều này cũng giúp nén tất cả các hình ảnh SVG khác trên trang web của chúng tôi. Ví dụ: hình ảnh Tìm hiểu SEO nhanh của chúng tôi là 205 KB không nén phía máy chủ và 42. 7 KB với nó 3. Vô hiệu hóa Lazy Loading cho phần tử LCPTải chậm chắc chắn là một điều tốt để bật theo mặc định trong WP Rocket vì nó giúp với nhiều số liệu tốc độ trang Tuy nhiên, lazy loading có làm chậm điểm số Largest Contentful Paint cho hình ảnh của bạn không? Tôi không thể nói chắc chắn, nhưng có đủ lý thuyết về chủ đề này để gợi ý rằng nó có thể. Vì vậy, để có biện pháp tốt, tôi đã vô hiệu hóa SEO núi SVG khỏi bị lười tải trong WP Rocket
Vì vậy, việc tải trước hình ảnh LCP của chúng tôi, đảm bảo tính năng nén phía máy chủ và vô hiệu hóa tải từng phần cho hình ảnh LCP có giúp cải thiện điểm số Bức tranh có nội dung lớn nhất của chúng tôi không? Vâng, nó đã làm Chúng tôi đã cải thiện LCP từ 2. 1 giây đến 1. 8 giây. Và sau khi thử nghiệm, có vẻ như việc tải trước hình ảnh LCP của chúng tôi có ảnh hưởng lớn nhất đến điểm số Paint có nội dung lớn nhất của chúng tôi Điều này không đủ để tăng điểm Google Page Speed trên thiết bị di động của bạn lên 100%, nhưng tôi chắc chắn rằng mình đang tiến gần hơn đến những gì chúng tôi cần Cột mốc số 5. Cải thiện thời gian để tương tácThời gian để tương tác (TTI) không phải là Yếu tố quan trọng của trang web, nhưng nó đóng góp vào điểm số Thông tin chi tiết về tốc độ trang Google tổng thể của bạn. Nó đo thời gian một trang cần để trở nên tương tác đầy đủ Không nên nhầm lẫn với Độ trễ đầu vào đầu tiên (FID), đây là một Core Web Vital. FID cũng đo lường tính tương tác, nhưng nó tập trung vào tương tác đầu tiên của người dùng với một trang, trong khi TTI tập trung vào thời điểm toàn bộ trang web trở nên tương tác hoàn toàn Bây giờ, tôi đã thực hiện một công việc điều tra nhỏ bằng cách sử dụng máy tính điểm Lighthouse và tôi nhận ra rằng tôi cần cải thiện TTI của chúng tôi từ 2. 5 giây đến dưới 2 giây để có cơ hội nhận được 100% điểm tốc độ trang trên thiết bị di động Nhưng làm thế nào tôi có thể làm điều đó? Chà, đã có rất nhiều thử nghiệm và sai sót từ phía tôi Thử nghiệm quan trọng đã trả cổ tức bằng cách tạm thời vô hiệu hóa đầu trang và chân trang của chúng tôi khỏi trang web của chúng tôi
Nhưng đó có phải là đầu trang hoặc chân trang gây ra sự cố không? Tôi đã khôi phục tiêu đề và vẫn giữ nguyên tỷ lệ 100% Khi tôi nhìn lại chân trang, có một hình ảnh SVG khá lớn về một dãy núi và thật thú vị, đó là hình nền duy nhất từ trang chủ Tribe SEO Vì vậy, tôi đã cài đặt lại chân trang nhưng không có hình ảnh và trang duy trì điểm số 100% Tốc độ trang trên Google dành cho thiết bị di động Sau khi tìm hiểu kỹ tài liệu hỗ trợ của WP Rocket, tôi phát hiện ra rằng hình nền cần phải ở định dạng cụ thể để được tải chậm Tôi không phải là nhà phát triển web và tôi đã cố gắng để có được định dạng hình nền chính xác. Vì vậy, để làm cho cuộc sống dễ dàng hơn, tôi chỉ cần thêm nó trở lại dưới dạng hình ảnh tiêu chuẩn và xin chào, WP Rocket đã có thể thực hiện phép thuật tải lười biếng của mình và điểm số tốc độ trang 100% trên thiết bị di động của Tribe SEO được duy trì Nếu bạn tò mò, đây là video hiển thị tất cả các bước được đề cập ở trên Phiên bản tên lửa WP 3. 9 Cập nhậtKể từ lần cuối tôi viết bài đăng trên blog này, Google đã chuyển từ Lighthouse v7 sang v8 để tính điểm Google PageSpeed Insights của bạn. Google thắt chặt các trọng số khiến việc đạt điểm 100% trở nên khó khăn hơn. Nhưng đừng lo, bản thân tôi không thực hiện bất kỳ thay đổi nào, chỉ cần nâng cấp lên WP Rocket v 3. 9 đã khôi phục điểm di động 100% hoàn hảo của tôi VÀ không có bất kỳ hành động nào từ phía tôi. Những cải tiến khá đáng kinh ngạc. Từ biểu đồ bên dưới, bạn có thể thấy LCP được cải thiện 22% và TTI tăng 29%.
kết thúcTôi rất biết ơn về cách Oxygen Builder, WP Rocket và Cloudways đã giúp Tribe SEO đạt được điểm tốc độ trang 100% Tuy nhiên, để kết thúc mọi thứ, đây là hai mẹo tốc độ trang lớn nhất của tôi 1) Chú ý đến việc tối ưu hóa cả tập lệnh phía máy chủ và phía trình duyệt. WP Rocket là một plugin bộ đệm WordPress tuyệt vời để tối ưu hóa JavaScript 2) Luôn tò mò và thử nghiệm với nhiều bài kiểm tra khác nhau để xem điều chỉnh nào có tác động lớn nhất trong việc cải thiện điểm số tốc độ trang của bạn Và bởi vì tất cả các trang web đều khác nhau nên tôi tò mò muốn biết Mẹo tốc độ trang lớn nhất của bạn là gì? Xin vui lòng cho tôi biết trong các ý kiến dưới đây Cập nhật lần cuối vào ngày 10 tháng 3 năm 2022 Chia sẻ trên Giới thiệu về Joe Williams Joe Williams là người đào tạo SEO chính tại Tribe SEO. Anh ấy đang thực hiện sứ mệnh làm cho SEO dễ dàng hơn, thú vị hơn và có lợi nhuận. Bạn có thể tìm thấy anh ấy trên Twitter và LinkedIn Plugin WordPress tốt nhất để tăng tốc độ trang là gì?Plugin bộ đệm WordPress tốt nhất . Tên lửa WP WP Cache nhanh nhất LiteSpeed Cache Tối ưu hóa WP Tổng bộ đệm W3 Bộ đệm siêu tốc WP chim ruồi Tên lửa WP Làm cách nào tôi có thể nhận được 100 Tốc độ trang của Google?Cách đạt được 100% tốc độ trang của Google . Xác định xem bạn có bị tụt hậu không và ở đâu Nén hình ảnh của bạn Thu nhỏ hoặc thu nhỏ mã HTML, CSS và JavaScript Loại bỏ các yếu tố chặn kết xuất Tăng tốc độ di động của bạn Tránh hoặc giảm thiểu chuyển hướng trang Cải thiện thời gian phản hồi của máy chủ Sử dụng mạng phân phối nội dung Làm cách nào để tăng tốc độ trang Google?Đạt được điểm Google PageSpeed Insights cao . Tránh chuyển hướng trang đích sau khi nhấp chuột. . Kích hoạt tính năng nén. . Giảm thiểu CSS, HTML, JavaScript. . Ưu tiên nội dung trong màn hình đầu tiên. . Tăng tốc thời gian phản hồi của máy chủ. . Loại bỏ JavaScript chặn hiển thị. . Tận dụng bộ nhớ đệm trình duyệt. . Tối ưu hóa hình ảnh Tốc độ trang Google tốt là gì?Điểm 90 trở lên được coi là tốt. 50 đến 89 là điểm cần cải thiện và dưới 50 được coi là kém. |
