Kinh Nghiệm về
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
Mới Nhất
Bann đang tìm kiếm từ khóa
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
2021-10-08 02:38:02 san sẻ Kinh Nghiệm về trong nội dung bài viết một cách Mới Nhất.
Google PageSpeed Insights chứng minh và khẳng định là một công cụ hữu ích cho quản trị viên web, nhà tăng trưởng và chủ sở hữu website thuộc toàn bộ những loại. Tuy nhiên, Tài nhận thấy rằng thật nhiều người dành hàng giờ để ám ảnh về việc tối ưu hóa website của mình, để 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 triệu tập vào việc triển khai những đề xuất kiến nghị của nền tảng thay vì không tham gia vào số ở đầu trang, những bạn sẽ tạo ra nhiều quyền lợi hơn cho website của tớ.
Bài đăng này là một hướng dẫn toàn vẹ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 phối hợp những đề xuất kiến nghị 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 website. Bạn trọn vẹn có thể nhập bất kỳ URL nào và phân tích nó:
tin tức rõ ràng về Google PageSpeed
Google tiếp sau đó phục vụ nhu yếu tổng điểm trong số 100 cho website bạn đã kiểm tra, dựa vào một số trong những 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 tiếp tục thấy một số trong những đề xuất kiến nghị từ Google về kiểu cách cải tổ 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 rõ ràng về Google PageSpeed
Kể từ thời gian năm 2018, điểm số của PageSpeed Insights được xem toán trải qua Google Lighthouse , mã nguồn mở của Google, công cụ tự động hóa để cải tổ chất lượng chung của những website. Nền tảng này trọn vẹn có thể định hình và nhận định toàn bộ những loại yếu tố, gồm có hiệu suất, kĩ năng truy vấn, ứng dụng web lũy tiến và hơn thế nữa.
Để xem định hình và nhận định toàn vẹn của Ngọn hải đăng về website của bạn, bạn cũng trọn vẹn có thể sử dụng công cụ Đo lường của Google :
Google Webmasters Đo công cụ truy thuế kiểm toán
Ngoài việc tiến hành truy thuế kiểm toán hiệu suất tựa như một lần chạy Google PageSpeed Insights, những bạn sẽ nhận được điểm cho kĩ năng truy vấn, 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à tăng trưởng website bị ám ảnh về việc đạt được điểm số PageSpeed Insights hoàn hảo nhất. Thật rủi ro đáng tiếc, những người dân này còn có Xu thế bỏ qua khía cạnh quan trọng hơn trong kết quả của bài kiểm tra: những khuyến nghị.
Mặc dù bạn chứng minh và khẳng định nên nỗ lực cải tổ thời hạn tải website của tớ 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 những người mới khởi đầu, nó thậm chí còn không phải là bài kiểm tra toàn bộ về hiệu suất.
Không tựa như PageSpeed Insights, Pingdom Tools được cho phép bạn kiểm tra hiệu suất website của tớ từ nhiều vị trí rất khác nhau:
Kết quả kiểm tra vận tốc của Công cụ Pingdom
Bạn cũng trọn vẹn có thể chạy thử nghiệm trên những nền tảng như GTmetrix (phối hợp điểm số của bạn từ PageSpeed Insights và YSlow ) và WebPageTest . Rất trọn vẹn có thể, điểm số của bạn trên những công cụ rất khác nhau này sẽ không còn khớp đúng chuẩn, điều này cho bạn thấy những số lượng này trọn vẹn có thể tùy ý ra làm thế nào.
Điều thực sự quan trọng là vận tốc thực tiễn của website của bạn . Để đưa nó vào viễn cảnh, Tài đã thấy những website có thời hạn 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 website của bạn với Google PageSpeed Insights không phải để đạt được điểm trên cao. Thay vào đó, đó là tìm những điểm có yếu tố trên website của bạn, để bạn cũng trọn vẹn có thể tối ưu hóa chúng và giảm cả thời hạn tải thực tiễn và thực tiễn tình hình load website của bạn.
Cách Google sử dụng thông tin rõ ràng về vận tốc trang
Ngoài việc tác động đến Trải nghiệm người tiêu dùng (UX) của website 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 quản lý bởi công cụ tìm kiếm lớn số 1 và phổ cập nhất toàn thế giới, nguyên do là yếu tố số của bạn cũng trọn vẹn có thể có tác động đến bảng xếp hạng Trang kết quả của Công cụ tìm kiếm (SERP) (tối thiểu là trên chính Google).
Thực tế là Google không sử dụng PageSpeed Insights để xác lập thứ hạng – loại. Tốc độ website là một yếu tố xếp hạng, đơn thuần và giản dị và đơn thuần và giản dị. Điểm kiểm tra hiệu suất của bạn cũng trọn vẹn có thể cho bạn một ý tưởng tương đối 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 thế nữa chỉ là số trong vòng tròn ở đầu kết quả PageSpeed của bạn. Đánh 100/100 sẽ không còn đảm bảo cho bạn một vị trí số 1 trên SERPs.
Như đã nói, bạn vẫn trọn vẹn có thể đặt kết quả PageSpeed Insights hoạt động giải trí và sinh hoạt khi cải tổ SEO của tớ. Chẳng hạn, Tính từ lúc năm 2018, vận 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 phục vụ nhu yếu tài liệu cho toàn bộ phiên bản máy tính để bàn và thiết bị di động của website của bạn:
Tab di động trong Google PageSpeed Insights
Vì hơn 73 Phần Trăm người tiêu dùng internet di động nhận định rằng họ đã gặp phải một website mất quá nhiều thời hạn để tải, thông tin trong tab Google PageSpeed Insights Mobile là vô giá. Sử dụng những đề xuất kiến nghị ở đây để giảm thời hạn tải trên điện thoại cảm ứng thông minh và những thiết bị khác sẽ tương hỗ cho bạn có lợi thế đối đầu.
Đề xuất thông tin rõ ràng về Google PageSpeed (24 phương pháp để cải tổ hiệu suất)
Tài đã nói thật nhiều về những đề xuất kiến nghị 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ó mức giá trị hơn nhiều so với điểm thực tiễn của bạn. Đó là nguyên do tại sao Tài dành phần còn sót lại của bài đăng này cho họ.
Tuy nhiên, trước lúc Tài đi sâu vào những đề xuất kiến nghị riêng lẻ, những bạn sẽ cần hiểu sự khác lạ 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 website của bạn với những người dân khác trong Báo cáo trải nghiệm người tiêu dùng Chrome trong 30 ngày qua.
Ngoài ra còn tồn tại hai biểu đồ hiển thị nơi Firstr Contentful Paint trung bình (FCP) và Độ trễ nguồn 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 website của Tài tương tự với 45 Phần Trăm những website trong phân vị thứ 75 và FID của Tài tương tự với 9 Phần Trăm của phân vị thứ 95.
Lab Data hiển thị tài liệu rõ ràng 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 đúng chuẩn . Điều đó trọn vẹn thường thì. Các tài liệu Lab được tạo ra trong Đk cố định và thắt chặt, trong lúc những trường tài liệu sử dụng vận tốc tải thực tiễn tích lũy theo thời hạn.
Khi được xem xét phối 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 hạn tải thực tiễn của website của bạn. Như Tài đã đề cập trước đó, điều này thậm chí còn còn quan trọng hơn điểm số PageSpeed tổng thể của bạn, vì vậy những bạn sẽ muốn để ý đến những số lượng này.
Sau khi toàn bộ chúng ta đã xem xét thông tin này, đã đi đến lúc khởi đầu cải tổ hiệu suất website của bạn với những đề xuất kiến nghị 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 kiến nghị phổ cập từ Google PageSpeed Insights là Loại bỏ tài nguyên chặn hiển thị :
Loại bỏ đề xuất kiến nghị tài nguyên chặn hiển thị
Điều này đề cập đến những tập lệnh JavaScript và CSS đang ngăn trang của bạn tải nhanh. Trình duyệt của quý khách truy vấn phải tải xuống và xử lý những tệp này trước lúc nó trọn vẹn có thể hiển Thị phần còn sót lại của trang, do đó, có thật nhiều trong số chúng ‘trên màn hình hiển thị thứ nhất’ trọn vẹn có thể tác động xấu đi đến vận tốc website của bạn.
Nếu bạn không tồn tại nhiều JavaScript hoặc CSS, bạn cũng trọn vẹn có thể nội tuyến chúng để thoát khỏi chú ý quan tâm này. Quá trình này đề cập đến việc phối hợp JavaScript và / hoặc CSS của bạn vào tệp HTML của bạn. Bạn trọn vẹ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ó mức giá trị cho những website rất nhỏ. Hầu hết những website WordPress có đủ JavaScript mà phương pháp này thực sự trọn vẹn có thể làm `bạn đình trệ.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 quy trình phân tích cú pháp HTML, nhưng chỉ tiến hành nó sau khoản thời hạn phân tích xong. Ngoài ra, những tập lệnh với thuộc tính này tiến hành theo thứ tự xuất hiện trên trang.Bạn sẽ tìm thấy một list những tài nguyên bị tác động nhiều nhất bởi yếu tố này phía dưới đề xuất kiến nghị trong kết quả PageSpeed của bạn.
2. Tránh xâu chuỗi những yêu cầu quan trọng
Khái niệm xâu chuỗi những yêu cầu quan trọng phải tiến hành với Đường dẫn kết xuất quan trọng (CRP) và cách trình duyệt tải những trang của bạn. Một số yếu tố – ví như JavaScript và CSS mà toàn bộ chúng ta đã thảo luận ở trên – phải được tải trọn vẹn trước lúc trang của bạn hiển thị.
Là một phần của đề xuất kiến nghị 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 những yêu cầu quan trọng
Sơ đồ này sẽ cho bạn thấy một loạt những yêu cầu phụ thuộc phải được tiến hành trước lúc trang của bạn hiển thị. Nó cũng tiếp tục 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 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 để tiến hành những tiềm năng này được đề cập trong những khuyến nghị khác được thảo luận trong nội dung bài viết này, gồm có:
Loại bỏ tài nguyên chặn kết xuấtTrì hoãn hình ảnh ngoài màn hìnhGiảm thiểu CSS và JavaScriptĐiều quan trọng cần lưu ý là không tồn tại một số trong những chuỗi yêu cầu quan trọng mà bạn phải thao tác. Google PageSpeed Insights không tính truy thuế kiểm toán này là ‘đã qua’ hoặc ‘không thành công xuất sắc’, không như nhiều khuyến nghị khác. tin tức này chỉ đơn thuần và giản dị là có sẵn để hỗ trợ cho bạn cải tổ thời hạn 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 tiến hành để tải những trang của bạn và tài nguyên mà sever của bạn trả lại càng lớn, website của bạn mất thời hạn 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 kiến nghị Tránh xâu chuỗi những đề xuất kiến nghị yêu cầu quan trọng , điều này sẽ không dẫn đến ‘vượt qua’ hoặc ‘thất bại’. Thay vào đó, bạn chỉ việc xem list số lượng yêu cầu được tiến hành 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ự đưa ra những tiêu chuẩn đó bằng phương pháp tạo ngân sách hiệu suất. Đây là một bộ những tiềm năng được xác lập trọn vẹn có thể tương quan đến những khía cạnh như:
Kích thước hình ảnh tối đaSố lượng phông chữ web được sử dụngCó bao nhiêu tài nguyên bên phía ngoài bạn gọi đếnKích thước của tập lệnh và khungTạo ngân sách hiệu suất phục vụ nhu yếu cho bạn một bộ tiêu chuẩn để tự phụ trách. Khi bạn vượt quá ngân sách của tớ, bạn cũng trọn vẹn có thể quyết định hành động về việc vô hiệu hoặc tối ưu hóa những tài nguyên để tuân thủ những nguyên tắc được xác lập trước. Bạn trọn vẹ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 to nhiều hơn mức thiết yếu, để giúp con người dễ đọc hơn. Chúng trọn vẹn có thể gồm có nhiều lợi nhuận vận chuyển rất khác nhau và không khí không thiết yếu cho máy tính để hiểu nội dung của chúng.
Giảm thiểu CSS của bạn là quy trình cô đọng những tệp của bạn bằng phương pháp vô hiệu những ký tự, khoảng chừng trắng và trùng lặp không thiết yếu. Google khuyến nghị thực hành thực tế này vì nó làm giảm kích thước tệp CSS của bạn và do đó trọn vẹn có thể cải tổ vận tốc tải:
Giảm thiểu đề xuất kiến nghị 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ỏ những tệp CSS của bạn.
5. Giảm thiểu JavaScript
Giống như bạn cũng trọn vẹn có thể giảm kích thước tệp CSS trải qua thu nhỏ, điều tương tự cũng vận dụng cho những tệp JavaScript của bạn:
Giảm thiểu đề xuất kiến nghị JavaScript
Tự động tối đa hóa hoặc WP Rocket cũng trọn vẹn có thể xử lý tác vụ này cho website 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 những người dân tiêu dùng. Nếu có CSS trên website 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à nguyên 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 kiến nghị CSS không sử dụng
Giải pháp ở đây về cơ bản tựa như giải pháp vô hiệu CSS chặn chặn kết xuất. Bạn trọn vẹ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 những trang của bạn. Bạn cũng trọn vẹn có thể sử dụng một công cụ như Chrome DevTools để tìm CSS chưa sử dụng nên phải tối ưu hóa.
7. Giảm thiểu việc làm chủ đề chính
‘Chủ đề chính’ là thành phần chính của trình duyệt của người tiêu dùng phụ trách biến mã thành website mà quý khách truy vấn trọn vẹn 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ó phụ trách xử lý những tương tác của người tiêu dùng.
Điều này tức là, khi luồng chính hoạt động giải trí và sinh hoạt trải qua mã website của bạn, nó cũng không thể xử lý những yêu cầu của người tiêu dùng. Nếu việc làm chủ đề chính của website của bạn mất quá nhiều thời hạn, điều này trọn vẹn có thể dẫn đến UX kém và thời hạn tải trang chậm.
Google PageSpeed sẽ gắn cờ những trang mất hơn bốn giây để hoàn thành xong việc làm chủ đề chính và trình diễn một website trọn vẹn có thể sử dụng:
Giảm thiểu đề xuất kiến nghị việc làm chính
Một số phương pháp được sử dụng để giảm việc làm chủ đề chính đã được đề cập trong những phần khác của bài đăng này, gồm có:
Giảm thiểu mã của bạnXóa mã không sử dụngTriển khai bộ nhớ đệmTuy nhiên, bạn cũng trọn vẹn có thể muốn xem xét tách mã. Quá trình này gồm có việc chia JavaScript của bạn thành những gói thực thi khi cần, thay vì yêu cầu trình duyệt tải toàn bộ chúng trước lúc trang trở nên tương tác.
Webpack thường được sử dụng để tiến hành phân tách mã. Lưu ý rằng đấy là một kỹ thuật khá tiên tiến và phát triển và người mới khởi đầu thường nên tiến hành một mình.
8. Giảm thời hạn thực thi JavaScript
Thực thi JavaScript thường là góp phần nổi trội nhất cho việc làm chủ đề chính. PageSpeed Insights có một đề xuất kiến nghị riêng để chú ý quan tâm bạn nếu tác vụ này còn có tác động đáng kể tới hiệu suất website của bạn:
Giảm đề xuất kiến nghị thời hạn tiến hành JavaScript
Các phương pháp được đề xuất kiến nghị ở trên để giảm việc làm của luồng chính cũng tiếp tục xử lý và xử lý chú ý quan tâm này trong kết quả PageSpeed của bạn.
9. Giảm thời hạn phản hồi của sever (TTFB)
Time to First Byte (TTFB) là thước đo thời hạn để trình duyệt nhận được byte tài liệu thứ nhất từ sever của website của bạn sau khoản thời hạn yêu cầu. Mặc dù điều này sẽ rất khác với vận tốc website tổng thể của bạn, nhưng có TTFB thấp là yếu tố tốt cho hiệu suất website của bạn.
Do đó, giảm thời hạn phản hồi của sever là một trong những đề xuất kiến nghị của Google PageSpeed Insights. Nếu bạn cũng trọn vẹn có thể đạt được TTFB thấp, những bạn sẽ thấy thông tin này trong phần Kiểm toán đã qua :
Thời gian phản hồi của sever là thông tin thấp
Có một số trong những yếu tố trọn vẹn có thể tác động đến TTFB của bạn. Một số kế hoạch để hạ thấp nó gồm có:
Chọn một nhà phục vụ nhu yếu dịch vụ tàng trữ web chất lượng caoSử dụng những chủ đề và plugin nhẹGiảm số lượng plugin được setup trên website của bạnSử dụng Mạng phân phối nội dung (CDN)Triển khai bộ nhớ đệm trình duyệtChọn nhà phục vụ nhu yếu Hệ thống Tên miền (DNS) vững chắc10. Hình ảnh kích thước thích hợp
Các tệp phương tiện đi lại như hình ảnh trọn vẹn có thể là lực cản thực sự so với hiệu suất website của bạn. Định cỡ đúng phương pháp dán là một cách đơn thuần và giản dị để giảm thời hạn tải của bạn:
Đề nghị kích thước hình ảnh thích hợp
Nếu trang của bạn gồm có những hình ảnh to nhiều hơn mức thiết yếu, 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 hạn hơn chỉ đơn thuần và giản dị là tải hình ảnh ở kích thước thích hợp ban sơ, do đó tác động đến hiệu suất trang của bạn.
Để khắc phục điều này, bạn cũng trọn vẹn có thể tải lên hình ảnh ở kích thước thích hợp hoặc sử dụng ‘hình ảnh phản hồi’. Điều này tương quan đến việc tạo hình ảnh có kích thước rất khác nhau cho những thiết bị rất khác nhau.
Các srcset thuộc tính xác lập những tập tin có sẵn rất khác nhau, và kích thước thuộc tính nói với những trình duyệt cái nào nên được sử dụng dựa vào kích thước màn hình hiển thị 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 hiển thị thường được gọi là ‘lười tải’. Điều này tức là thay vì làm cho trình duyệt tải mọi hình ảnh trên một trang trước lúc hiển thị nội dung trong màn hình hiển thị thứ nhất, nó sẽ chỉ tải những hình ảnh hiển thị ngay lập tức.
Tải thấp hơn trước đó lúc trang hiển thị tức là hiệu suất tốt hơn, đó là nguyên do tại sao Google khuyến nghị phương pháp này:
Trì hoãn đề xuất kiến nghị hình ảnh ngoài màn hình hiển thị
Có một số trong những plugin WordPress được tạo riêng cho việc tải lười biếng, gồm có 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 rất khác nhau như Tự động tối đa hóa cũng luôn có thể có những tính năng tải lười biếng.
12. Mã hóa hình ảnh hiệu suất cao
Đây cũng là phương pháp chính để tuân theo khuyến nghị của Google để mã hóa hình ảnh hiệu suất cao :
Đề xuất mã hóa hình ảnh hiệu suất cao
Điều quan trọng là đạt được kích thước tệp nhỏ nhất trọn vẹn 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 trọn vẹn có thể giúp với trách nhiệm này. Bạn trọn vẹ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 kiến nghị khác tác động đến việc bạn ‘vượt qua’ hay ‘thất bại’ việc truy thuế kiểm toán hình ảnh được mã hóa hiệu suất cao gồm có:
Phục vụ hình ảnh ở kích thước chính xácThực hiện tải lười biếng (trì hoãn hình ảnh ngoài màn hình hiển thị)Chuyển đổi hình ảnh sang định dạng tệp thế hệ tiếp theo, ví như WebPSử dụng định dạng video cho nội dung phim hoạt hình, ví như GIFNgoài việc nén hình ảnh của bạn, bạn cũng trọn vẹn có thể tuân theo tiến trình để tiến hành những đề xuất kiến nghị này như được mô tả ở nơi khác trong bài đăng này.
13. Phục vụ hình ảnh trong những định dạng thế hệ tiếp theo
Có một số trong những định dạng tệp hình ảnh tải nhanh hơn những định dạng khác. Thật rủi ro đáng tiếc, 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 tin 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 kiến nghị định dạng thế hệ tiếp theo
Điều này còn có vẻ như như thể một đề xuất kiến nghị khó phục vụ nhu yếu, vì bạn cũng trọn vẹn có thể đã có nhiều hình ảnh trên website WordPress của bạn. May mắn thay, có những plugin trọn vẹn có thể giúp sức. Ví dụ: Imagify và Smush đều phục vụ nhu yếu tính năng quy đổi WebP.
14. Sử dụng định dạng video cho nội dung phim hoạt hình
GIF trọn vẹn có thể là một hình thức nội dung trực quan hiệu suất cao trong nhiều trường hợp. Hướng dẫn hướng dẫn, định hình và nhận định tính năng và thậm chí còn phim hoạt hình vui nhộn đều trọn vẹn có thể nâng cao bài đăng của bạn và làm cho chúng thú vị hơn và có mức giá trị với fan hâm mộ.
Thật rủi ro đáng tiếc, những quyền lợi đó phải trả giá cho hiệu suất của bạn. GIF đang yêu thương cầu tải, đó là nguyên 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 kiến nghị nội dung phim hoạt hình
Thật rủi ro đáng tiếc, quy đổi GIF thành những định dạng video không phải là quy trình đơn thuần và giản dị nhất. Trước tiên, những bạn sẽ phải quyết định hành động loại video nào bạn muốn muốn sử dụng:
MP4: Tạo những tệp to nhiều hơn một chút ít, nhưng tương thích với hầu hết những trình duyệt chính.WebM: Định dạng video được tối ưu hóa tốt nhất, tuy nhiên nó có kĩ 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 website của tớ, những bạn sẽ cần quy đổi những định dạng tệp. Cách tốt nhất để làm điều này là trải qua dòng lệnh. Để khởi đầu, setup FFmpeg . Đây là một công cụ nguồn mở để quy đổi những định dạng tệp:
Công cụ quy đổ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ẽ quy đổ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 phải nhúng video kết quả vào website WordPress của tớ Theo phong cách làm cho nó xuất hiện như một GIF phim hoạt hình.
Nhúng nội dung video cho phim hoạt hình
Như bạn cũng trọn vẹn có thể nhận thấy nếu người mua đã từng xem GIF trước đó, chúng hơi khác so với những video thường thì. Chúng thường tự động hóa phát và chạy trên một vòng lặp, và chúng luôn không tồn tại âm thanh. Nhúng tệp MP4 hoặc WebM mới của bạn trên website WordPress của những bạn sẽ không còn tạo ra những tính năng này.
Tuy nhiên, bạn cũng trọn vẹn có thể tạo lại chúng với một số trong những mã rất đơn thuần và giản dị. Tải video của bạn lên thư viện phương tiện đi lại của bạn, tiếp sau đó thêm phần sau vào trang hoặc đăng nơi bạn muốn muốn đưa GIF của tớ vào:
<video autoplay loop muted playsinline>
<source src=”output.mp4″ type=”video/mp4″>
</video>
Điều này sẽ vận dụng những 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 thế nữa ‘tựa như GIF’. Chỉ cần trấn áp và điều chỉnh tên tệp và loại để phù thích phù hợp với tài nguyên của bạn. Để biết thêm rõ ràng về chủ đề này, Tài khuyên bạn nên đọc hướng dẫn của Google về việc quy đổi GIF thành video .
15. Đảm bảo văn bản vẫn hiển thị trong lúc tải Webfont
Giống như hình ảnh, phông chữ có Xu thế là những tệp lớn mất nhiều thời hạn để tải. Trong một số trong những trường hợp, trình duyệt trọn vẹn có thể ẩn văn bản của bạn cho tới khi phông chữ bạn đang sử dụng tải trọn vẹn, điều này sẽ dẫn đến đề xuất kiến nghị này từ Google PageSpeed Insights:
Đảm bảo văn bản vẫn hiển thị trong lúc đề xuất kiến nghị tải webfont
Google khuyên bạn nên xử lý và xử lý yếu tố này bằng phương pháp vận dụng thông tư hoán đổi API hiển thị phông chữ theo phong cách khuôn mặt @ phông chữ của bạn . Để tiến hành việc này, truy vấn 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 kiến nghị nén văn bản đề cập đến việc sử dụng nén GZIP:
Cho phép đề xuất kiến nghị nén văn bản
Trong một số trong những trường hợp (như bạn cũng trọn vẹn có thể thấy trong hình trên), nén văn bản sẽ tiến hành bật tự động hóa trên sever của bạn. Nếu đây không phải là trường hợp cho website của bạn, bạn có một vài lựa chọn để tuân theo khuyến nghị này.
Đầu tiên là setup một plugin có tính năng nén GZIP. WP Rocket là một giải pháp khả thi nếu người mua sẵn sàng trả tiền cho nó.
Bạn cũng trọn vẹn có thể nén văn bản của bạn bằng tay thủ công. Điều này tương quan đến việc sửa đổi tệp .htaccess của bạn , trọn vẹn có thể có rủi ro đáng tiếc, vì vậy hãy đảm bảo bạn có bản sao lưu mới gần đây.
Hầu hết những website WordPress chạy trên sever Apache. Mã được cho phép nén GZIP trông như vậy này:
17. Kết nối với nguồn gốc thiết yếu
Rất trọn vẹn có thể bạn cũng trọn vẹn có thể có tối thiểu một tài nguyên của bên thứ ba trên website của tớ – Google Analytics là một ví dụ phổ cập. Có thể mất thời hạn để trình duyệt thiết lập liên kết với những tài nguyên này, làm chậm vận tốc tải của bạn.
Sử dụng những thuộc tính liên kết trước trọn vẹn có thể cho những trình duyệt biết ngay rằng có những tập lệnh của bên thứ ba trên trang của bạn nên phải tải. Quá trình yêu cầu họ tiếp sau đó trọn vẹn có thể khởi đầu càng sớm càng tốt, cải tổ hiệu suất của bạn.
Nếu Google cảm thấy rằng trang của bạn cũng trọn vẹn có thể được hưởng lợi từ kỹ thuật này, những bạn sẽ thấy đề xuất kiến nghị 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 kiến nghị nguồn gốc thiết yếu
Có một vài phương pháp để tiến hành kế hoạch tối ưu hóa này. Nếu bạn cảm thấy tự do với việc sửa đổi những tệp chủ đề WordPress của tớ, bạn cũng trọn vẹn có thể thêm thẻ link vào tệp header.php của tớ . Đây là một ví dụ:
<link rel=“preconnect” href=“example.com”>
Trong trường hợp này, thẻ thông tin cho những trình duyệt rằng họ thiết yếu lập liên kết đến example.com càng nhanh càng tốt. Google PageSpeed Insights sẽ liệt kê mọi tài nguyên có tương quan mà bạn nên thêm những thẻ link với những thuộc tính liên kết trước.
Tùy chọn khác là sử dụng một plugin để đạt được hiệu suất cao tương tự. Perfmatters là một trong những Plugin Tài phục nhất về kĩ năng tối ưu hóa WordPress
18. Yêu cầu tải trước
Tương tự như Đề xuất liên kết với nguồn gốc được yêu cầu , theo đề xuất kiến nghị này được cho phép bạn giảm thiểu số lượng yêu cầu mà trình duyệt phải tiến hành so với sever của website của bạn. Tuy nhiên, thay vì liên kết với tài nguyên của bên thứ ba, những yêu cầu chính của Tải trước tương quan đến việc tải những tài sản quan trọng trên sever của riêng bạn:
Tải trước yêu cầu chính yêu cầu
Việc tiến hành kỹ thuật này cũng rất giống với khuyến nghị trước đó. Bạn trọn vẹn có thể thêm những thẻ link chỉ định những tài nguyên được liệt kê trong PageSpeed Insights vào tệp header.php của bạn :
<link rel=“preload” href=“example.com”>
Bạn cũng trọn vẹn có thể phối hợp thẻ này bằng phương pháp 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 toàn bộ chúng ta mong ước muốn một URL trỏ đến một URL khác. Chúng thường được sử dụng khi toàn bộ chúng ta dịch chuyển hoặc xóa một trang trên website của bạn. Mặc dù không tồn tại 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 hạn tải.
Nếu bạn có quá nhiều chuyển hướng trên website của tớ, bạn cũng trọn vẹn có thể thấy đề xuất kiến nghị này trong Google PageSpeed Insights:
Tránh đề xuất kiến nghị chuyển hướng nhiều trang
Điều duy nhất bạn cũng trọn vẹn có thể làm để đáp lại đề xuất kiến nghị này là đảm bảo bạn chỉ sử dụng chuyển hướng khi toàn bộ chúng ta thực sự phải làm.
20. Phục vụ tài sản tĩnh với quyết sách bộ nhớ cache hiệu suất cao
Nếu bạn đã sử dụng Google PageSpeed Insights thuở nào hạn, bạn cũng trọn vẹn có thể biết rõ hơn về đề xuất kiến nghị này như chú ý quan tâm 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 quyết sách bộ nhớ cache hiệu suất cao :
Máy chủ tài sản tĩnh với đề xuất kiến nghị quyết sách bộ đệm hiệu suất cao
Đề xuất này còn có một vài lớp toàn bộ chúng ta nên phải trải qua. Đầu tiên là “bộ nhớ đệm” nghĩa là gì. Nói tóm lại, đó là một quy trình trong số đó trình duyệt lưu những bản sao của trang của bạn, để chúng trọn vẹn có thể được tải nhanh hơn trong những lần truy vấn trong tương lai.
Cách phổ cập nhất mà những website WordPress triển khai bộ nhớ đệm là với những plugin . WP Rocket và W3 Total Cache là những tùy chọn phổ cập.
Khi bạn đã bật bộ đệm cho website của tớ, bạn cũng trọn vẹn có thể lo ngại về phần thứ hai của đề xuất kiến nghị này, đó là “hiệu suất cao” của quyết 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 những bản sao được update.
Lý tưởng nhất, bạn muốn muốn khoảng chừng thời hạn này cao hơn nữa thay vì thấp hơn. Nếu bạn xóa website của tớ khỏi bộ nhớ cache trong vài giờ, điều này sẽ vượt mặt mục tiêu sử dụng kỹ thuật này ngay từ trên đầu. Bạn trọn vẹn có thể tối ưu hóa thời hạn bộ nhớ cache hết hạn sử dụng Cache-Control và Expires tiêu đề.
Thêm tiêu đề trấn áp bộ đệm
Sử dụng mã tại đây để thêm những 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 thông số kỹ thuật kỹ thuật sever của bạn. Trong ví dụ trên, những loại tệp được chỉ định sẽ hết hạn sau 30 ngày.
Thay vào đó, những người dân có sever Apache nên sử dụng đoạn mã này trong những tệp .htaccess của mình :
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
</filesMatch>
Thêm mã này trước #BEGIN WordPress hoặc sau #END WordPress . Trong ví dụ này, thời hạn 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 lúc bấy giờ là quá nhiều tiêu chuẩn. Tuy nhiên, có một số trong những công cụ (gồm có GTMetrix) vẫn kiểm tra những tiêu đề Hết hạn .
Bạn trọn vẹn có thể thêm chúng vào sever Nginx bằng phương pháp phối hợp những mục sau vào khối sever của bạn:
location ~* .(jpg|jpeg|gif|png|svg)$
expires 365d;
location ~* .(pdf|css|html|js|swf)$
expires 2d;
Bạn nên được đặt thời hạn hết hạn rất khác nhau dựa vào những loại tệp. Các sever Apache sẽ tạo ra kết quả tương tự nếu người mua thêm mã này vào tệp .htaccess của tớ :
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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”
</IfModule>
## 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 suất cao của Google Analytics
Trớ trêu thay, tập lệnh Google Analytics mà bạn cũng trọn vẹn có thể đã thêm vào tiêu đề trang của tớ để theo dõi hành vi của người tiêu dùng có thời hạn hết hạn bộ nhớ cache chỉ hai giờ. Điều này còn có kĩ năng vì vậy, nếu những bản update được tiến hành cho nền tảng, người tiêu dùng sẽ đã có được quyền truy vấn vào những thay đổi một cách nhanh gọn.
Tập lệnh này sẽ xuất hiện trong list những tài nguyên yêu cầu sự để ý của bạn trong Phục vụ tài sản tĩnh với đề xuất kiến nghị quyết sách bộ đệm hiệu suất cao . Vì nó thuộc về bên thứ ba, bạn không thể thay đổi thời hạn hết hạn với những 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 trọn vẹn có thể vượt qua truy thuế kiểm toán:
Đã qua truy thuế kiểm toán quyết sách bộ nhớ cache hiệu suất cao
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 tiễn và cảm nhận của bạn. Để phục vụ tài nguyên này một cách hiệu suất cao, bạn cũng trọn vẹn có thể xem xét việc tàng trữ Google Analytics tại địa phương.
Các plugin như Bộ tối ưu hóa phân tích hoàn hảo nhất (CAOS) và Perfmatters sẽ tiến hành cho phép bạn tiến hành 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 rất khác nhau trong số đó những tập lệnh của bên thứ ba trọn vẹn có thể tác động xấu đi đến hiệu suất của bạn và dẫn đến việc kiểm tra không thành công xuất sắc từ tin tức rõ ràng 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 những công cụ này để ngăn ngừa những tác động bất lợi.
Tuy nhiên, trong một số trong những trường hợp, giải pháp tốt nhất cho nhu yếu website của bạn là phối 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 gồm có:
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à thiết yếu, điều quan trọng là vẫn phải giảm tác động của nó đến hiệu suất website của bạn, vì kết quả phân tích PageSpeed của những 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 suất cao hơn nữa, bạn cũng trọn vẹ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 JavaScriptSử dụng thẻ link với những thuộc tính kết nốiTự tàng 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 website của bạn.
22. Tránh tải trọng mạng rất rộng
Đề xuất này đặc biệt quan trọng có tương quan đến quý khách truy vấn di động của bạn. Tải trọng lớn trọn vẹn có thể yêu cầu sử dụng nhiều tài liệu di động hơn, do đó làm mất đi tiền của người tiêu dùng. Giảm thiểu số lượng yêu cầu mạng thiết yếu để truy vấn những trang của bạn cũng trọn vẹn có thể ngăn ngừa điều này:
Tránh đề xuất kiến nghị 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 tớ ở tại mức 1.600 KB trở xuống. Các phương pháp được sử dụng phổ cập nhất để đạt được tiềm năng này được tìm thấy trong suốt bài đăng này, gồm có:
Trì hoãn CSS, JavaScript và hình ảnh dưới màn hình hiển thị đầu tiênGiảm thiểu mãNén tập tin hình ảnhSử dụng định dạng WebP cho hình ảnhTriển khai bộ nhớ đệmThực hiện theo tiến trình có tương quan cho những kế hoạch này và bạn nên vượt qua cuộc truy thuế kiểm toán này mà không cần bất kỳ nỗ lực bổ trợ update nào.
23. Dấu thời hạn và giải pháp của người tiêu dùng
Đề xuất này chỉ có tương quan nếu người mua đang sử dụng API thời hạn của người tiêu dùng . Công cụ này tạo dấu thời hạn để hỗ trợ cho bạn định hình và nhận định hiệu suất JavaScript của tớ. Nếu bạn đã thiết lập API cho website của tớ, những bạn sẽ thấy những thương hiệu và giải pháp của tớ trong tiêu đề này trong PageSpeed Insights:
Dấu thời hạn của người tiêu dùng và những giải pháp khuyến nghị
Như bạn cũng trọn vẹn có thể thấy, đấy là một đề xuất kiến nghị khác của Google mà không dẫn đến ‘vượt qua’ hoặc ‘thất bại’. PageSpeed Insights chỉ đơn thuần và giản dị là làm cho thông tin này trọn vẹn có thể truy xuất thuận tiện và đơn thuần và giản dị, vì vậy bạn cũng trọn vẹn có thể sử dụng nó để định hình và nhận định những khu vực trọn vẹn có thể yêu cầu tối ưu hóa.
Nếu bạn quan tâm đến việc phối hợp API thời hạn người tiêu dùng vào website WordPress của tớ, bạn cũng trọn vẹ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 thuần và giản dị nhất, DOM là cách những trình duyệt biến HTML thành những đối tượng người tiêu dùng. Nó tương quan đến việc sử dụng cấu trúc cây được tạo thành từ những nút riêng lẻ mà mỗi nút đại diện thay mặt thay mặt cho một đối tượng người tiêu dùng. Đương nhiên, DOM trang của bạn càng lớn thì thời hạn tải sẽ càng lâu.
Nếu trang của bạn vượt quá những 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 kiến nghị kích thước DOM quá mức cần thiết
Thủ phạm phổ cập nếu người mua ‘thất bại’ cuộc truy thuế 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 những yếu tố vào DOM và cũng trọn vẹn có thể gồm có mẫu mã phức tạp làm chậm website của bạn. Nếu đấy là trường hợp, bạn cũng trọn vẹn có thể nê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ị website 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ẽ rằng không phải là cách sử dụng tốt nhất thời hạn của bạn. Nó trọn vẹn có thể đưa bạn thoát khỏi những trách nhiệm quan trọng khác trọn vẹn có thể phục vụ nhu yếu quyền lợi quan trọng hơn.
Trong bài đăng này, Tài đã đề cập đến những cách mà Google PageSpeed Score tiến hành và không quan trọng. Tài đã và đang san sẻ một số trong những hướng dẫn ngắn gọn để lấy những đề xuất kiến nghị của nền tảng hoạt động giải trí và sinh hoạt trên website WordPress của bạn, để cải tổ hiệu suất của nó.
Bạn có vướng mắc về Google PageSpeed Insights hoặc tối ưu hóa hiệu suất website của bạn không?
0
0
votes
Article Rating
Review
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
?
Một số hướng dẫn một cách rõ ràng hơn về Review
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
tiên tiến và phát triển nhất .
ShareLink Tải
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
miễn phí
Bann đang tìm một số trong những Share Link Down
Google PageSpeed Insights: Sự thật về việc chấm điểm 100/100
Free.
#Google #PageSpeed #Insights #Sự #thật #về #việc #chấm #điểm