Video nền css vimeo
|
Gần đây tôi có cơ hội làm việc với một trang web video rất quan trọng (so sánh. các bộ phận), các video này được lưu trữ (lưu trữ) trên Vimeo và được đặt trong màn hình đầu tiên, tại các vị trí thu hút của trang web (phần anh hùng). Yêu cầu của họ là họ cần tải nhanh và bật tự động (tự động phát) Show
Bạn có thể xem video đó tại trang web đường link mà tôi đã trích dẫn ở trên (cập nhật. hiện trang trên không nhúng video làm nền nữa) Với cách tối ưu hóa thích hợp, tôi đã đạt được số điểm 100/100 trên Google PageSpeed Insights Nếu video mà bạn nhúng từ YouTube hoặc Vimeo đang làm chậm trang web, thì đây sẽ là hướng dẫn bạn nên đọc lục mục Tại sao video nhúng từ YouTube/Vimeo lại tải về chậm chạp?Khi bạn nhúng video từ YouTube hoặc Vimeo, nó sẽ tạo một khung nội tuyến và tải xuống một số tài nguyên
Để hiểu rõ hơn vấn đề này, bạn có thể xem một số dữ liệu từ Pingdom và GTmetrix sau khi phân tích trang có video YouTube (kết quả hầu hết như tương tự nếu bạn sử dụng Vimeo) Kích thước nội dung theo tên miền Các yêu cầu từ YouTube Tôi hy vọng thông tin vừa hoàn thành sẽ giúp bạn hiểu rõ câu chuyện nhúng video làm chậm trang web như thế nào. Giờ chúng ta cùng xem một số giải pháp giúp tăng tốc nhúng video từ YouTube hoặc Vimeo trong WordPress P/S. Nhìn trên khía cạnh rộng lớn hơn thì câu chuyện nhúng video từ trang web YouTube, Vimeo làm chậm được xếp vào nhóm tài nguyên của bên thứ ba gây cản trở tốc độ Giải pháp #1. Loại bỏ videoTôi chỉ đùa thôi Giải pháp #2. Lazy load and display to view beforeGiống như lazy load ảnh, bạn cũng có thể lazy load video (bạn có thể tham khảo thêm các kỹ thuật lazy load ảnh và video ở bài viết này). Khi làm như thế, chỉ một ảnh giữ chỗ (placeholder) sẽ được tải về. Tất cả các tập lệnh cần thiết, iframe, trình phát video, vân vân sẽ chỉ được tải xuống sau khi người dùng nhấp vào nút phát ưu điểm
nhược điểm
Làm thế nào để lazy load video YouTube/Vimeo trong WordPress?Nếu bạn sử dụng bộ đệm plugin WP-Rocket, hãy vào phần thiết lập Phương tiện và bật tùy chọn “Cho phép iframe và video / Bật cho iframe và video” và “Thay thế iframe YouTube bằng ảnh xem trước / Thay thế iframe YouTube bằng hình ảnh xem trước” Nhưng nếu bạn không sử dụng WP Rocket, dưới đây là một vài plugin độc lập (tất cả đều miễn phí) bạn có thể sử dụng
Về mặt cá nhân giao dịch, tôi thích WP YouTube Lyte nhất (nó giúp cải thiện tốc độ tốt nhất), nhưng plugin này yêu cầu bạn phải tìm hiểu một chút về cách đăng ký API của YouTube để không ảnh hưởng đến SEO khi Giải pháp #3. Tự lưu trữ lấy videoTải video lên YouTube là lý tưởng nếu bạn có nhiều video trong một trang/bài đăng và bạn đã có sẵn kênh YouTube cũng như có ý muốn phát triển người theo dõi kênh Dù vậy, nếu bạn chỉ sử dụng video cho các khu vực thu hút hoặc nội dung trong màn hình đầu tiên, thì giải pháp trên không thể là biện pháp tốt nhất. Trực tiếp nhúng YouTube / Vimeo sẽ làm cho nó chậm hơn. Trong trường hợp như vậy, bạn có thể tự lưu trữ video trên máy chủ của mình và nhúng chúng vào Bằng cách tự lưu trữ video trên máy chủ của mình, bạn có thể loại bỏ nỗi sợ hãi về câu chuyện “YouTube / Vimeo có thể xóa video của tôi trong tương lai không?” . thực tế thì chuyện này lạ lắm, nền tảng này chỉ xóa video khi bạn vi phạm quy tắc nào đấy, còn không thì thoải mái ưu điểm
nhược điểm
Cách tự lưu trữ video trên WordPress đúng chuẩnBạn có thể nghe ở đâu mà nói rằng tự chủ video là ý tưởng hư và bạn không bao giờ nên triển khai nó. Nhưng tôi cần phải khẳng định là nếu bạn làm điều này chính xác, thì không có gì phải lo lắng cả Bước 1. Nén videoCó nhiều ứng dụng trực tuyến của bên thứ ba có khả năng nén video. Nhưng tôi sẽ gợi ý cách thức hiệu quả và đơn giản hơn, đó là tải video lên YouTube và tải nó xuống để sử dụng lại. Bạn sẽ có video được nén rất tốt. (một lưu ý nhỏ là điều này chỉ đúng nếu video của bạn vốn có chất lượng cao, còn không thì điều này sẽ làm giảm chất lượng của video đi đáng kể) Bước 2. Tải video của bạn lên & phục vụ nó cho người dùng thông qua CDNBạn có thể tải tệp video trực tiếp lên thư viện Media của WordPress và bật CDN. Nhưng tôi khuyến nghị là không nên làm như vậy, hay hơn là tải video lên CDN thông qua vùng đẩy (lưu trữ). Nhờ vậy bạn sẽ tiết kiệm được không gian lưu trữ của máy chủ (của bạn), tiết kiệm băng thông và sẽ dễ dàng hơn về sau nếu bạn cần chuyển trang web sang nhà cung cấp dịch vụ lưu trữ khác (việc chuyển máy chủ sẽ nhanh và nhẹ nhàng đi
Có nhiều dịch vụ CDN có chức năng đẩy vùng. Dịch vụ tôi thích là BunnyCDN. Máy chủ của nó được thiết kể để lưu trữ và phân phối video một cách trực tiếp. Dịch vụ của họ rất tốt và giá rẻ Truy cập trang web của BunnyCDN và tạo tài khoản mới. Bổ sung vùng lưu trữ mới và tải video của bạn lên Khi quá trình tải video hoàn tất, bạn lấy URL của video (bạn cần phải kết nối nó với vùng kéo) Bước 3. Nhúng video vào WordPressNhúng video khá dễ. Chỉ cần thêm khối “HTML tùy chỉnh” và bổ sung đoạn mã sau đây vào <video width="100%" controls> <source src="VIDEO_URL" type="video/mp4"> video> Thay VIDEO_URL bằng link video của bạn và thế là xong Theo mặc định, một ảnh giữ chỗ sẽ là khung hình đầu tiên trong video. Nếu muốn, bạn có thể tùy chỉnh ảnh này (ở vị trí IMAGE_URL, bạn thay thế URL ảnh mà bạn thích) <video width="100%" placeholder="IMAGE_URL" controls> <source src="VIDEO_URL" type="video/mp4"> video> Đây là trình bật video gốc (bản địa) của trình duyệt chính. Nhờ vậy nó không cần tải về tệp bổ sung JavaScript hoặc CSS bên ngoài. Thẻ video có khả năng tùy biến cao. Bạn có thể tìm thấy nhiều tùy chọn hơn trong bài viết này Tặng thêm mẹo hay cho bạnNếu không giải pháp nào ở trên có ích cho bạn, ít nhất thì bạn nên preconnect (kết nối trước) với tên miền YouTube hoặc Vimeo. Làm như vậy nghĩa là bạn thông báo với trình duyệt. “Này, tôi sắp thực hiện kết nối TCP và SSL (https) cho các tên miền này trong một lát nữa, vì thế hãy làm việc đó ngay bây giờ nhé”. Bạn có thể tiết kiệm được điện từ 200 – 300 ms thời gian duyệt phải làm để kết nối với nhiều tên miền Dán đoạn mã dưới đây vào đầu thẻ (bạn có thể sử dụng plugin Chèn Đầu trang và Chân trang để công việc này dễ dàng hơn và không phải lo lắng khi chủ đề/giao diện cập nhật) Với YouTube <link rel="preconnect" href="https://www.youtube.com"> <link rel="preconnect" href="https://i.ytimg.com"> <link rel="preconnect" href="https://i9.ytimg.com"> <link rel="preconnect" href="https://s.ytimg.com"> Với Vimeo <link rel="preconnect" href="https://player.vimeo.com"> <link rel="preconnect" href="https://i.vimeocdn.com"> <link rel="preconnect" href="https://f.vimeocdn.com"> Các đoạn mã có thể thay đổi, vậy bạn nên kiểm tra lại để biết trang web thực sự đang kết nối với tên miền của bên thứ ba nào khi nhúng YouTube hoặc Vimeo để chỉnh sửa lại cho phù hợp Kết luậnKhông có giải pháp riêng rẽ nào có khả năng phù hợp với tất cả các yêu cầu. Mỗi cái đều có ưu và khuyết điểm riêng của nó. Nếu bạn lưu trữ video theo kiểu máy chủ, cần chắc chắn rằng bạn bật CDN, đặc biệt trong trường hợp bạn tải video trực tiếp lên thư viện Media, đây là điều kiện bắt buộc (Dịch từ bài viết. Cách tăng tốc độ nhúng YouTube/Vimeo trong WordPress, tác giả. Gijo Varghese, trang web. WPSpeedMatters) Ý kiến của người dịch. Nhìn chung tôi ủng hộ cách sử dụng plugin lazy load video (hoặc tính năng tương tự trong bộ nhớ cache của plugin, ví dụ LiteSpeed cache) trong phần lớn trường hợp, vì nó phù hợp với đa số người dùng, cũng như dễ phát triển. Việc sử dụng CDN chỉ thích hợp nếu bạn có tất cả các điều kiện sau
Khi có thời gian, tôi sẽ hướng dẫn chi tiết cách sử dụng plugin lazy load nói ở trên, bởi vì nếu không thiết lập khéo léo, nó có khả năng ảnh hưởng đến SEO hoặc/và trải nghiệm của người dùng |
