Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Tối ưu Google PageSpeed lên 100 trong WordPress

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Hands On Improving Google PageSpeed
Installing the Google PageSpeed Module

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Final product image
What You'll Be Creating

Làm thế nào để đạt PageSpeed thành 100

Chào mừng bạn đến với phần hai của loạt bài về Google PageSpeed. Trong phần đầu tiên, tôi đã tối ưu hóa tốc độ PageSpeed ​​của theme cho website của tôi, MySiteMyWay's Construct. Tôi đã cố gắng đạt được 70 trên Mobile (thiết bị di động) và 86 cho Desktop (máy tính để bàn).

Tuy nhiên, với việc đóng cửa MySite, tôi đã chọn một theme mới và đạt được tốc độ 100 PageSpeed ​​cho Mobile và Desktop. Tôi đã mất khoảng 12 giờ để thực hiện. Bây giờ, hiệu suất website của tôi là một trong những trang WordPress nhanh nhất mà tôi từng thấy trong một thời gian dài — hãy kiểm tra nó. Duyệt trang gần như tức thời.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách thực hiện điều này và những gì tôi được học về WordPress và Google PageSpeed. Trong phần lớn thời gian tôi làm việc với nó, tôi từng nghĩ tôi có thể đạt được khoảng 90. Tôi đã có chút ngạc nhiên khi nó đột ngột tăng vọt đến 100 cho Desktop - và chỉ còn một vài chi tiết cần để tối đa hóa Mobile.

Cho những ai chưa biết, Google PageSpeed ​​là một công cụ miễn phí để đánh giá hiệu suất và khả năng sử dụng của website của bạn cho nền tảng mobile và desktop. Điều này rất quan trọng vì Google dùng nó để xác định các yếu tố quan trọng khi xếp hạng SEO của chúng ta, tức là chúng ta xuất hiện như thế nào trong kết quả tìm kiếm.

Nếu bạn muốn biết thêm thông tin về lợi ích của việc tăng tốc độ website, hãy đọc phần Why Site Speed Optimisation Should Be Part of Your SEO Strategy của Moz. Điểm nổi bật, "... một số nghiên cứu tiêu biểu đã cho thấy các trang tải nhanh hơn có tương quan mạnh mẽ đến doanh thu cao hơn".

Google và WordPress khiến điều này không dễ dàng

Cuối cùng, việc tối ưu hóa PageSpeed tốn rất nhiều thời gian và công sức và làm khỏi website của tôi dễ bị tấn công trước các bản cập nhật script của Google và plugin trong tương lai. Công việc này dễ xáo trộn, cần định hướng chi tiết và tiêu tốn thời gian. Cũng gây buồn chán và một chút phát điên. Cảm ơn, Google.

Một trang tĩnh thường có một file kèm với CSS và JS có thể dễ dàng được rút gọn và kết hợp. WordPress phức tạp hơn rất nhiều. Do vậy, nhiều thứ được tự động tạo ra thông qua WordPress - không bằng một cấu trúc hoàn hảo.

Có thể tốn thời gian để tìm các file đang được tạo ra, cho dù chúng ở trong theme hoặc plugin và làm sao để giải quyết các vấn đề này. Khi bạn có 7 plugin bao gồm các file JavaScript và bạn muốn thu gọn và kết hợp chúng thành một trong khi vẫn cho phép nâng cấp plugin thường xuyên, đó là một thách thức trong thế giới WordPress luôn luôn thay đổi các theme và plugin.

Điều này khiến rất nhiều nhà phát triển buồn rầu:

PageSpeed Like a Sad Developer by Picasso Paris France

Photo credit: Ảnh của tôi từ Picasso Museo in Paris. Giờ đây có thể được gọi là "Sad Developer Confornting PageSpeed of Mobile 55 / Desktop 62"

Điều đó nói rằng, hãy để tôi động viên bạn bằng chỉ cho bạn tôi đã làm điều đó như thế nào (bạn không có việc gì làm vào ngày hôm nay, phải không?). Hãy ghi nhớ, nhu cầu website của bạn có thể khác với tôi một chút.

Trước khi chúng ta bắt đầu, hãy nhớ là tôi luôn cố gắng tham gia vào các cuộc thảo luận bên dưới. Nếu bạn có một câu hỏi hoặc đề xuất về theme, xin vui lòng đăng bình luận bên dưới hoặc liên hệ với tôi trên Twitter @reifman. Tôi có hứng thú với trải nghiệm của bạn cùng WordPress và PageSpeed.

Các bước cơ bản để đạt PageSpeed ​​100

Chọn một theme mới

Nếu bạn đang có hứng thú mua một theme WordPress mới và muốn đánh giá PageSpeed, có thể bạn sẽ ngạc nhiên rằng điểm số cho các theme nổi tiếng thường nằm trong khoảng 60 và 70 nhưng cũng lên đến 90. Dưới đây là một số bài viết đánh giá các theme và PageSpeed ​​qua ColorLibWPMU. Trong mọi trường hợp, tôi mong đợi cao hơn.

Cũng giống như một ví dụ về kỳ vọng của ngành, website The New York Times đạt 53/55 điểm, thấp hơn rất nhiều so với 100.

PageSpeeds của các theme khác nhau bị tác động nhiều bởi số lượng và kích thước của file JavaScript và CSS mà các theme sử dụng, số lượng hình ảnh được sử dụng và kích thước của chúng cũng như cách tiếp cận triển khai trên mobile của họ, điển hình là responsive (đáp ứng) hiện nay. Các tác giả dường không như quan tâm đến PageSpeeds của họ khi họ tạo theme.

Array Themes Medium

Đối với hướng dẫn này, tôi sẽ tập trung vào việc cải thiện website cá nhân của tôi, JeffReifman.com. Tôi đã chọn Medium từ Array Themes vì ​​một vài lý do.

Đầu tiên là tốc độ căn bản của nó. Điểm trung bình Mobile 74 và Desktop 89 bắt đầu từ máy chủ demo của họ. Trong khi theme tốt hơn một chút so với tôi đã tối đa hóa Construct, đó là một theme hiện đại hơn và còn có rất nhiều bước tối ưu hóa mà tôi có thể thử. Tôi hy vọng sẽ đẩy PageSpeed ​​lên đến 80 hoặc 90.

Ngoài ra, với sự tăng trưởng của độc giả trên mobile, tôi muốn tránh khỏi việc dựa vào sidebars — đặc biệt là cho vị trí quảng cáo (tôi hy vọng sẽ viết về các định hướng doanh thu mới trong loạt bài Google DFP đang diễn ra). Theme Medium thực hiện tốt công việc biến sidebar bên trái thành một menu responsive và ẩn đi sidebar bên phải.

PageSpeeds ban đầu của Medium

Đây là PageSpeeds đầu tiên cho bản demo của Medium (hosting của demo không bao giờ được tối ưu hóa chặt chẽ). Điều này thực sự đáng khích lệ cho thấy có rất nhiều vấn đề chưa giải quyết vì nó cho thấy Medium tốt hơn Construct đã tối ưu của tôi trước khi có thêm nỗ lực được áp dụng và các nhiệm vụ tương tự mà tôi từng thực hiện để tối đa hóa điểm số của nó:

PageSpeed Optimization Array Themes Mobile Part A

Dưới đây là nhiều vấn đề khác:

PageSpeed Optimization Array Themes Mobile Part B

Và hơn thế nữa:

PageSpeed Optimization Array Themes Mobile Part C

Và những thách thức về trải nghiệm người dùng, được bản địa hóa nhiều hơn:

PageSpeed Optimization Array Themes Mobile Part D

Cuối cùng, đây là điểm cho demo trên Desktop:

PageSpeed Optimization Array Themes Desktop Just One Part

Được động viên qua điểm số cơ sở, tôi đã mua và cài đặt theme Medium trên máy chủ của mình và đã hoạt động.

Hãy nhớ rằng việc thay đổi theme có thể khá phức tạp. Đối với tôi, việc thay thế, loại bỏ và cập nhật shortcode tích hợp từ theme Construct tốn nhiều thời gian nhất, và tôi chưa hoàn thành, ví dụ: dropcaps, pullquote variations, buttons, tabs and page-based navigation menus. Ổ đĩa của tôi cho 100 đã làm tôi chậm chạp tiên tới dù thế nào. How to Perform Mass Search and Replace in WordPress đề xuất một số giải pháp tốt cho việc tìm kiếm và thay thế shortcodes.

Mặc dù hướng dẫn này sẽ không hướng dẫn bạn từng bước chính xác để tăng PageSpeed ​​lên 100 cho website của bạn, nhưng sẽ hướng dẫn bạn nhiều giải pháp khả thi và xác định những rào chắn thường gặp. Có một nguồn tài nguyên khái quát tuyệt vời khác mà tôi sẽ chia sẻ ở cuối bài.

Nền tảng của hiệu suất trong WordPress

Tôi đã liên hệ với ArrayThemes một chút về hiệu suất demo dưới 100 của theme Medium. Họ đã gửi một phản hồi tuyệt vời:

Thử nghiệm tối ưu hóa PageSpeed ​​không thể tin tưởng hoàn toàn ... bản demo của chúng tôi đang được khắc phục để không lưu vào bộ nhớ cache, nhưng chúng tôi thực sự không cần lưu vào bộ nhớ đệm cho các bản demo của chúng tôi ... Các đề xuất từ PageSpeed ​​không hoàn toàn chính xác hoặc là kiểu mẫu cho hiệu suất của một theme. Nó sẽ phụ thuộc hoàn toàn vào việc thiết lập, máy chủ, bộ nhớ đệm và các tối ưu hóa khác mà bạn quyết định thực hiện.

Đây là khởi đầu hoàn hảo để xem xét các yếu tố cơ bản chung cho hiệu suất WordPress. Tất cả các lĩnh vực hiệu suất bên dưới đều đề cập đến điểm số PageSpeed ​​cơ bản, không hoàn toàn trừ những điều cơ bản.

Caching

Caching (lưu bộ nhớ đệm) của WordPress rất quan trọng đối với hiệu suất và tôi thường xuyên viết về các chủ đề yêu thích của mình: W3TC và Varnish Cache, ví dụ: Optimizing WordPress with Varnish and W3 Total Cache

Google PageSpeed improved with W3 Total Cache

Nó chỉ ra rằng có một số ít các plugin được thiết kế nhằm giúp bạn đưa vào những thách thức của bộ nhớ đệm hiệu quả. Dưới đây là hai trong số những plugin tốt nhất mà tôi đã thử:

  • Minit: Một plugin WordPress để kết hợp các file CSS và JavaScript.
  • Dependency Minification: Tự động ghép nối và rút gọn bất kỳ script và stylesheet nào được xếp vào hàng bằng cách sử dụng hệ thống phụ thuộc tiêu chuẩn.
PageSpeed Dependency Minification Plugin

Hình ảnh tín dụng: WordPress Tavern

Cả hai đều hữu ích, nhưng với tôi không phải các rào cản hoàn toàn bị loại bỏ có liên quan đến PageSpeed, chẳng hạn như nhúng CSS vào thẻ head của tôi để loại bỏ các vấn đề về PageSpeeds; nói cách khác, plugin này sẽ không thể gíup bạn đạt tới 100 PageSpeeds. Tôi từng thấy Minendency Minification hiệu quả và hữu ích, nhưng tôi đã từ bỏ vì sự thiếu linh hoạt của nó.

Cuối cùng, tôi lần nữa quay trở về với W3 Total Cache và tìm những cách mới hữu ích hơn để thúc đẩy hiệu suất. Nó không hoàn hảo và chắc chắn có một số lỗi UX, hoạt động tốt theo nhiều cách để tôi tìm ra cách của mình với các phương pháp khác để đạt PageSpeed ​​100.

Cuối cùng, tôi chỉ chọn một plugin mới giúp dễ dàng loại bỏ các vấn đề của PageSpeeds với Disqus — Tôi sẽ đánh giá nhiều hơn bên dưới.

Mạng phân phối nội dung (CDN)

Một dịch vụ quan trọng khác là mạng phân phối nội dung. Trước đó tôi đã viết bài Accelarate Your Content Delivery With KeyCDN trên Envato Tuts+ và sau đó quyết định chuyển sang họ như một khách hàng.

Optimizing PageSpeed - KeyCDN Dashboard

Sau cùng, có rất nhiều CDN mà bạn có thể chọn, chẳng hạn vài cái tên như CloudFlareRackSpace.

Tối ưu hóa hình ảnh

Gần đây, tôi bắt đầu thử nghiệm dịch vụ tối ưu hóa hình ảnh Optimus mới và plugin WordPress từ KeyCDN. Có một khả năng nhỏ là nó được vận hành bởi các rô bốt được xây dựng với Apple Lisas và Mac cũ kỹ:

PageSpeed Optimus Image Optimization

Nó hoạt động tốt, nhưng có một lựa chọn phổ biến khác là WP-Smush, một plugin lâu đời hơn với hơn 300.000 người dùng.

Loại bỏ Render Blocking

Nếu bạn có nhiều file cần phải được tải cho style (CSS) và kích hoạt (JS) chức năng website của bạn, hầu hết các trình duyệt sẽ chậm đi sau 4 tài nguyên được yêu cầu cùng lúc.

Dưới đây là ví dụ về than phiền của CSS render blocking trong PageSpeed:

PageSpeed Remove render blocking in JS and CSS

Đây có thể là một mục WordPress khó loại bỏ do kiến trúc của theme và plugin. Chúng tôi sẽ trở lại điều này.

Những bước cuối cùng đưa website của tôi đạt đến 100?

Phương pháp tiếp cận tối ưu hóa được định mục tiêu

Nếu bạn đã thực hiện tất cả các vấn đề cơ bản quan trọng ở trên, việc cải thiện PageSpeed ​​của bạn với WordPress sẽ đòi hỏi nỗ lực đáng kể và có thể tốn khá nhiều thời gian.

Hãy đi từng bước xem các vấn đề được xác định và làm thế nào để tôi giải quyết chúng. Trong sự thật, tôi đã thực hiện một lượng lớn các thử nghiệm với các công cụ và phương pháp tiếp cận khác nhau. Tôi thường xuyên bỏ một cách tiếp cận và trở lại một cách khác. Giải pháp của tôi hóa ra lại là một giải pháp chắp vá khá tốt. Con đường không phải là Yoda trực tiếp.

Giảm thiểu HTML, JavaScript và CSS

Ví dụ, đây là cách bạn giảm thiểu HTML trong W3 Total Cache:

PageSpeed W3TC Minification of HTML

Đóng gói JavaScript ở cuối trang

Tương tự, giảm thiểu JavaScript trong W3 Total Cache thật dễ dàng. Lưu ý dưới đây rằng tôi đang hướng dẫn W3TC nhúng file compressed (đã nén) không trong thẻ thay vào đó là ngay trước thẻ Việc trì hoãn JavaScript có thể cải thiện điểm số PageSpeeds của bạn.

PageSpeed W3TC Minification of JavaScript

Giảm thiểu CSS kết hợp từ chủ đề và plugin

Bởi vì cả theme và plugin đều sử dụng JavaScript và CSS, phải tốn chút công sức để thu nhỏ chúng cùng nhau và kết hợp chúng thành một file duy nhất (và điều đó vẫn không đủ cho PageSpeed, tôi sẽ thảo luận điều này thêm bên dưới).

Để chặn các plugin tải CSS của riêng nó và hướng dẫn W3TC tải các phiên bản được nén và kết hợp, bạn cần tìm trình xử lý của plugin cho file CSS (khác với tên file) và thêm code vào theme của bạn để làm gián đoạn hướng dẫn tải plugin. Sau đó, nhập đường dẫn đến từng file CSS trong hộp thoại W3TC ở trên để được tải cùng với các file khác.

Blogger Justin Tadlock đề xuất một số hướng dẫn giải thích làm sao để yêu cầu WordPress không tải các file CSS mà các plugin của tôi đã xếp hàng để tải. Câu trả lời là hủy đăng ký chúng và sau đó tự tải một file đã được kết hợp.

Đây là plugin Table of Contents của tôi, cung cấp các file JS và CSS:

Theo gợi ý của Tadlock, tôi đã hủy đăng ký plugin của mình trong file functions.php của theme, bắt đầu với CSS — bạn phải tìm các tham chiếu được nhà phát triển plugin sử dụng:

Tôi đã tự tạo ra một file CSS được kết hợp với 3 file stylesheet cho plugin đó. Sau đó, tôi yêu cầu W3TC rút gọn và kết hợp file đó vào stylesheet mega của riêng nó như được hiển thị ở trên.

Tối ưu hóa CSS đang tải cho PageSpeed

W3TC có thể kết hợp tất cả các file plugin và theme của tôi, nhưng PageSpeed ​​vẫn không thích nhìn thấy ngay cả một CSS đi kèm (rất nhiều thực hành phát triển HTML tốt):

PageSpeed Failing you because you still have one CSS file

Cuối cùng tôi đã tải chín file CSS (chỉ bảy file được hiển thị bên dưới). Thứ nhất, bạn phải tìm các trình điều khiển plugin cho CSS và hủy đăng ký chúng trong theme của bạn như được mô tả ở trên. Sau đó, bạn phải dẫn tất cả đến W3TC.

Trong khi có một số cách để có được một phiên bản rút gọn của tất cả những file này, thì tôi thực sự chỉ cần lấy file nén của W3TC. Tôi đã xóa tất cả đối số truy vấn bộ nhớ đệm, ví dụ: ?cbe3w2, với chức năng tìm kiếm và thay thế TextEditor. Tôi vẫn là người dùng trung thành của TextMate, nhưng nó thực sự có sự chậm trễ lớn và treo bất cứ khi nào tôi cố gắng điều hướng file CSS được rút gọn. Vì vậy, TextEditor đã giúp tôi chỉnh sửa các file đơn lẻ. Xin lỗi với những người theo chủ nghĩa thuần túy, tôi vẫn chưa chuyển sang Sublime.

Trong khi điều đó hiệu quả với tôi để dán CSS đã thu gọn của tôi vào header của tôi, sau đó tôi cần phải thay đổi nó để tự động lấy nội dung của các file CSS và in nó

Khi tôi đã thêm một plugin khác để chia sẻ trên mạng xã hội, pasting không còn hiệu quả nữa và tôi phải tách các file bằng cơ chế phía trên. Điều này mang lại sự linh hoạt hơn cho tương lai. Google PageSpeed ​​không bao giờ thấy điều này và bộ nhớ cache Varnish của tôi ẩn giấu bất kỳ sự chậm trễ nào trong việc bao gồm hai file.

Cuối cùng, tôi đã cấu hình tất cả các file CSS của mình trong W3TC, tạo các copy của các file đã nén và sau đó tắt tính năng trong đó:

PageSpeed W3TC Now Disabled - but prior used to compress all the CSS files

Một thiếu sót của W3TC là nó liên tục hiển thị các thông báo lỗi gây phiền nhiễu mặc dù bạn đang cố tình sử dụng nó theo một cách khác thường.

Khi di chuyển file CSS ra khỏi thư mục plugin, hãy đảm bảo bạn đặt đường dẫn tương đối chính xác cho hình ảnh và v.v. để hoạt động từ thư mục gốc của website. Tôi đã gặp rất nhiều tình huống mà hình ảnh sẽ không tải lên cho đến khi tôi tìm ra chỗ để giải quyết. Tôi sẽ chia sẻ một ví dụ trong phần Troubleshooting bên dưới.

Caching các script bên ngoài trong trình duyệt

Thật thú vị, PageSpeed ​​của Google phàn nàn nếu bạn tải các thư viện JavaScript của nó bên ngoài. Tôi đã nhận được các cảnh báo cho các script bên ngoài liên quan đến Flickr, Disqus và Google Analytics:

PageSpeed Leverage Browser Caching from External Scripts

Điều này trở thành một trở ngại lớn và đòi hỏi rất nhiều thời gian và phức tạp để giải quyết triệt để những vấn đề này.

Xóa các vấn đề của Flickr

Đầu tiên, gần đây tôi đã trở lại từ một chuyến đi đến Ấn Độ và đưa các bài viết trên blog riêng lẻ có hình ảnh nhúng từ Flickr trên trang chủ. Theme Medium của tôi nhanh chóng cuộn qua một số bài viết, do đó, PageSpeed ​​đã kêu ca về tất cả các bài viết.

PageSpeed Cobra photo from India

Sau khi quan sát rằng PageSpeed ​​đã phàn nàn về kích thước hình ảnh được nhúng vào do Flickr lưu trữ (với số lượng pixel khác nhau) và nhìn thấy các đoạn JavaScript bên ngoài này, tôi đã tự lưu trữ hình ảnh được tối ưu hóa trên website của mình. Họ vẫn liên kết với Flickr cho album Ấn Độ của tôi.

Đây là một ví dụ tốt về cách cố gắng sử dụng dịch vụ mạnh mẽ từ bên thứ ba với mục đích đơn giản là nhúng ảnh sẽ triệt tiêu điểm số PageSpeed ​​của bạn. Flickr đã hoàn thành việc tối ưu để giúp người dùng WordPress giải quyết vấn đề này. Chỉ là một ví dụ, họ sẽ cần phải:

  • đề xuất các kích thước nhúng file làm hài lòng PageSpeeds trong việc tối ưu hình ảnh (có thể tách biệt các chọn lựa xuất đã giảm xuống — về chất lượng hình ảnh của Flickr)
  • công khai code JavaScript một cách dễ dàng để tích hợp vào các file kết hợp WordPress và W3TC

Các File JavaScript Self-Hosting bên ngoài

Với các file Google còn lại của tôi, giải pháp tốt nhất là lưu trữ copy cục bộ của các script cho Analytics và DFP và sử dụng các script về cron để thường xuyên cập nhật chúng trên máy chủ.

Đầu tiên, tôi đã ngừng sử dụng plugin Google Analytics của mình và thêm code được tự sửa đổi vào header trong theme của tôi:

Lưu ý rằng tôi đã thay đổi đường dẫn đến các copy cục bộ của các script. Sau đó, tôi đã tạo các copy cục bộ của các script cho Google Analytics và Google DFP, và ngay sau khi bộ nhớ đệm trình duyệt của tôi được giải quyết trong PageSpeeds ngoại trừ Disqus.

Giải quyết vấn đề tải của plugin Disqus

Tôi không chắc liệu nó có bảo mật hay hỗ trợ đa nền tảng hay "thông minh" thuần túy, nhưng Disqus và các nhà cung cấp khác như Flickr dường như che khuất các file thực sự mà họ đang tải với các file khác. Điều này làm cho việc tối ưu hóa PageSpeeds khó khăn hơn và thường không thể giải quyết được.

Phải thừa nhận rằng, tôi đã dành hai đến ba giờ thử các cách tiếp cận khác nhau để tối ưu hóa plugin Disqus — không có hiệu quả với tôi.

Cuối cùng, tôi đã gỡ cài đặt plugin Disqus và cài đặt Disqus Conditional Load:

PageSpeed Disqus Conditional Load Plugin

Mặc dù điều đó có nghĩa có rất nhiều thứ phải thực hiện, nhưng nó cũng giúp tối ưu hóa tốc độ trang với cài đặt.

Đột nhiên, các khuyết điểm Leverage Browser Caching của PageSpeed ​​đã biến mất. Kudos cho DCL!

Fixing the Tap Targets

PageSpeeds thường phàn nàn về các liên kết bố trí quá gần nhau trong các thiết bị di động. Tôi từng thử nghiệm một vài phương pháp và cuối cùng chỉ dừng việc hiển thị tag trên mobile.

Nếu tôi dùng nhiều thời gian hơn, tôi có thể cải thiện UX của mình và thoã mãn PageSpeeds.

Xử lý vấn đề

Các hình ảnh bị thiếu từ CSS đã nén và kết hợp

Plugin ArrayToolkit hiển thị các biểu tượng sau trong sidebar bên phải, ngừng hoạt động với tôi. Nó đã cho tôi thời gian để sắp xếp ra path nào cần được code với đường dẫn tuyệt đối để hiệu quả.

PageSpeed Missing Icons after combining and compressing CSS

Cuối cùng, tôi đã tìm thấy và thay thế các đường dẫn này bằng các đường dẫn tương đối được sửa chính xác vào thư mục plugin ban đầu:

JavaScript bị hỏng

Vẫn còn một vấn đề tôi cần phải giải quyết. Plugin tab mới của tôi (Construct có các tab tích hợp) ngừng hoạt động. Tôi chỉ cần dành thời gian để gỡ lỗi, nhưng sẽ khá dễ dàng để giải quyết

Chọn lựa bộ thu gọn tốt nhất

Tôi đã thử nghiệm YUI Compressor với W3TC để nén các file JavaScript và CSS của tôi. Thay vì dẫn đến tốc độ tăng lên, mọi thứ đã phá vỡ.

Nếu bạn quan tâm đến việc tìm ra những điều tôi đã làm sai, bạn có thể cài đặt Java và YUICompressor như thế này:

Vui lòng đưa ý kiến bình luận ​​nếu bạn biết làm thế nào để làm việc hiệu quả với WordPress.

Đang kết thúc

Sau vòng thứ hai của công việc về theme mới này, mọi thứ diễn ra tốt hơn tôi mong đợi. Tôi chưa bao giờ chắc chắn mình sẽ đạt được mục tiêu tối ưu của mình.

Điểm PageSpeed cuối cùng của tôi

Tôi đã đạt được PageSpeeds 100 cho cả Mobile và Desktop. Thậm chí đáng chú ý hơn, website của tôi đã chạy siêu nhanh — nhanh hơn blog mà tôi từng có trước đây. Tôi rất tò mò muốn biết lượng truy cập tìm kiếm trong nước và hoạt động của độc giả phản ứng với điểm số và hiệu suất nhanh hơn trong vài tháng tới như thế nào.

Dưới đây là điểm số PageSpeeds sau cùng của tôi, trước tiên là Mobile:

Mobile PageSpeed score 100

Và giờ là Desktop:

Desktop PageSpeed score 100

Desktop đạt 100 trước tiên và tôi phải quay lại để hoàn thành một số thay đổi (giải quyết các tap target) để Mobile đạt được điểm số đó.

Và lần nữa, tốc độ của website khiến nó đáng để ta xem qua. Nếu bạn biết các website thương mại khác đang đạt tốc độ 100 PageSpeed, vui lòng chia sẻ trong phần bình luận. Tôi rất thích nhìn thấy chúng.

Cũng như ví dụ về những thay đổi của SEO, bài viết phổ biến của tôi về việc hẹn hò đã nhảy lên vị trí thứ ba trên kết quả của mobile bên dưới "Seattle dating" (không có trên desktop). Điều này cho tôi biết rằng có lẽ những câu chuyện trên các website có PageSpeeds kém trên mobile, bởi vì nó không phải dễ dàng.

Thách thức của việc bảo trì trong tương lai

Để tối đa hóa PageSpeeds của trang, tôi phải thực hiện một số điều chỉnh cho theme của mình, điều này sẽ tạo ra sự phụ thuộc vào những thay đổi đối với các script và bản cập nhật bên ngoài của theme và plugin. Bây giờ tôi đã hoàn thành mục tiêu ngắn hạn của mình, tôi phải làm việc để tổ chức các hệ thống của mình nhằm quản lý dễ dàng hơn.

Cron cho các file bên ngoài

Chẳng bao lâu nữa tôi sẽ cần triển khai cron để đồng bộ hóa các script self-hosted của Google cho Analytics và DFP.

Dưới đây là một công ty mang đến cách tiếp cận đơn giản hơn để sử dụng Analytics để không bị PageSpeed ​​phạt, khắc phục điểm sau cùng trên Google PageSpeed ​​Insights. Tôi không muốn dựa dẫm vào các bên thứ ba khác.

Quản lý cập nhật chủ đề

Tôi cũng sẽ cần phải theo dõi tốt hơn các cập nhật theme của Medium và tích hợp các thay đổi. Xây dựng một theme con từ những thay đổi của tôi cũng có thể giúp giảm nhẹ quá trình này. Chủ yếu là tôi sẽ tìm kiếm các thay đổi đã ghi đè lên các file JavaScript và CSS được cập nhật (hoặc bổ sung) của tôi.

Quản lý việc cập nhật plugin

Tương tự, khi cập nhật plugin, tôi sẽ cần xem các kiểu cập nhật tương tự. Nó có thể giúp tôi tổ chức việc sử dụng GitHub với các plugin WordPress tốt hơn. Tôi đã sử dụng nó cho theme của mình.

Tự động hóa

Có thể tôi muốn dành thời gian viết script để theo dõi các file JavaScript và CSS nào đang được sử dụng với theme và plugin được cập nhật, tải về server của tôi để thu nhỏ và đóng gói các file thích hợp để liên kết hoặc kèm thêm.

SSL

Cuối cùng, một trong những điều bất ngờ của tôi là SSL không bắt buộc phải đạt được PageSpeeds 100. Điều này phần nào có ý nghĩa nhưng cũng nhấn mạnh rằng một loạt các thành phần khác nhau có thể ảnh hưởng đến thứ hạng tìm kiếm của Google của bạn. Tôi sẽ sớm viết về việc triển khai SSL miễn phí của WordPress.

Tiếp theo là gì?

Nếu bạn thích điều này nhưng muốn đọc một hướng dẫn tổng quát hơn mà không đi sâu vào các chi tiết cụ thể có thể hoặc không thể áp dụng cho bạn, Google PageSpeed ​​Scoring 100/100 của KeyCDN với WordPress là một phần bổ sung tuyệt vời. Tôi cũng đã viết một bài tài trợ về CDN của họ trên Envato Tuts+ (Accelerate Your Content Delivery With KeyCDN) và tiếp tục trở thành khách hàng của họ.

Trong thời gian này, nếu bạn đang tìm kiếm các tiện ích khác để giúp bạn xây dựng bộ công cụ cho WordPress hoặc code để nghiên cứu và thuần thục hơn trong WordPress, đừng quên xem những gì chúng tôi có sẵn trên Envato Market.

Trong tương lai, tôi sẽ cân nhắc thêm một vài cải tiến để cải thiện hiệu suất tổng thể của website của tôi. Những cải tiến này gồm có:

  • Xem lại PageSpeed ​​của các bài đăng phổ biến nhất của tôi, chẳng hạn như Amazon Marketplace Fraud Made Easy (hiện tại là 97), để đảm bảo tất cả các bài đăng đều đạt mức 100. Như trong ví dụ này, nó thường chỉ nhúng kích thước hình ảnh làm rối tung PageSpeed.
  • Cải thiện việc quản lý theme và plugin của tôi để duy trì các tối ưu hóa này dễ dàng nhất có thể khi có cập nhật, ví dụ: theo dõi các thay đổi của các file JS và CSS trong các bản cập nhật, giữ bản copy của các file JS bên ngoài như Analytics đã cập nhật, nén các file được cập nhật, v.v.
  • Nâng cấp server của tôi lên PHP7. Việc nâng cấp hứa hẹn sẽ cải thiện hiệu suất gần gấp 2 lần. Nâng cấp trước khi bản phát hành Ubuntu không đơn giản, nhưng cũng không phải quá khó.
  • Nâng cấp server của tôi lên Varnish4. Nâng cấp này yêu cầu một thay đổi các file cấu hình, và tôi không chắc về sự cải thiện hiệu suất của nó và khả năng tương thích với W3 Total Cache, nhưng tôi sẵn sàng thử.
  • Khám phá CacheEnabler của KeyCDN để cung cấp các hình ảnh Webp hiệu quả hơn cho người dùng Chrome. Kích thước file Webp nhỏ hơn đáng kể nhưng chưa được Safari hỗ trợ. Tôi thực sự rất vui về việc cải thiện trải nghiệm người dùng.

Nếu bạn có câu hỏi, vui lòng đăng ở bên dưới. Hoặc, bạn có thể liên hệ với tôi qua Twitter @reifman. Vui lòng xem trang hướng dẫn Envato Tuts+ của tôi để xem các bài viết khác của tôi, chẳng hạn như Cloning WordPress in Linux (in 90 seconds).

Liên kết liên quan

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.