Trang web của bạn cần một chế độ ăn kiêng trình duyệt?

Cách đây vài tuần, tôi đã chạm vào chủ đề thiết kế mặt trước với tác phẩm "Khái niệm mới trong kiến ​​trúc thiết kế web Front End", đó là một cách tiếp cận rộng rãi đối với một số suy nghĩ và nguyên tắc hiện tại và đang thịnh hành trong thế giới phát triển web.

Trong bài đăng này, tôi sẽ nghiên cứu sâu hơn về những điều ảnh hưởng đến hiệu suất giao diện người dùng của trang web của bạn và sẽ nêu bật những điểm chính từ một tài nguyên tương đối mới có tên là Chế độ ăn kiêng trình duyệt. Chế độ ăn kiêng trình duyệt tự gọi mình là "Hướng dẫn hiệu suất mặt trước dứt khoát: Cách giảm cân trong trình duyệt." Tài nguyên hiệu suất mặt trước này được tạo ra bởi một tập đoàn gồm những người như Briza Bueno từ Americanas.com, Davidson Fellipe của Globo.com, Giovanni Keppelen một cựu Peixe Urbano, Jaydson Gomes of Terra, Marcel Duran với Twitter, Mike Taylor tại Opera, Renato Mangini với Google và Sérgio Lopes tại Caelum. Tài nguyên GitHub của Chế độ ăn kiêng trình duyệt liệt kê hơn năm mươi tài liệu tham khảo, bao gồm các chủ đề và nguồn từ sách, trang web, con người, HTML, CSS, JavaScript, jQuery, hình ảnh và máy chủ. Là một bên liên quan trong trang web của tổ chức của bạn, bạn có thể muốn xem xét một số nguyên tắc hướng dẫn này cho hiệu suất thiết kế web mặt trước.

Hình B

Tại sao hiệu suất quan trọng?

Tất cả chúng ta đều biết là các nhà phát triển web rằng nếu các trang web của bạn không tải đủ nhanh cho người dùng thì tỷ lệ chuyển đổi sẽ giảm, doanh thu trên mỗi người dùng giảm, các tìm kiếm trên mỗi người dùng bị giảm, doanh số giảm và tốc độ tải xuống sẽ tăng. Mọi người trong Chế độ ăn uống trình duyệt tập hợp một Tác động ngắn về hiệu suất ngắn cho thấy các công cụ tìm kiếm lớn như Bing, Google và Yahoo! cải thiện hiệu suất của họ, cũng như các ví dụ từ một số thị trường dọc như Shopzilla, Mozilla và Netflix.

Hướng dẫn chi tiết

Chế độ ăn uống "Hướng dẫn dứt khoát" được chia thành bảy phần bao gồm các chủ đề chính của HTML, CSS, JavaScript, jQuery, Hình ảnh, Máy chủ và phần Thưởng. Tôi sẽ nhấn mạnh một số mục tiêu hướng dẫn chính mà Chế độ ăn kiêng trình bày chi tiết.

HTML

Tránh mã nội tuyến và mã nhúng

Theo nguyên tắc thông thường, bạn muốn sử dụng các cuộc gọi bên ngoài để tải CSS của mình từ a và JavaScript từ thuộc tính src trong thẻ. Mặc dù mã nhúng và mã nội tuyến có thể hữu ích cho một số triển khai, chẳng hạn như các trang nhỏ hoặc các trang chỉ được sử dụng cho mục đích tạm thời, trong hầu hết các trường hợp, bạn sẽ muốn gọi CSS và JavaScript từ các nguồn bên ngoài. Lợi ích khác là trình duyệt có thể lưu trữ các tệp bên ngoài, hỗ trợ cho hiệu suất trang web. Một trong những công cụ được tham chiếu ở đây là trình xây dựng Assetgraph, là hệ thống xây dựng dựa trên AssetGraph (chủ yếu) cho các ứng dụng web một trang.

Đặt các cuộc gọi kiểu của bạn lên trên cùng và các cuộc gọi kịch bản ở cuối trang

Đây là cách thực hành tiêu chuẩn thực sự không có trí tuệ, tuy nhiên bạn muốn tải các kiểu của mình từ bên trong, để trang sẽ được hiển thị với các kiểu nguyên vẹn và được áp dụng khi trang được tải. Và đối với bất kỳ thẻ nào bạn muốn đảm bảo chúng được đặt ngay trước thẻ đóng ở cuối trang tài liệu web. Đây dường như là lĩnh vực chưa có nhiều sức kéo nhưng đang được áp dụng nhiều hơn giữa các trang web và nhà phát triển. Lý do cho điều này là vì một số JavaScript hoặc JQuery có thể mất một chút thời gian để tải trang hơn so với những gì người dùng thường mong đợi và việc gọi các tập lệnh ở cuối trang cho phép tất cả nội dung không có kịch bản tải trước.

Các chủ đề HTML khác bao gồm thu nhỏ html của bạn, duy trì mã có thể đọc và sử dụng thuộc tính async để có thời gian tải tốt hơn, cho phép các tập lệnh tải xuống không đồng bộ trong khi phần còn lại của trang tiếp tục tải.

CSS

Giảm thiểu CSS của bạn

Mặc dù mã CSS được nhận xét và có thể đọc trông rất đẹp khi thụt lề, nhưng điều này thực sự bổ sung một số lỗi vào biểu định kiểu của bạn. Các trình duyệt không quan tâm đến nhận xét và thụt lề trong các tệp biểu định kiểu của bạn, vì vậy các tệp CSS sẽ tải nhanh hơn khi xóa phần thừa của con người và có một số công cụ tự động có thể lấy CSS nhận xét của bạn và thu nhỏ nó trước khi bạn đưa nó vào hoặc môi trường sản xuất, ví dụ hiển thị bên dưới hiển thị một mẫu CSS được nhận xét và thụt lề điển hình và sau đó cùng mã CSS được rút gọn:

Trước
 /* cái đầu */ 
 .logo a { 
 hiển thị: khối; 
 chiều cao: 46px; 
 văn bản thụt lề: -999em; 
 chiều rộng: 115px; 
 } 
 .head .homelink { 
 nền: # 0b5375 url ('/ i / bg-area-title.gif') không lặp lại; 
 chiều cao: 78px; 
 bên trái: -20px; 
 vị trí: tương đối; 
 chiều rộng: 490px; 
 } 
Sau (rút gọn)
 .logo a {display: block; height: 46px; text-indent: -999em; width: 115px;}. head .homelink {background: # 0b5375 url ('/ i / bg-area-title.gif') no- lặp lại; chiều cao: 78px; left: -20px; vị trí: tương đối; chiều rộng: 490px} 

Như "chế độ ăn uống trình duyệt" chỉ ra, "... những người sử dụng bộ xử lý trước như Sass, Less và Stylus, có thể định cấu hình đầu ra CSS đã biên dịch của bạn để được thu nhỏ." Một số công cụ khác để thu nhỏ CSS của bạn được liệt kê trong tài liệu tham khảo cũng như Công cụ khai thác CSS và CSSmin.js.

Giảm số lượng yêu cầu cho các tệp CSS

Đã bao nhiêu lần bạn nhìn thấy một cái gì đó như thế này trong các tài liệu trang web của bạn?

Mỗi yêu cầu CSS này cần nhiều thời gian hơn để tải trang, do đó, việc kết hợp tất cả CSS của bạn vào một tệp duy nhất yêu cầu trang chỉ thực hiện một yêu cầu:

Chủ đề CSS cuối cùng nói rằng nên sử dụng hơn @import để gọi biểu định kiểu của bạn vì các trình duyệt không có khả năng tải xuống tài sản @import song song.

JavaScript

Tải nội dung của bên thứ ba không đồng bộ

Đã bao nhiêu lần bạn nhúng các tập lệnh của bên thứ ba từ YouTube, Vimeo, Twitter hoặc Facebook vào các trang web của bạn? Vấn đề là nhiều kết nối nội dung của bên thứ ba này không phải lúc nào cũng sạch sẽ hoặc được phân phối hiệu quả; có vô số biến số có thể thay đổi trải nghiệm người dùng cuối. Để tránh sự cố này, bạn có thể tải các mã này theo kiểu không đồng bộ, thích liên kết đến nhập khẩu và tập lệnh này có thể được sử dụng để tải nhiều tiện ích của bên thứ ba.

Tránh tài liệu. Viết

Vì điều này luôn yêu cầu trang phải được tải đầy đủ mỗi khi cuộc gọi document.write được trả về.

Các chủ đề JavaScript khác bao gồm:

  • độ dài mảng bộ nhớ đệm
  • giảm thiểu sơn lại và phản xạ
  • thu nhỏ kịch bản của bạn
  • kết hợp nhiều tập tin js thành một.

JQuery

Luôn sử dụng phiên bản mới nhất của jQuery

Đây là một nguyên tắc khác phải luôn được tích hợp trong các lệnh gọi tập lệnh của bạn nếu bạn sử dụng jQuery, tuy nhiên, nó phải được đưa vào do nhiều người liên kết với các phiên bản tĩnh của thư viện. Tham khảo bài thuyết trình, Mẹo và thủ thuật hiệu suất đã được chứng minh của jQuery. Phiên bản mới nhất của jQuery có sẵn tại: http://code.jquery.com/jquery-latest.js.

Các chủ đề jQuery khác bao gồm sử dụng thay vì mỗi và không sử dụng jQuery trừ khi thực sự cần thiết.

Hình ảnh

Sử dụng các họa tiết CSS

Nhóm một số hình ảnh vào một tệp và sau đó định vị chúng trong CSS của bạn sẽ giúp giảm số lượng yêu cầu. Kỹ thuật sprite, trong khi được biết đến rộng rãi, không được sử dụng rộng rãi, tuy nhiên, nó đã được tìm thấy trong sử dụng gần đây với kỹ thuật cuộn thị sai.

URI dữ liệu

Một thay thế cho các họa tiết CSS, đây là một lược đồ cung cấp một cách để bao gồm dữ liệu nội tuyến. Kỹ thuật này thường cho phép các phần tử riêng biệt như hình ảnh và biểu định kiểu được gọi trong một yêu cầu HTTP thay vì từ nhiều yêu cầu HTTP, dẫn đến hiệu quả và hiệu suất cao hơn.

Các chủ đề hình ảnh khác bao gồm không hủy bỏ hình ảnh trong đánh dấu và tối ưu hóa hình ảnh của bạn.

Người phục vụ

Cho phép lưu trữ thông minh

Như tôi đã đề cập trong bài đăng của mình, "Cache là vua: Tìm hiểu thêm về các chính sách lưu trữ của trang web", vài tuần trước, cách tốt nhất để tối ưu hóa các yêu cầu trang web của bạn là không có yêu cầu nào và điều này có nghĩa là cho phép trình duyệt lưu vào bộ đệm tài nguyên và tài sản của bạn.

Chủ đề máy chủ khác là việc sử dụng gzip để nén các tệp của bạn ở cấp máy chủ.

Tặng kem

Phần thưởng bao gồm một số tài nguyên để kiểm tra hiệu suất trang web của bạn, bao gồm các tiện ích mở rộng bạn có thể đưa vào các trình duyệt của mình như YSlow và PageSpeed, cũng như các công cụ trực tuyến như WebPageTest và Lưu trữ HTTP.

Nếu tổ chức của bạn đã tuân theo các nguyên tắc này thì có lẽ bạn có một trang web với mức hiệu suất khá tốt; nếu không, thì bạn có thể muốn kết hợp các ý thức hệ còn thiếu vào môi trường sản xuất và phát triển web của mình.

© Copyright 2020 | mobilegn.com