Tối ưu hóa và tăng tốc độ website là một phần không thể thiếu trong việc đảm bảo trải nghiệm trực tuyến tốt nhất cho khách hàng và đồng thời cải thiện vị trí của bạn trên các trang kết quả tìm kiếm. Trong loạt bài viết này, chúng ta đã đi sâu vào các khía cạnh quan trọng của việc tối ưu hóa website của bạn.
Tối ưu hóa tài sản bên ngoài thực sự khó khăn, nếu không nói là không thể. Đây là tất cả các tệp được tải từ nơi nào đó khác với máy chủ web của bạn (vì vậy được gọi là “tài sản bên ngoài”). Điều này có thể là webfonts (như Google fonts) hoặc biểu tượng font (FontAwesome), hình ảnh, tệp JS cho Google Analytics, JS cho việc theo dõi chuyển đổi (như Facebook Pixel, Hotjar), tệp JS cho liên kết tiếp thị liên kết (Amazon), thư viện JS, tệp JS cho Youtube (hoặc Vimeo), nhúng Facebook hoặc Twitter, JS cho đếm lượt chia sẻ trên các trang mạng xã hội và còn nhiều thứ khác nữa.
Phần khó khăn nhất là máy chủ của họ không phải lúc nào cũng nhanh chóng (tất nhiên, dịch vụ miễn phí không thể cấp phát toàn bộ tài nguyên máy chủ cho bạn) và tệp của họ không phải lúc nào cũng nhẹ. Bạn có thể đã thấy các phàn nàn từ các kiểm tra trang web về việc không tải được lâu đủ trên trình duyệt hoặc tệp quá lớn, v.v. Dù tình huống có thế nào, bạn có rất ít sự kiểm soát đối với các tệp không được tải lên máy chủ của bạn!
Vậy chúng ta có thể làm gì?
- Tải chúng cục bộ.
- Tải chúng sớm (còn gọi là “prefetch”).
- Tải chúng muộn (còn gọi là “defer”).
Kiểm tra tất cả các yêu cầu bên ngoài
Liệu bạn có biết những gì đang được tải từ các tên miền bên ngoài không? Điều này có vẻ hài hước, nhưng tôi thấy nhiều khách hàng không biết về tất cả các cuộc gọi bên ngoài được thực hiện từ trang web của họ. Để kiểm tra: mở Công cụ Phát triển (Developer Tools), nhấn vào tab “Nguồn” (Sources) và tải tất cả các trang của trang web của bạn.
Các yêu cầu bên ngoài phổ biến (không mong đợi):
- URL tuyệt đối – đến trang của bạn. Về mặt kỹ thuật, điều này không phải là một yêu cầu bên ngoài, nhưng hãy thử sử dụng URL tương đối. Nếu bạn đang làm việc với các chiến lược SEO lỗi thời, hãy dừng lại.
- Hình ảnh trong giao diện mẫu – hình ảnh mặc định được liên kết từ trang demo (ngay cả khi chúng có sẵn trên trang web của bạn).
- Các đoạn mã chuyển đổi cũ (Hotjar, Pixel) – mà bạn đã ngừng sử dụng nhưng quên loại bỏ khỏi tệp giao diện của bạn.
- Thứ không cần thiết – bất kỳ hình ảnh, CSS, đoạn mã JS hoặc thư viện nào đang được tải lên cho những thứ bạn thậm chí không sử dụng.
Tải các tài sản đơn giản cục bộ
- Bất cứ điều gì đơn giản đủ để bạn có thể tải cục bộ, hãy làm điều đó.
- Hình ảnh, CSS, JS… sao chép chúng lên trang web của bạn.
Tải webfonts cục bộ
Như tôi đã giải thích trước đó, bạn có thể tải webfonts cục bộ để giảm thiểu tác động về tốc độ của chúng.
- Tốt nhất nếu bạn có thể làm điều này bằng cách thủ công (và cũng để loại bỏ những thứ không cần thiết).
- Bạn cũng có thể sử dụng plugin tiện lợi như “OMGF | Host Google Fonts Locally”.
- Đừng sử dụng FontAwesome! (sử dụng các cách khác để hiển thị biểu tượng)
- Plugin bộ nhớ đệm Swift Performance có tùy chọn Critical Font thú vị để tối ưu hóa cho Font Awesome.
Tải Google Analytics cục bộ
Có vô số cách để làm điều này. Một số cách thậm chí thực hiện các việc lạ lùng như cắt giảm tệp JS xuống tối thiểu hoặc tải kịch bản GA từ CDN công cộng (jsDelivr). Các phương pháp khác là các kỹ thuật phức tạp như sao chép tệp GA lên máy chủ của bạn và chạy các lệnh cron để duy trì nó cập nhật. Tôi nghĩ rằng điều đó thích hợp cho các trang web hoàn toàn nhỏ mà không có việc theo dõi chuyển đổi. Nhưng nếu không… hãy giữ cho nó đơn giản và sử dụng plugin CAOS (đây là lựa chọn ưa thích của tôi).
- CAOS | Host Google Analytics Locally (lựa chọn ưa thích của tôi và cách đơn giản nhất)
- Plugin Flying Analytics – được xây dựng bởi Gijo để tải GA cục bộ. Có 3 cài đặt hữu ích tùy thuộc vào cách bạn sử dụng GA
Tải video theo chế độ lười biếng
- Bạn có thể sử dụng tính năng “tải đồng iframe theo chế độ lười biếng” trong plugin bộ nhớ đệm của bạn.
- KHÔNG nên tải video theo chế độ lười biếng ở đầu trang chủ của bạn!
Nếu bạn nhúng video qua Youtube, Vimeo hoặc iframe khác, có các plugin không chỉ tải chúng theo chế độ lười biếng mà còn có các tính năng bổ sung:
- Tải chỉ khi tương tác của người dùng – di chuyển chuột, cuộn trang hoặc chạm màn hình trên điện thoại di động. Ý tưởng tuyệt vời!
- Độ nhạy tải chậm – tải iframe sau khi màn hình đóng lại. Ý tưởng tuyệt vời!
- Hình ảnh giả – tải ẢNH của trình phát video với nút phát giả mạo và chỉ tải video thực sự nếu bấm vào. Rất thông minh! (Thường chỉ tương thích với Youtube, một số có thể làm được Vimeo.)
- (Rất nhiều trong số này có thể được tìm thấy trong Swift Performance.)
Thậm chí nếu bạn không có tất cả các tính năng tinh vi đó trong plugin bộ nhớ đệm của bạn, chỉ có khả năng tải đồng iframe theo chế độ lười biếng cũng đã là một sự khác biệt lớn. Một cách khác mà bạn có thể tùy chỉnh thủ công là hiển thị một hình ảnh giả mạo của trình phát sau đó mở một hộp thoại modal với video bên trong. Dù sao đi nữa, tôi chắc chắn rằng việc tải lười biếng của trình duyệt sẽ sớm được cải thiện hơn.
- Liên quan đến các plugin tốt nhất để thực hiện hiệu ứng hình ảnh video giả mạo, tôi đề xuất bạn thử nghiệm trên riêng bạn. Hãy tìm kiếm trên kho lưu trữ WP với từ khóa “video lazy load”.
- Nếu có bất kỳ lo ngại nào về việc tải lười biếng, tôi tự hỏi liệu nó có ảnh hưởng đến SEO của bạn khi các máy tìm kiếm không thấy video đã được tải. Ai biết được, đúng không?
Tối ưu hóa Google Maps
Đừng tải Google Maps trực tiếp vào trang web của bạn! Nó làm chậm trang web của bạn rất nhiều!
- Hãy đặt một hình ảnh của bản đồ thay thế, sau đó liên kết đến Google Maps từ hình ảnh đó hoặc từ một số văn bản dưới đó.
- Hoặc sử dụng tùy chọn “tải đồng iframe theo chế độ lười biếng” từ plugin bộ nhớ đệm để trì hoãn việc tải Google Maps.
Tích hợp mạng xã hội; Facebook, Twitter, Instagram
- Bạn có bao giờ muốn hiển thị ô Like Facebook ngay trên trang của bạn không? Đừng làm vậy! Nó chậm kỹ thuật lắm. Sẽ tốn bạn ít nhất 1 giây. Nếu bạn muốn, hãy đặt nó trên một trang cụ thể nhưng không phải trang chủ hoặc widget toàn cầu!
- Cũng vậy với ô Twitter.
- Còn về luồng Instagram? Vì bất kỳ lý do nào, tôi thấy chúng hiển thị ít chậm hơn. Tôi thích Social Feed Gallery của QuadLayers.
- Còn về Facebook Pixel? Xin lỗi, tôi chưa có cách nào.
Trừ khi những ô này chính là nội dung trang chính của bạn… tin tôi đi, bạn không cần chúng. Nó không đáng đối mặt với sự chậm trễ lớn mà chúng gây ra, đặc biệt là trên các thiết bị di động.
Vẫn muốn có một luồng mạng xã hội trên trang web? Có thể ứng dụng Social Feed Cloudflare này có thể giúp đỡ.
Bình luận và Gravatar
Bình luận là một vấn đề mà hầu hết mọi người không gặp… cho đến khi blog của họ trở nên phổ biến và có hàng trăm hoặc hàng ngàn bình luận. Trong thực tế, thậm chí chỉ 100 bình luận trên một bài viết cũng đủ để làm giảm tốc độ trang của bạn và khiến trang web trở nên ít thú vị hơn khi truy cập. Chúng ta có một số vấn đề cần xem xét và các cách khác nhau để giải quyết chúng.
Hệ thống bình luận nào nên sử dụng? Và cách họ xử lý các tài sản của bên thứ ba.
Hệ thống bình luận tích hợp sẵn trong WordPress nhanh chóng và miễn phí nhưng tải tất cả cùng một lúc. Điều này có thể làm phiền nếu bạn không muốn tất cả 500 bình luận (và Gravatar của họ) tải lên trang web của mình cùng lúc. Điều này không chỉ là vấn đề về tốc độ mà còn là vấn đề thiết kế. Tất nhiên, có cách để giải quyết vấn đề này.
- Bạn có thể giới hạn số lượng bình luận được tải.
- Một số người chia bình luận thành các trang riêng biệt.
- Trên trang web tấp nập nhất của tôi, tôi đã đặt một nút [TẢI BÌNH LUẬN] trên điện thoại di động, để người dùng không cảm thấy kinh ngạc trước một trang dài khi cuộn trang trên điện thoại của họ.
- Bạn cũng có thể sử dụng các hệ thống avatar thay thế hoặc lưu trữ Gravatars của bạn (thông qua plugin bộ nhớ đệm hoặc plugin lưu trữ Gravatar cụ thể).
- Hoặc không sử dụng bất kỳ avatar bình luận nào!
Cá nhân tôi ưa thích hệ thống bình luận tự nhiên của WordPress.
Disqus là một hệ thống bình luận bên thứ ba không còn miễn phí, nhưng có nhiều tính năng tương tác và giao diện đẹp (được thiết kế sạch sẽ và chỉ tải các bình luận gần đây). Nhược điểm lớn ngoài giá là nó tải tài sản bên thứ ba trên tất cả các trang web ngay cả khi chúng không có bất kỳ bình luận nào.
Hệ thống bình luận Facebook cũng là một lựa chọn tuyệt vời và MIỄN PHÍ. Nó tuyệt vời để tạo ra rất nhiều tương tác và không hiển thị tất cả bình luận cùng lúc (như Disqus). Nó cũng tăng số lần chia sẻ trên Facebook mỗi khi có bình luận. Tôi chỉ không thích nó vì tải các tài sản từ bên ngoài.
Xin vui lòng không sử dụng Thrive Comments! Nếu bạn quyết định sử dụng Disqus, bạn có thể xem xét Commento, nhưng cần lưu ý (bạn không thể chuyển dữ liệu trực tiếp từ WordPress sang Commento, phải thông qua Disqus trước).
Trì hoãn chatbox
Nhiều người trong bạn gặp vấn đề về tải trang chậm do chatbox (chat trực tuyến) bán hàng hoặc hỗ trợ. Những thứ này không liên quan đến thiết kế trang web của bạn và không nên gây trở ngại. May mắn thay, chúng dễ dàng để giải quyết.
- Đặt mã vào chân trang (footer) một cách thủ công.
- Trì hoãn tải JS – hầu hết các plugin bộ nhớ đệm đều có tính năng này.
- Tải JS theo cách lười biếng – Swift cache có tính năng này. Đó là một cách tuyệt vời.
Tăng tốc độ biểu mẫu email
Nếu bạn có biểu mẫu đăng ký bản tin trên trang web của mình để tích hợp với các dịch vụ tiếp thị qua email (như Mailchimp, MailerLite, v.v.), bạn sẽ thấy nhiều biểu mẫu này tải các tệp JS từ bên thứ ba gây phiền toái. Một số tệp JS này được sử dụng cho bảo mật biểu mẫu (ngăn chặn đăng ký spam), còn lại là cho các chức năng khác (như chuyển đổi).
Dưới đây là những chiến lược của tôi để xử lý chúng:
- Đừng tải biểu mẫu email toàn cầu – đừng đặt chúng trên mọi trang! Tôi cũng không thích chúng về mặt trải nghiệm người dùng (làm phiền người dùng). Bạn có thể thử chỉ một nút “ĐĂNG KÝ” hoặc liên kết đưa họ đến trang đăng ký bản tin. Nhưng đúng vậy, điều này có thể ảnh hưởng đến tỷ lệ chuyển đổi và khiến họ rời khỏi trang.
- Sử dụng biểu mẫu không cần tải JS từ bên thứ ba – một số dịch vụ email có khả năng thực hiện điều này.
- Tải biểu mẫu cục bộ – nhưng có rủi ro nếu nó ngừng hoạt động một ngày nào đó!
- Luôn nhúng thủ công – thay vì sử dụng cách tự động thông qua plugin.
Cuối cùng, dịch vụ bạn chọn sẽ xác định các tùy chọn của bạn. Một số có tùy chọn không cần JS. Những dịch vụ khác yêu cầu JS bất kể.
DNS Prefetch
- Kích hoạt DNS prefetch bằng cách đặt các thẻ prefetch trong phần tiêu đề của bạn.
- Hoặc thực hiện điều này thông qua plugin bộ nhớ đệm của bạn.
- Nhưng đừng cài đặt một plugin tối ưu hóa hiệu suất chỉ để thực hiện DNS prefetch.
Một chiến lược tốt để tăng tốc việc gọi tài sản từ bên ngoài là tăng tốc độ chờ DNS của chúng. Điều làm chậm tài sản từ bên ngoài thường là thời gian trễ mạng để gửi yêu cầu đến máy chủ bên thứ ba. Tệp chính nó có thể rất nhỏ nhưng thời gian mạng là nguyên nhân làm chậm nó. Bằng cách đặt DNS prefetch đến các miền bên ngoài, máy chủ của bạn sẽ thực hiện yêu cầu HTTP sớm hơn trong quá trình tải trang web, do đó tài sản sẽ tải nhanh hơn khi cần thiết.
Các URL thông thường cần prefetch:
- Google fonts
- Facebook Pixel
- Các mạng xã hội khác
- Kịch bản chat
- Kịch bản chuyển đổi
Phương pháp:
- Chạy kiểm tra tốc độ bằng Pingdom – và xem danh sách các miền đã liệt kê.
Hoặc để có danh sách đầy đủ, mở Developer Tools của trình duyệt của bạn > Sources (tab). - Bạn nên duyệt nhiều trang của trang web của bạn để đảm bảo bạn có tất cả các miền thông thường.
- Chỉ prefetch tên miền gốc/tên miền con, không cần tải toàn bộ URL.
- Cũng không cần phải preload tất cả các miền bạn thấy.
- Hãy cẩn thận với các tên miền liên quan đến quảng cáo thay đổi sau mỗi lần tải trang. (Bạn không nên prefetch chúng.)
DNS preconnect
“Preconnect” là anh em ít người biết đến của “prefetch”. Đây là một lời giải thích:
- preload – tải trước các tài sản cho trang hiện tại.
- prefetch – chỉ tải trước cuộc gọi DNS cho trang tiếp theo.
- preconnect – tải trước cuộc gọi DNS, thỏa thuận TLS và xác nhận TCP… cho trang tiếp theo.
Việc tải trước không nên được sử dụng vì nó có thể tiêu tốn rất nhiều tài nguyên và không hợp lý đối với WordPress trừ khi bạn biết chính xác tại sao một số tài sản cần được tải trước (và không thể ưu tiên ở cách khác). Prefetch aka “DNS prefetch” là một cách an toàn tiết kiệm tài nguyên để tải trước cuộc gọi, và được hỗ trợ mạnh mẽ bởi các trình duyệt. Nó thuận tiện thiết lập kết nối DNS để các tài sản từ các miền bên ngoài sẽ được tải về nhanh hơn khi được yêu cầu.
Preconnect tương tự như prefetch nhưng làm thêm một chút (nó thiết lập kết nối TLS/TCP cũng như DNS) nhưng không phổ biến bằng nhiều lý do. Một lý do là nó không được hỗ trợ bởi nhiều trình duyệt. Một lý do khác là có giới hạn kết nối đồng thời trong hầu hết các trình duyệt. Cuối cùng, bạn phải quyết định điều gì quan trọng nhất để preconnect và những thứ còn lại có thể được prefetch.
- Hãy giới hạn preconnect chỉ cho các kết nối ưu tiên.
- Một số trang web tải trước preconnect trước khi prefetch. Một số trang web khác làm ngược lại nhưng cũng prefetch những thứ được kết nối trước. Một số cũng đặt prefetch trong cùng một thẻ với preconnect.
- Tôi có lẽ không thực sự quan tâm đến preconnect. Chỉ có một số trang web rất lớn mới sử dụng nó.
Ứng dụng Cloudflare
Nó là một tính năng tương đối mới và tôi chưa khám phá nhiều về nó. Nhưng nó trông cực kỳ hứa hẹn! Ứng dụng Cloudflare mới cho phép các nhà phát triển tạo ứng dụng và dịch vụ tích hợp ở cấp độ EDGE (gọi là “DNS”) thay vì ở cấp độ PHẦN MỀM (gọi là WordPress, php). Điều này mở ra nhiều khả năng vì:
- Các ứng dụng/kịch bản được tải từ máy chủ Cloudflare! (Làm cho chúng nhanh hơn.)
- Điều này ít công việc cho các nhà phát triển. Ứng dụng của họ có thể áp dụng cho bất kỳ trang web nào (không giới hạn bởi bất kỳ hệ thống quản lý nội dung nào, hoặc WordPress).
Kiểm tra nó ngay bây giờ! https://www.cloudflare.com/apps/
- Xem xem có các ứng dụng nào bạn đang sử dụng trên đó.
- Tawk.to, Facebook (chat/like/comments), feeds mạng xã hội, hộp chat, biểu mẫu, hỗ trợ, phương tiện truyền thông, v.v.
- Có nhiều ứng dụng khác nữa!!!
Thật sự tuyệt vời vì chúng không tải bất kỳ thứ gì từ máy chủ của bạn! Không cần cài đặt hoặc cấu hình plugin nào. Chỉ cần kích hoạt từ tài khoản Cloudflare của bạn. Tuyệt vời! (Điều này có thể hoàn toàn thay đổi cách các ứng dụng và dịch vụ tương lai được tích hợp với các trang web, và khiến cho các trang web chậm trở thành một dấu câu hỏi trong quá khứ.)
Hẹn gặp các bạn ở phần sau!
