Tăng cường tốc độ với chi phí không hoạt động với JS đã tắt
Tôi có một bộ sưu tập hình ảnh hiện đang tải hình ảnh bằng các thẻ img tiêu chuẩn và vì nó có rất nhiều hình ảnh lớn nên nó tải khá chậm.
Tôi có thể tăng tốc mọi thứ bằng cách để tập lệnh bộ sưu tập tự động tải hình ảnh sau khi tải trang. Tôi đã thử nghiệm điều này và có một hiệu suất đáng kể. Vấn đề là bằng cách làm như thế này, hình ảnh sẽ không được tải nếu người dùng đã tắt JS.
Vì vậy, câu hỏi là, Có phải là một sự đánh đổi đáng giá để đạt được hiệu suất với chi phí khiến trang không hoạt động nếu JS bị vô hiệu hóa?
Trong trường hợp cụ thể này, tôi nghĩ rằng tôi sẽ sử dụng thẻ noscript, nhưng nếu tôi không có quyền kiểm soát đầu ra html (nói trong một CMS).
Một số suy nghĩ nhanh:
- Thiết kế lại giao diện người dùng của bạn để bạn không cần tải nhiều hơn N hình ảnh. Ví dụ, giới thiệu phân trang.
- Nhiều trình duyệt chỉ hiển thị hình ảnh hiển thị cho người dùng. Xem xét việc ẩn các hình ảnh khác bằng cách di chuyển chúng ra khỏi màn hình hoặc vào một div có tràn: ẩn hoặc một cái gì đó.
- Tải N hình ảnh đầu tiên trên tải, sau đó phần còn lại sau đó. Tải các hình ảnh còn lại sẽ yêu cầu javascript và bạn có thể thêm thẻ noscript để thêm phân trang cho một số ít người dùng không kích hoạt JS.
- Tùy thuộc vào loại hình ảnh bạn đang xử lý, hãy kết hợp các hình ảnh vào một bảng Sprite và tải tất cả chúng dưới dạng hình nền bằng cách sử dụng vị trí nền trong CSS để chỉ hiển thị các phần phù hợp. Thời gian tải trước sẽ rất nhiều, nhưng có thể lưu vào bộ nhớ cache.
Cuối cùng, tôi không thể trả lời liệu JS bị tắt có phải là một sự đánh đổi đáng giá hay không bởi vì tôi không biết khán giả của bạn là gì. Tôi cần thêm thông tin. Trong hầu hết các trường hợp với các trang web tôi đã làm việc, chúng tôi có xu hướng nghiêng về tăng cường tiến bộ. Vì vậy, ví dụ thứ ba trong danh sách của tôi sẽ là ví dụ mà tôi có thể đi.
Điều gì sẽ xảy ra nếu thay vì yêu cầu JS tăng tốc độ tải hình ảnh, bạn tải hình ảnh ở cuối trang khác để khi bạn muốn xem thư viện, chúng đã được tải. Bạn chỉ muốn đảm bảo rằng hình ảnh nằm sau tất cả các nội dung quan trọng và bạn sử dụng cùng tên để nó có thể lưu trữ.
Nếu bạn thực sự muốn tiếp tục tải với JS, tôi khuyên bạn nên kiểm tra JS trước và sử dụng tải động nếu chúng hỗ trợ JS và quay lại tiêu chuẩn nếu chúng không có JS.
Bạn có thể làm điều này dần dần. Tức là, HTML ban đầu xuất ra các thẻ IMG, như hiện tại. Nhưng ngay lập tức khi tải, jQuery của bạn kích hoạt và tự động thay thế các thẻ IMG bằng các trình tải tùy chỉnh của bạn. Tốt nhất của cả hai thế giới.
Ngay cả các công ty lớn cũng bắt đầu yêu cầu Javascript. Ví dụ: nếu bạn tắt Javascript trong IE, bạn có biết rằng bạn thậm chí không thể tải xuống Google Chrome không? Các Accept and Install nút không hoạt động. Họ chỉ đơn giản hiển thị bit văn bản này ở đầu màn hình:
Bạn cần một trình duyệt có khả năng JavaScript để tải xuống phần mềm này. Bấm vào đây để được hướng dẫn về cách bật JavaScript trong trình duyệt của bạn.
Cá nhân tôi cảm thấy yêu cầu Javascript là một lỗi của họ đối với kịch bản này, nhưng tôi lạc đề.
Tất nhiên nó phụ thuộc vào đối tượng của bạn nhưng trong vài năm qua tôi cũng đã xây dựng khá nhiều giao diện web yêu cầu Javascript để hoạt động.
Một mối quan tâm còn lại là SEO. Nếu bạn muốn các hình ảnh trong bộ sưu tập của mình được Google lập chỉ mục, bạn sẽ cần chúng xuất hiện trong HTML.
Câu hỏi "Điều gì sẽ xảy ra nếu họ tắt Javascript" là câu hỏi nên tự mình thực hiện. Mặc dù bạn nên đảm bảo rằng ứng dụng/trang web của bạn vẫn có thể sử dụng được khi tắt JS, bạn cũng nên suy nghĩ về đối tượng của mình là ai. Thành thật mà nói - đó là năm 2010 và các nhà phát triển web thậm chí không cần phải suy nghĩ về vấn đề này (tôi không còn nữa).
Sử dụng phân tích để tìm hiểu xem người dùng của bạn đã tắt/bật JS chưa. Nếu ít hơn 5% người dùng của bạn thậm chí không lãng phí thời gian cho cách giải quyết.