Google PageSpeed Insights chắc chắn là một công cụ hữu ích cho quản trị viên web, nhà phát triển và chủ sở hữu trang web thuộc tất cả các loại. Tuy nhiên, Tài nhận thấy rằng rất nhiều người dành hàng giờ để ám ảnh về việc tối ưu hóa trang web của họ, để thử và đạt 100/100 điểm trong bài kiểm tra này.
Sự thật là đây không phải là cách Google PageSpeed Insights được sử dụng, cũng không phải là một sự theo đuổi đáng giá. Khi bạn tập trung vào việc triển khai các đề xuất của nền tảng thay vì không tham gia vào số ở đầu trang, bạn sẽ tạo ra nhiều lợi ích hơn cho trang web của mình.
Bài đăng này là một hướng dẫn toàn diện để sử dụng Google PageSpeed Insights để lợi thế tốt nhất của bạn. Tài sẽ đề cập đến cách Google sử dụng điểm số của bạn, cũng như cách kết hợp các đề xuất bạn nhận được.
Bắt đầu nào!
Giới thiệu về Google PageSpeed Insights
Nếu bạn chưa quen thuộc với Google PageSpeed Insights , thì đó là một công cụ được sử dụng để kiểm tra hiệu suất trang web. Bạn có thể nhập bất kỳ URL nào và phân tích nó:
Thông tin chi tiết về Google PageSpeed
Google sau đó cung cấp tổng điểm trong số 100 cho trang web bạn đã kiểm tra, dựa trên một số thực tiễn tốt nhất về tối ưu hóa hiệu suất:
Điểm số Insights của Google PageSpeed
Cùng với kết quả này, bạn cũng sẽ thấy một số đề xuất từ Google về cách cải thiện hiệu suất của bạn (và do đó, điểm số của PageSpeed Insights cũng vậy):
Đề xuất thông tin chi tiết về Google PageSpeed
Kể từ năm 2018, điểm số của PageSpeed Insights được tính toán thông qua Google Lighthouse , mã nguồn mở của Google, công cụ tự động để cải thiện chất lượng chung của các trang web. Nền tảng này có thể đánh giá tất cả các loại yếu tố, bao gồm hiệu suất, khả năng truy cập, ứng dụng web lũy tiến và hơn thế nữa.
Để xem đánh giá toàn diện của Ngọn hải đăng về trang web của bạn, bạn có thể sử dụng công cụ Đo lường của Google :
Google Webmasters Đo công cụ kiểm toán
Ngoài việc thực hiện kiểm toán hiệu suất giống như một lần chạy Google PageSpeed Insights, bạn sẽ nhận được điểm cho khả năng truy cập, thực tiễn tốt nhất và Tối ưu hóa công cụ tìm kiếm (SEO) .
Sự thật về việc chấm điểm 100/100 trong Google PageSpeed Insights
Như Tài đã đề cập ở đầu bài đăng này, Tài thấy nhiều chủ sở hữu và nhà phát triển trang web bị ám ảnh về việc đạt được điểm số PageSpeed Insights hoàn hảo. Thật không may, những người này có xu hướng bỏ qua khía cạnh quan trọng hơn trong kết quả của bài kiểm tra: các khuyến nghị.
Mặc dù bạn chắc chắn nên cố gắng cải thiện thời gian tải trang web của mình càng nhiều càng tốt, nhưng việc nhận được 100/100 trong Google PageSpeed Insights thực sự không quan trọng . Đối với người mới bắt đầu, nó thậm chí không phải là bài kiểm tra tất cả về hiệu suất.
Không giống như PageSpeed Insights, Pingdom Tools cho phép bạn kiểm tra hiệu suất trang web của mình từ nhiều vị trí khác nhau:
Kết quả kiểm tra tốc độ của Công cụ Pingdom
Bạn cũng có thể chạy thử nghiệm trên các nền tảng như GTmetrix (kết hợp điểm số của bạn từ PageSpeed Insights và YSlow ) và WebPageTest . Rất có thể, điểm số của bạn trên các công cụ khác nhau này sẽ không khớp chính xác, điều này cho bạn thấy những con số này có thể tùy ý như thế nào.
Điều thực sự quan trọng là tốc độ thực tế của trang web của bạn . Để đưa nó vào viễn cảnh, Tài đã thấy các trang web có thời gian tải trung bình dưới 500 mili giây (cực kỳ nhanh!) Không có điểm 100/100 trên PageSpeed Insights.
Mục đích thực sự của việc kiểm tra hiệu suất trang web của bạn với Google PageSpeed Insights không phải để đạt được điểm cao. Thay vào đó, đó là tìm các điểm có vấn đề trên trang web của bạn, để bạn có thể tối ưu hóa chúng và giảm cả thời gian tải thực tế và thực tế tình hình load website của bạn.
Cách Google sử dụng thông tin chi tiết về tốc độ trang
Ngoài việc ảnh hưởng đến Trải nghiệm người dùng (UX) của trang web của bạn, hiệu suất cũng đóng một vai trò trong SEO . Cho rằng PageSpeed Insights được điều hành bởi công cụ tìm kiếm lớn nhất và phổ biến nhất thế giới, lý do là điểm số của bạn có thể có ảnh hưởng đến bảng xếp hạng Trang kết quả của Công cụ tìm kiếm (SERP) (ít nhất là trên chính Google).
Thực tế là Google không sử dụng PageSpeed Insights để xác định thứ hạng – loại. Tốc độ trang web là một yếu tố xếp hạng, đơn giản và đơn giản. Điểm kiểm tra hiệu suất của bạn có thể cho bạn một ý tưởng khá tốt về nơi bạn đứng trên mặt trận đó.
Tuy nhiên, Google sẽ xem xét nhiều hơn chỉ là số trong vòng tròn ở đầu kết quả PageSpeed của bạn. Đánh 100/100 sẽ không đảm bảo cho bạn một vị trí hàng đầu trên SERPs.
Như đã nói, bạn vẫn có thể đặt kết quả PageSpeed Insights hoạt động khi cải thiện SEO của mình. Chẳng hạn, kể từ năm 2018, tốc độ trang di động là yếu tố xếp hạng của Google. Bạn sẽ nhận thấy rằng kiểm tra hiệu suất của bạn cung cấp dữ liệu cho cả phiên bản máy tính để bàn và thiết bị di động của trang web của bạn:
Tab di động trong Google PageSpeed Insights
Vì hơn 73 phần trăm người dùng internet di động cho rằng họ đã gặp phải một trang web mất quá nhiều thời gian để tải, thông tin trong tab Google PageSpeed Insights Mobile là vô giá. Sử dụng các đề xuất ở đây để giảm thời gian tải trên điện thoại thông minh và các thiết bị khác sẽ giúp bạn có lợi thế cạnh tranh.
Đề xuất thông tin chi tiết về Google PageSpeed (24 cách để cải thiện hiệu suất)
Tài đã nói rất nhiều về các đề xuất của Google PageSpeed Insights trong bài đăng này. Chúng là phần thịt thực sự của kết quả kiểm tra hiệu suất của bạn và có giá trị hơn nhiều so với điểm thực tế của bạn. Đó là lý do tại sao Tài dành phần còn lại của bài đăng này cho họ.
Tuy nhiên, trước khi Tài đi sâu vào các đề xuất riêng lẻ, bạn sẽ cần hiểu sự khác biệt giữa Dữ liệu thực địa và Dữ liệu phòng thí nghiệm của bạn . Cái trước so sánh trang web của bạn với những người khác trong Báo cáo trải nghiệm người dùng Chrome trong 30 ngày qua.
Ngoài ra còn có hai biểu đồ hiển thị nơi Firstr Contentful Paint trung bình (FCP) và Độ trễ đầu vào (FID) trung bình của bạn
Dữ liệu thực của Google PageSpeed
Trong hình ảnh trên, FCP của trang web của Tài tương đương với 45 phần trăm các trang web trong phân vị thứ 75 và FID của Tài tương đương với 9 phần trăm của phân vị thứ 95.
Lab Data hiển thị dữ liệu cụ thể cho tải trang mô phỏng:
Dữ liệu phòng thí nghiệm của Google PageSpeed Insights
Bạn sẽ nhận thấy rằng Dữ liệu thực địa và Dữ liệu phòng thí nghiệm của Tài không khớp chính xác . Điều đó hoàn toàn bình thường. Các dữ liệu Lab được tạo ra trong điều kiện cố định, trong khi các trường dữ liệu sử dụng tốc độ tải thực tế thu thập theo thời gian.
Khi được xem xét kết hợp, Dữ liệu trường và Dữ liệu phòng thí nghiệm sẽ cho bạn ý tưởng về thời gian tải thực tế của trang web của bạn. Như Tài đã đề cập trước đó, điều này thậm chí còn quan trọng hơn điểm số PageSpeed tổng thể của bạn, vì vậy bạn sẽ muốn chú ý đến những con số này.
Sau khi bạn đã xem xét thông tin này, đã đến lúc bắt đầu cải thiện hiệu suất trang web của bạn với các đề xuất của Google PageSpeed.
1. Loại bỏ tài nguyên chặn kết xuất
Một trong những đề xuất phổ biến từ Google PageSpeed Insights là Loại bỏ tài nguyên chặn hiển thị :
Loại bỏ đề xuất tài nguyên chặn hiển thị
Điều này đề cập đến các tập lệnh JavaScript và CSS đang ngăn trang của bạn tải nhanh. Trình duyệt của khách truy cập phải tải xuống và xử lý các tệp này trước khi nó có thể hiển thị phần còn lại của trang, do đó, có rất nhiều trong số chúng ‘trên màn hình đầu tiên’ có thể ảnh hưởng tiêu cực đến tốc độ trang web của bạn.
- Nếu bạn không có nhiều JavaScript hoặc CSS, bạn có thể nội tuyến chúng để thoát khỏi cảnh báo này. Quá trình này đề cập đến việc kết hợp JavaScript và / hoặc CSS của bạn vào tệp HTML của bạn. Bạn có thể làm điều này với một plugin như Autoptimize . Tuy nhiên, điều này thực sự chỉ có giá trị cho các trang web rất nhỏ. Hầu hết các trang web WordPress có đủ JavaScript mà phương pháp này thực sự có thể làm `bạn chậm lại.
- Tùy chọn khác là trì hoãn JavaScript của bạn . Thuộc tính này tải xuống tệp JavaScript của bạn trong quá trình phân tích cú pháp HTML, nhưng chỉ thực hiện nó sau khi phân tích xong. Ngoài ra, các tập lệnh với thuộc tính này thực hiện theo thứ tự xuất hiện trên trang.
Bạn sẽ tìm thấy một danh sách các tài nguyên bị ảnh hưởng nhiều nhất bởi vấn đề này bên dưới đề xuất trong kết quả PageSpeed của bạn.
2. Tránh xâu chuỗi các yêu cầu quan trọng
Khái niệm xâu chuỗi các yêu cầu quan trọng phải thực hiện với Đường dẫn kết xuất quan trọng (CRP) và cách trình duyệt tải các trang của bạn. Một số yếu tố – chẳng hạn như JavaScript và CSS mà chúng ta đã thảo luận ở trên – phải được tải hoàn toàn trước khi trang của bạn hiển thị.
Là một phần của đề xuất này, Google PageSpeed Insights sẽ hiển thị cho bạn chuỗi yêu cầu trên trang bạn đang phân tích:
Tránh xâu chuỗi các yêu cầu quan trọng
Sơ đồ này sẽ cho bạn thấy một loạt các yêu cầu phụ thuộc phải được thực hiện trước khi trang của bạn hiển thị. Nó cũng sẽ cho bạn biết kích thước của từng tài nguyên. Lý tưởng nhất, bạn muốn giảm thiểu số lượng yêu cầu phụ thuộc, cũng như kích thước của chúng.
Một số phương pháp để thực hiện các mục tiêu này được đề cập trong các khuyến nghị khác được thảo luận trong bài viết này, bao gồm:
- Loại bỏ tài nguyên chặn kết xuất
- Trì hoãn hình ảnh ngoài màn hình
- Giảm thiểu CSS và JavaScript
Điều quan trọng cần lưu ý là không có một số chuỗi yêu cầu quan trọng mà bạn cần phải làm việc. Google PageSpeed Insights không tính kiểm toán này là ‘đã qua’ hoặc ‘không thành công’, không giống như nhiều khuyến nghị khác. Thông tin này chỉ đơn giản là có sẵn để giúp bạn cải thiện thời gian tải.
3. Giữ số lượng yêu cầu thấp và kích thước chuyển nhỏ
Càng nhiều yêu cầu trình duyệt phải thực hiện để tải các trang của bạn và tài nguyên mà máy chủ của bạn trả lại càng lớn, trang web của bạn mất thời gian tải càng lâu. Do đó, điều hợp lý là Google sẽ khuyên bạn giảm thiểu số lượng yêu cầu bắt buộc và giảm quy mô tài nguyên của bạn.
Giống như đề xuất Tránh xâu chuỗi các đề xuất yêu cầu quan trọng , điều này không dẫn đến ‘vượt qua’ hoặc ‘thất bại’. Thay vào đó, bạn chỉ cần xem danh sách số lượng yêu cầu được thực hiện và kích thước của chúng:
Giữ số lượng yêu cầu thấp và chuyển kích thước khuyến nghị nhỏ
Không có số lượng yêu cầu lý tưởng hoặc kích thước tối đa cần ghi nhớ. Thay vào đó, Google khuyên bạn nên tự đặt ra các tiêu chuẩn đó bằng cách tạo ngân sách hiệu suất. Đây là một bộ các mục tiêu được xác định có thể liên quan đến các khía cạnh như:
- Kích thước hình ảnh tối đa
- Số lượng phông chữ web được sử dụng
- Có bao nhiêu tài nguyên bên ngoài bạn gọi đến
- Kích thước của tập lệnh và khung
Tạo ngân sách hiệu suất cung cấp cho bạn một bộ tiêu chuẩn để tự chịu trách nhiệm. Khi bạn vượt quá ngân sách của mình, bạn có thể đưa ra quyết định về việc loại bỏ hoặc tối ưu hóa các tài nguyên để tuân thủ các nguyên tắc được xác định trước. Bạn có thể tìm hiểu thêm ở bài này trong hướng dẫn riêng của Google.
4. Giảm thiểu CSS
Các tệp CSS thường lớn hơn mức cần thiết, để giúp con người dễ đọc hơn. Chúng có thể bao gồm nhiều lợi nhuận vận chuyển khác nhau và không gian không cần thiết cho máy tính để hiểu nội dung của chúng.
Giảm thiểu CSS của bạn là quá trình cô đọng các tệp của bạn bằng cách loại bỏ các ký tự, khoảng trắng và trùng lặp không cần thiết. Google khuyến nghị thực hành này vì nó làm giảm kích thước tệp CSS của bạn và do đó có thể cải thiện tốc độ tải:
Giảm thiểu đề xuất CSS
Tài khuyên bạn nên sử dụng một plugin như Tự động tối đa hóa hoặc WP Rocket để thu nhỏ các tệp CSS của bạn.
5. Giảm thiểu JavaScript
Giống như bạn có thể giảm kích thước tệp CSS thông qua thu nhỏ, điều tương tự cũng áp dụng cho các tệp JavaScript của bạn:
Giảm thiểu đề xuất JavaScript
Tự động tối đa hóa hoặc WP Rocket cũng có thể xử lý tác vụ này cho trang web WordPress của bạn.
6. Xóa CSS không sử dụng
Bất kỳ mã nào trong biểu định kiểu của bạn là nội dung phải được tải để trang của bạn hiển thị cho người dùng. Nếu có CSS trên trang web của bạn không thực sự hữu ích, thì nó sẽ làm giảm hiệu suất của bạn.
Đó là lý do tại sao Google khuyên bạn nên xóa mọi CSS không sử dụng :
Xóa đề xuất CSS không sử dụng
Giải pháp ở đây về cơ bản giống như giải pháp loại bỏ CSS chặn chặn kết xuất. Bạn có thể tạo kiểu nội tuyến hoặc trì hoãn theo bất kỳ cách nào có ý nghĩa nhất cho các trang của bạn. Bạn cũng có thể sử dụng một công cụ như Chrome DevTools để tìm CSS chưa sử dụng cần được tối ưu hóa.
7. Giảm thiểu công việc chủ đề chính
‘Chủ đề chính’ là thành phần chính của trình duyệt của người dùng chịu trách nhiệm biến mã thành trang web mà khách truy cập có thể tương tác. Nó phân tích cú pháp và thực thi HTML, CSS và JavaScript. Ngoài ra, nó chịu trách nhiệm xử lý các tương tác của người dùng.
Điều này có nghĩa là, khi luồng chính hoạt động thông qua mã trang web của bạn, nó cũng không thể xử lý các yêu cầu của người dùng. Nếu công việc chủ đề chính của trang web của bạn mất quá nhiều thời gian, điều này có thể dẫn đến UX kém và thời gian tải trang chậm.
Google PageSpeed sẽ gắn cờ các trang mất hơn bốn giây để hoàn thành công việc chủ đề chính và trình bày một trang web có thể sử dụng:
Giảm thiểu đề xuất công việc chính
Một số phương pháp được sử dụng để giảm công việc chủ đề chính đã được đề cập trong các phần khác của bài đăng này, bao gồm:
- Giảm thiểu mã của bạn
- Xóa mã không sử dụng
- Triển khai bộ nhớ đệm
Tuy nhiên, bạn cũng có thể muốn xem xét tách mã. Quá trình này bao gồm việc chia JavaScript của bạn thành các gói thực thi khi cần, thay vì yêu cầu trình duyệt tải tất cả chúng trước khi trang trở nên tương tác.
Webpack thường được sử dụng để thực hiện phân tách mã. Lưu ý rằng đây là một kỹ thuật khá tiên tiến và người mới bắt đầu thường nên thực hiện một mình.
8. Giảm thời gian thực thi JavaScript
Thực thi JavaScript thường là đóng góp nổi bật nhất cho công việc chủ đề chính. PageSpeed Insights có một đề xuất riêng để cảnh báo bạn nếu tác vụ này có ảnh hưởng đáng kể đến hiệu suất trang web của bạn:
Giảm đề xuất thời gian thực hiện JavaScript
Các phương pháp được đề xuất ở trên để giảm công việc của luồng chính cũng sẽ giải quyết cảnh báo này trong kết quả PageSpeed của bạn.
9. Giảm thời gian phản hồi của máy chủ (TTFB)
Time to First Byte (TTFB) là thước đo thời gian để trình duyệt nhận được byte dữ liệu đầu tiên từ máy chủ của trang web của bạn sau khi yêu cầu. Mặc dù điều này không giống với tốc độ trang web tổng thể của bạn, nhưng có TTFB thấp là điều tốt cho hiệu suất trang web của bạn.
Do đó, giảm thời gian phản hồi của máy chủ là một trong các đề xuất của Google PageSpeed Insights. Nếu bạn có thể đạt được TTFB thấp, bạn sẽ thấy thông báo này trong phần Kiểm toán đã qua :
Thời gian phản hồi của máy chủ là thông báo thấp
Có một số yếu tố có thể ảnh hưởng đến TTFB của bạn. Một số chiến lược để hạ thấp nó bao gồm:
- Chọn một nhà cung cấp dịch vụ lưu trữ web chất lượng cao
- Sử dụng các chủ đề và plugin nhẹ
- Giảm số lượng plugin được cài đặt trên trang web của bạn
- Sử dụng Mạng phân phối nội dung (CDN)
- Triển khai bộ nhớ đệm trình duyệt
- Chọn nhà cung cấp Hệ thống Tên miền (DNS) vững chắc
10. Hình ảnh kích thước phù hợp
Các tệp phương tiện như hình ảnh có thể là lực cản thực sự đối với hiệu suất trang web của bạn. Định cỡ đúng cách là một cách đơn giản để giảm thời gian tải của bạn:
Đề nghị kích thước hình ảnh phù hợp
Nếu trang của bạn bao gồm các hình ảnh lớn hơn mức cần thiết, CSS được sử dụng để thay đổi kích thước chúng một cách thích hợp. Việc này mất nhiều thời gian hơn chỉ đơn giản là tải hình ảnh ở kích thước phù hợp ban đầu, do đó ảnh hưởng đến hiệu suất trang của bạn.
Để khắc phục điều này, bạn có thể tải lên hình ảnh ở kích thước phù hợp hoặc sử dụng ‘hình ảnh phản hồi’. Điều này liên quan đến việc tạo hình ảnh có kích thước khác nhau cho các thiết bị khác nhau.
Các srcset thuộc tính xác định các tập tin có sẵn khác nhau, và kích thước thuộc tính nói với các trình duyệt cái nào nên được sử dụng dựa trên kích thước màn hình hiện tại.
11. Trì hoãn hình ảnh Offscreen
Quá trình trì hoãn hình ảnh ngoài màn hình thường được gọi là ‘lười tải’. Điều này có nghĩa là thay vì làm cho trình duyệt tải mọi hình ảnh trên một trang trước khi hiển thị nội dung trong màn hình đầu tiên, nó sẽ chỉ tải những hình ảnh hiển thị ngay lập tức.
Tải ít hơn trước khi trang hiển thị có nghĩa là hiệu suất tốt hơn, đó là lý do tại sao Google khuyến nghị phương pháp này:
Trì hoãn đề xuất hình ảnh ngoài màn hình
Có một số plugin WordPress được tạo riêng cho việc tải lười biếng, bao gồm Native Lazy Load và Lazy Load của WP Rocket . Các plugin tối ưu hóa hiệu suất và hình ảnh khác nhau như Tự động tối đa hóa cũng có các tính năng tải lười biếng.
12. Mã hóa hình ảnh hiệu quả
Đây cũng là phương pháp chính để làm theo khuyến nghị của Google để mã hóa hình ảnh hiệu quả :
Đề xuất mã hóa hình ảnh hiệu quả
Điều quan trọng là đạt được kích thước tệp nhỏ nhất có thể, mà không làm giảm chất lượng của hình ảnh. Các plugin như Imagify và Smush có thể giúp với nhiệm vụ này. Bạn có thể tìm hiểu thêm về chúng trong hướng dẫn của Tài để tối ưu hóa hình ảnh .
Các đề xuất khác ảnh hưởng đến việc bạn ‘vượt qua’ hay ‘thất bại’ việc kiểm toán hình ảnh được mã hóa hiệu quả bao gồm:
- Phục vụ hình ảnh ở kích thước chính xác
- Thực hiện tải lười biếng (trì hoãn hình ảnh ngoài màn hình)
- Chuyển đổi hình ảnh sang định dạng tệp thế hệ tiếp theo, chẳng hạn như WebP
- Sử dụng định dạng video cho nội dung hoạt hình, chẳng hạn như GIF
Ngoài việc nén hình ảnh của bạn, bạn có thể làm theo các bước để thực hiện các đề xuất này như được mô tả ở nơi khác trong bài đăng này.
13. Phục vụ hình ảnh trong các định dạng thế hệ tiếp theo
Có một số định dạng tệp hình ảnh tải nhanh hơn các định dạng khác. Thật không may, chúng không phải là định dạng PNG hoặc JPEG thường thấy của bạn . Hình ảnh WebP đang trở thành tiêu chuẩn mới và Google PageSpeed sẽ thông báo cho bạn nếu hình ảnh của bạn không tuân thủ nó:
Phục vụ hình ảnh trong đề xuất định dạng thế hệ tiếp theo
Điều này có vẻ như là một đề xuất khó đáp ứng, vì bạn có thể đã có nhiều hình ảnh trên trang web WordPress của bạn. May mắn thay, có những plugin có thể giúp đỡ. Ví dụ: Imagify và Smush đều cung cấp tính năng chuyển đổi WebP.
14. Sử dụng định dạng video cho nội dung hoạt hình
GIF có thể là một hình thức nội dung trực quan hiệu quả trong nhiều tình huống. Hướng dẫn hướng dẫn, đánh giá tính năng và thậm chí hoạt hình hài hước đều có thể nâng cao bài đăng của bạn và làm cho chúng thú vị hơn và có giá trị với độc giả.
Thật không may, những lợi ích đó phải trả giá cho hiệu suất của bạn. GIF đang yêu cầu tải, đó là lý do tại sao PageSpeed Insights khuyên bạn nên phục vụ nội dung video thay thế:
Sử dụng định dạng video cho đề xuất nội dung hoạt hình
Thật không may, chuyển đổi GIF thành các định dạng video không phải là quy trình đơn giản nhất. Trước tiên, bạn sẽ phải quyết định loại video nào bạn muốn sử dụng:
- MP4: Tạo các tệp lớn hơn một chút, nhưng tương thích với hầu hết các trình duyệt chính.
- WebM: Định dạng video được tối ưu hóa cao nhất, mặc dù nó có khả năng tương thích trình duyệt hạn chế.
Khi bạn đã đưa ra lựa chọn hợp lý nhất cho trang web của mình, bạn sẽ cần chuyển đổi các định dạng tệp. Cách tốt nhất để làm điều này là thông qua dòng lệnh. Để bắt đầu, cài đặt FFmpeg . Đây là một công cụ nguồn mở để chuyển đổi các định dạng tệp:
Công cụ chuyển đổi định dạng tệp FFmpeg cho video và âm thanh
Sau đó, mở giao diện dòng lệnh của bạn và chạy lệnh sau:
ffmpeg -i input.gif output.mp4
Điều này sẽ chuyển đổi GIF với tên tệp input.gif thành video MP4 với tên tệp output.mp4 . Thay đổi định dạng chỉ là khởi đầu, tuy nhiên. Bây giờ bạn cần nhúng video kết quả vào trang web WordPress của mình theo cách làm cho nó xuất hiện như một GIF hoạt hình.
Nhúng nội dung video cho hoạt hình
Như bạn có thể nhận thấy nếu bạn đã từng xem GIF trước đây, chúng hơi khác so với các video thông thường. Chúng thường tự động phát và chạy trên một vòng lặp, và chúng luôn không có âm thanh. Nhúng tệp MP4 hoặc WebM mới của bạn trên trang web WordPress của bạn sẽ không tạo ra các tính năng này.
Tuy nhiên, bạn có thể tạo lại chúng với một số mã rất đơn giản. Tải video của bạn lên thư viện phương tiện của bạn, sau đó thêm phần sau vào trang hoặc đăng nơi bạn muốn đưa GIF của mình vào:
Điều này sẽ áp dụng các thuộc tính được chỉ định cho video của bạn, làm cho nó xuất hiện nhiều hơn ‘giống như GIF’. Chỉ cần điều chỉnh tên tệp và loại để phù hợp với tài nguyên của bạn. Để biết thêm chi tiết về chủ đề này, Tài khuyên bạn nên đọc hướng dẫn của Google về việc chuyển đổi GIF thành video .
15. Đảm bảo văn bản vẫn hiển thị trong khi tải Webfont
Giống như hình ảnh, phông chữ có xu hướng là các tệp lớn mất nhiều thời gian để tải. Trong một số trường hợp, trình duyệt có thể ẩn văn bản của bạn cho đến khi phông chữ bạn đang sử dụng tải hoàn toàn, điều này sẽ dẫn đến đề xuất này từ Google PageSpeed Insights:
Đảm bảo văn bản vẫn hiển thị trong khi đề xuất tải webfont
Google khuyên bạn nên giải quyết vấn đề này bằng cách áp dụng chỉ thị hoán đổi API hiển thị phông chữ theo kiểu khuôn mặt @ phông chữ của bạn . Để thực hiện việc này, truy cập biểu định kiểu của bạn ( style.css ) và thêm phần sau vào sau thuộc tính src dưới @ font-face :
16. Kích hoạt tính năng nén văn bản
Google PageSpeed Insights ‘ Kích hoạt đề xuất nén văn bản đề cập đến việc sử dụng nén GZIP:
Cho phép đề xuất nén văn bản
Trong một số trường hợp (như bạn có thể thấy trong hình trên), nén văn bản sẽ được bật tự động trên máy chủ của bạn. Nếu đây không phải là trường hợp cho trang web của bạn, bạn có một vài lựa chọn để làm theo khuyến nghị này.
Đầu tiên là cài đặt một plugin có tính năng nén GZIP. WP Rocket là một giải pháp khả thi nếu bạn sẵn sàng trả tiền cho nó.
Bạn cũng có thể nén văn bản của bạn bằng tay. Điều này liên quan đến việc chỉnh sửa tệp .htaccess của bạn , có thể có rủi ro, vì vậy hãy đảm bảo bạn có bản sao lưu gần đây.
Hầu hết các trang web WordPress chạy trên máy chủ Apache. Mã cho phép nén GZIP trông như thế này:
17. Kết nối với nguồn gốc cần thiết
Rất có thể bạn có thể có ít nhất một tài nguyên của bên thứ ba trên trang web của mình – Google Analytics là một ví dụ phổ biến. Có thể mất thời gian để trình duyệt thiết lập kết nối với các tài nguyên này, làm chậm tốc độ tải của bạn.
Sử dụng các thuộc tính kết nối trước có thể cho các trình duyệt biết ngay rằng có các tập lệnh của bên thứ ba trên trang của bạn cần được tải. Quá trình yêu cầu họ sau đó có thể bắt đầu càng sớm càng tốt, cải thiện hiệu suất của bạn.
Nếu Google cảm thấy rằng trang của bạn có thể được hưởng lợi từ kỹ thuật này, bạn sẽ thấy đề xuất Kết nối trước với nguồn gốc được yêu cầu :
Kết nối với đề xuất nguồn gốc cần thiết
Có một vài cách để thực hiện chiến lược tối ưu hóa này. Nếu bạn cảm thấy thoải mái với việc chỉnh sửa các tệp chủ đề WordPress của mình, bạn có thể thêm thẻ liên kết vào tệp header.php của mình . Đây là một ví dụ:
Trong trường hợp này, thẻ thông báo cho các trình duyệt rằng họ cần thiết lập kết nối đến example.com càng nhanh càng tốt. Google PageSpeed Insights sẽ liệt kê mọi tài nguyên có liên quan mà bạn nên thêm các thẻ liên kết với các thuộc tính kết nối trước.
Tùy chọn khác là sử dụng một plugin để đạt được hiệu quả tương tự. Perfmatters là một trong những Plugin Tài phục nhất về khả năng tối ưu hóa WordPress
18. Yêu cầu tải trước
Tương tự như Đề xuất kết nối với nguồn gốc được yêu cầu , theo đề xuất này cho phép bạn giảm thiểu số lượng yêu cầu mà trình duyệt phải thực hiện đối với máy chủ của trang web của bạn. Tuy nhiên, thay vì kết nối với tài nguyên của bên thứ ba, các yêu cầu chính của Tải trước liên quan đến việc tải các tài sản quan trọng trên máy chủ của riêng bạn:
Tải trước yêu cầu chính yêu cầu
Việc thực hiện kỹ thuật này cũng rất giống với khuyến nghị trước đó. Bạn có thể thêm các thẻ liên kết chỉ định các tài nguyên được liệt kê trong PageSpeed Insights vào tệp header.php của bạn :
Bạn cũng có thể kết hợp thẻ này bằng cách sử dụng Perfmatters, WP Rocket hoặc Pre * Party Resource gợi ý.
19. Tránh chuyển hướng nhiều trang
Chuyển hướng được sử dụng khi bạn muốn một URL trỏ đến một URL khác. Chúng thường được sử dụng khi bạn di chuyển hoặc xóa một trang trên trang web của bạn. Mặc dù không có gì sai khi sử dụng chuyển hướng nói chung, nhưng chúng gây ra sự chậm trễ thêm trong thời gian tải.
Nếu bạn có quá nhiều chuyển hướng trên trang web của mình, bạn có thể thấy đề xuất này trong Google PageSpeed Insights:
Tránh đề xuất chuyển hướng nhiều trang
Điều duy nhất bạn có thể làm để đáp lại đề xuất này là đảm bảo bạn chỉ sử dụng chuyển hướng khi bạn thực sự phải làm.
20. Phục vụ tài sản tĩnh với chính sách bộ nhớ cache hiệu quả
Nếu bạn đã sử dụng Google PageSpeed Insights một thời gian, bạn có thể biết rõ hơn về đề xuất này như cảnh báo bộ nhớ đệm của trình duyệt . Trong phiên bản 5, giờ đây nó được gắn nhãn là Phục vụ tài sản tĩnh với chính sách bộ nhớ cache hiệu quả :
Máy chủ tài sản tĩnh với đề xuất chính sách bộ đệm hiệu quả
Đề xuất này có một vài lớp chúng ta cần phải đi qua. Đầu tiên là “bộ nhớ đệm” nghĩa là gì. Nói tóm lại, đó là một quá trình trong đó trình duyệt lưu các bản sao của trang của bạn, để chúng có thể được tải nhanh hơn trong các lần truy cập trong tương lai.
Cách phổ biến nhất mà các trang web WordPress triển khai bộ nhớ đệm là với các plugin . WP Rocket và W3 Total Cache là các tùy chọn phổ biến.
Khi bạn đã bật bộ đệm cho trang web của mình, bạn có thể lo lắng về phần thứ hai của đề xuất này, đó là “hiệu quả” của chính sách bộ đệm của bạn. Trình duyệt xóa bộ nhớ cache định kỳ để làm mới chúng với các bản sao được cập nhật.
Lý tưởng nhất, bạn muốn khoảng thời gian này cao hơn thay vì thấp hơn. Nếu bạn xóa trang web của mình khỏi bộ nhớ cache trong vài giờ, điều đó sẽ đánh bại mục đích sử dụng kỹ thuật này ngay từ đầu. Bạn có thể tối ưu hóa thời gian bộ nhớ cache hết hạn sử dụng Cache-Control và Expires tiêu đề.
Thêm tiêu đề kiểm soát bộ đệm
Sử dụng mã sau đây để thêm các tiêu đề Kiểm soát bộ đệm trong Nginx:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
Bạn nên thêm nó vào tập tin cấu hình máy chủ của bạn. Trong ví dụ trên, các loại tệp được chỉ định sẽ hết hạn sau 30 ngày.
Thay vào đó, những người có máy chủ Apache nên sử dụng đoạn mã này trong các tệp .htaccess của họ :
Header set Cache-Control “max-age=84600, public”
Thêm mã này trước #BEGIN WordPress hoặc sau #END WordPress . Trong ví dụ này, thời gian hết hạn bộ nhớ cache được đặt thành 84.600 giây.
Thêm tiêu đề hết hạn
Các tiêu đề Cache-Control hiện nay là khá nhiều tiêu chuẩn. Tuy nhiên, có một số công cụ (bao gồm GTMetrix) vẫn kiểm tra các tiêu đề Hết hạn .
Bạn có thể thêm chúng vào máy chủ Nginx bằng cách kết hợp các mục sau vào khối máy chủ của bạn:
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 2d;
}
Bạn nên đặt thời gian hết hạn khác nhau dựa trên các loại tệp. Các máy chủ Apache sẽ tạo ra kết quả tương tự nếu bạn thêm mã này vào tệp .htaccess của mình :
## EXPIRES HEADER CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
## EXPIRES HEADER CACHING ##
Một lần nữa, bạn nên thêm mã này trước #BEGIN WordPress hoặc sau #END WordPress .
Bộ nhớ đệm hiệu quả của Google Analytics
Trớ trêu thay, tập lệnh Google Analytics mà bạn có thể đã thêm vào tiêu đề trang của mình để theo dõi hành vi của người dùng có thời gian hết hạn bộ nhớ cache chỉ hai giờ. Điều này có khả năng vì vậy, nếu các bản cập nhật được thực hiện cho nền tảng, người dùng sẽ có quyền truy cập vào các thay đổi một cách nhanh chóng.
Tập lệnh này sẽ xuất hiện trong danh sách các tài nguyên yêu cầu sự chú ý của bạn trong Phục vụ tài sản tĩnh với đề xuất chính sách bộ đệm hiệu quả . Vì nó thuộc về bên thứ ba, bạn không thể thay đổi thời gian hết hạn với các tiêu đề Kiểm soát bộ đệm hoặc hết hạn .
Nếu đây là tập lệnh duy nhất được liệt kê theo khuyến nghị này, bạn vẫn có thể vượt qua kiểm toán:
Đã qua kiểm toán chính sách bộ nhớ cache hiệu quả
Tuy nhiên, như Tài đã lưu ý trong suốt bài đăng này, điểm số PageSpeed của bạn ít quan trọng hơn hiệu suất thực tế và cảm nhận của bạn. Để phục vụ tài nguyên này một cách hiệu quả, bạn có thể xem xét việc lưu trữ Google Analytics tại địa phương.
Các plugin như Bộ tối ưu hóa phân tích hoàn chỉnh (CAOS) và Perfmatters sẽ cho phép bạn thực hiện việc này.
21. Giảm tác động của mã bên thứ ba
Bây giờ chúng Tài đã đề cập đến một vài cách khác nhau trong đó các tập lệnh của bên thứ ba có thể ảnh hưởng tiêu cực đến hiệu suất của bạn và dẫn đến việc kiểm tra không thành công từ Thông tin chi tiết của PageSpeed. Lý tưởng nhất, tốt nhất là hạn chế sự phụ thuộc của bạn vào các công cụ này để ngăn chặn các tác động bất lợi.
Tuy nhiên, trong một số trường hợp, giải pháp tốt nhất cho nhu cầu trang web của bạn là kết hợp tập lệnh của bên thứ ba. Google Analytics là một ví dụ tuyệt vời. Những người khác bao gồm:
Trong trường hợp bạn thấy việc sử dụng tập lệnh của bên thứ ba là cần thiết, điều quan trọng là vẫn phải giảm tác động của nó đến hiệu suất trang web của bạn, vì kết quả phân tích PageSpeed của bạn sẽ cho bạn biết:
Giảm tác động của khuyến nghị mã bên thứ ba
Để tải mã của bên thứ ba hiệu quả hơn, bạn có thể xem xét một trong những kỹ thuật Tài đã đề cập trong bài đăng này:
- Trì hoãn việc tải JavaScript
- Sử dụng thẻ liên kết với các thuộc tính kết nối
- Tự lưu trữ tập lệnh của bên thứ ba (như Tài đã mô tả với Google Analytics ở trên)
Các phương pháp này sẽ giảm thiểu tác động đến hiệu suất trang web của bạn.
22. Tránh tải trọng mạng rất lớn
Đề xuất này đặc biệt có liên quan đến khách truy cập di động của bạn. Tải trọng lớn có thể yêu cầu sử dụng nhiều dữ liệu di động hơn, do đó làm mất tiền của người dùng. Giảm thiểu số lượng yêu cầu mạng cần thiết để truy cập các trang của bạn có thể ngăn chặn điều này:
Tránh đề xuất tải trọng mạng lớn
Google khuyên bạn nên giữ tổng kích thước byte của mình ở mức 1.600 KB trở xuống. Các phương pháp được sử dụng phổ biến nhất để đạt được mục tiêu này được tìm thấy trong suốt bài đăng này, bao gồm:
- Trì hoãn CSS, JavaScript và hình ảnh dưới màn hình đầu tiên
- Giảm thiểu mã
- Nén tập tin hình ảnh
- Sử dụng định dạng WebP cho hình ảnh
- Triển khai bộ nhớ đệm
Thực hiện theo các bước có liên quan cho các chiến lược này và bạn nên vượt qua cuộc kiểm toán này mà không cần bất kỳ nỗ lực bổ sung nào.
23. Dấu thời gian và biện pháp của người dùng
Đề xuất này chỉ có liên quan nếu bạn đang sử dụng API thời gian của người dùng . Công cụ này tạo dấu thời gian để giúp bạn đánh giá hiệu suất JavaScript của mình. Nếu bạn đã thiết lập API cho trang web của mình, bạn sẽ thấy các nhãn hiệu và biện pháp của mình trong tiêu đề này trong PageSpeed Insights:
Dấu thời gian của người dùng và các biện pháp khuyến nghị
Như bạn có thể thấy, đây là một đề xuất khác của Google mà không dẫn đến ‘vượt qua’ hoặc ‘thất bại’. PageSpeed Insights chỉ đơn giản là làm cho thông tin này có thể truy xuất dễ dàng, vì vậy bạn có thể sử dụng nó để đánh giá các khu vực có thể yêu cầu tối ưu hóa.
Nếu bạn quan tâm đến việc kết hợp API thời gian người dùng vào trang web WordPress của mình, bạn có thể tìm hiểu thêm trong hướng dẫn Mozilla về chủ đề này .
24. Tránh Kích thước Mô hình Đối tượng Tài liệu Quá mức (DOM)
Nói một cách đơn giản nhất, DOM là cách các trình duyệt biến HTML thành các đối tượng. Nó liên quan đến việc sử dụng cấu trúc cây được tạo thành từ các nút riêng lẻ mà mỗi nút đại diện cho một đối tượng. Đương nhiên, DOM trang của bạn càng lớn thì thời gian tải sẽ càng lâu.
Nếu trang của bạn vượt quá các tiêu chuẩn nhất định về kích thước DOM , nó sẽ khuyên bạn nên giảm số lượng nút cũng như mức độ phức tạp của kiểu CSS của bạn :
Tránh đề xuất kích thước DOM quá mức
Thủ phạm phổ biến nếu bạn ‘thất bại’ cuộc kiểm toán này trong PageSpeed Insights là chủ đề WordPress của bạn. Các chủ đề nặng thường thêm khối lượng lớn các yếu tố vào DOM và cũng có thể bao gồm kiểu dáng phức tạp làm chậm trang web của bạn. Nếu đây là trường hợp, bạn có thể cần phải đổi Theme cho WordPress .
Tóm lược
Google PageSpeed Insights phải là một yếu tố chính trong hộp công cụ quản trị trang web của bạn. Tuy nhiên, việc khắc phục điểm số của bạn và ám ảnh về việc đạt 100/100 đáng thèm muốn có lẽ không phải là cách sử dụng tốt nhất thời gian của bạn. Nó có thể đưa bạn ra khỏi các nhiệm vụ quan trọng khác có thể cung cấp lợi ích quan trọng hơn.
Trong bài đăng này, Tài đã đề cập đến những cách mà Google PageSpeed Score thực hiện và không quan trọng. Tài cũng đã chia sẻ một số hướng dẫn ngắn gọn để đưa các đề xuất của nền tảng hoạt động trên trang web WordPress của bạn, để cải thiện hiệu suất của nó.
Bạn có thắc mắc về Google PageSpeed Insights hoặc tối ưu hóa hiệu suất trang web của bạn không?
titanic.vn .
