- Vì vậy, bây giờ để hoàn thành bố cục cho danh sách được đánh số của chúng tôi, chúng tôi sẽ nhắm mục tiêu các thẻ nhấn mạnh và thẻ mạnh mà chúng tôi đã đặt trước đó. Vì vậy, trong khu vực CSS của chúng ta, hãy tìm phần tử giả của chúng ta. Hãy thêm một quy tắc sau phần tử giả. Và trước tiên hãy nhắm mục tiêu các thẻ nhấn mạnh. Vì vậy, chúng tôi sẽ gõ ol. thành phố không gian li không gian em. Muốn vào đây và tách nó ra. Điều đầu tiên chúng tôi muốn làm là đặt kiểu hiển thị của phần tử này thành một khối. Khi chúng tôi làm điều đó, bạn sẽ nhận thấy rằng tất cả các tên quốc gia giờ đây sẽ nằm trên dòng riêng của chúng. Thẻ nhấn mạnh đó hiện đang hoạt động giống như một đoạn văn hoặc một phần tử div, chiếm toàn bộ một dòng trong html do thuộc tính khối. Quay lại CSS, hãy thêm một dòng khác. Chúng tôi muốn sử dụng họ phông chữ Roboto. Vì vậy, hãy đến đây và chọn nó từ phần tử giả. Hãy dán nó xuống đây. Hãy thêm một trở lại, dòng tiếp theo. Chúng ta sẽ thiết lập khoảng cách giữa các chữ cái. Chúng tôi sẽ đặt cái này thành. 3 ems chỉ để giải phóng nó ra một chút. Dòng tiếp theo chúng ta sẽ thiết lập…
Tải xuống các tệp mà người hướng dẫn sử dụng để dạy khóa học. Theo dõi và học hỏi bằng cách xem, nghe và thực hànhThực hành trong khi bạn học với các tập tin bài tập
Xem các khóa học trên thiết bị di động của bạn mà không cần kết nối internet. Tải xuống các khóa học bằng ứng dụng LinkedIn Learning trên iOS hoặc Android của bạn Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được định vị và trình bày, hình nền hoặc màu nền nào sẽ được sử dụng, các cách hiển thị khác nhau cho các thiết bị và kích thước màn hình khác nhau cũng như Mẹo. Từ xếp tầng có nghĩa là một kiểu được áp dụng cho phần tử gốc cũng sẽ áp dụng cho tất cả các phần tử con trong phần tử gốc. Vì vậy, nếu bạn đặt màu của văn bản nội dung thành "xanh dương", thì tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong nội dung cũng sẽ có cùng màu [trừ khi bạn chỉ định màu khác] CSS có thể được thêm vào tài liệu HTML theo 3 cách Thuộc tính CSS Tải xuống các khóa học và học mọi lúc, mọi nơi
Sử dụng CSS
01 bên trong các phần tử HTMLSite Name
02 xác định màu văn bản sẽ được sử dụngSite Name
03 xác định phông chữ sẽ được sử dụngSite Name
Thuộc tính CSS
Site Name
Thí dụ
Sử dụng các thuộc tính CSS color, font-family và font-size
Đây là một tiêu đề
Đây là một đoạn
Đường viền CSS
Thuộc tính CSS
Site Name
Mẹo. Bạn có thể xác định đường viền cho gần như tất cả các phần tử HTML
Thí dụ
Sử dụng thuộc tính đường viền CSS.
p {
đường viền. Màu xanh bột đặc 2px;
}
Đệm CSS
Thuộc tính CSS
Site Name
Thí dụ
Sử dụng thuộc tính CSS border và padding
p {
đường viền. màu xanh bột đặc 2px;
phần đệm. 30px;
}
Ký quỹ CSS
Thuộc tính CSS
Site Name
Thí dụ
Sử dụng thuộc tính đường viền và lề CSS
p {
đường viền. Màu xanh bột đặc 2px;
lề. 50px;
}
Liên kết đến CSS bên ngoài
Biểu định kiểu bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại
Mặc dù hình ảnh chiếm phần lớn trọng lượng trang của hầu hết các trang web, nhưng HTML và CSS gọi và triển khai những hình ảnh này cũng ảnh hưởng đến tổng thời gian tải trang. Cách bạn cấu trúc và đặt tên cho đánh dấu của mình có thể giúp bạn duy trì trang web của mình và có hiệu suất cao; . Giữ cho cả HTML và CSS của bạn sạch sẽ và có ý nghĩa sẽ giúp trang web tải nhanh hơn và trải nghiệm người dùng tổng thể tốt hơn. Trong chương này, chúng tôi sẽ đề cập đến các phương pháp hay nhất để tải HTML, CSS, phông chữ và JavaScript trên trang web của bạn
Dọn dẹp HTML của bạn
HTML sạch là nền tảng cho một trang web có hiệu suất cao. Mặc dù các trang web cũ hơn có xu hướng bị nhiều nhà thiết kế hoặc nhà phát triển chỉnh sửa và thêm vào đánh dấu, nhưng ngay cả các trang web mới hơn cũng có thể hưởng lợi từ việc quét sạch—tìm kiếm các kiểu nhúng hoặc nội tuyến, các phần tử không sử dụng hoặc không cần thiết cũng như các lớp và ID được đặt tên kém
Trong Chương 1, tôi đã đề cập rằng tôi có thể giảm một nửa thời gian tải trang cho một trang web chỉ bằng cách dọn dẹp đánh dấu và kiểu của nó. Tôi tập trung vào việc loại bỏ HTML và CSS cồng kềnh, dẫn đến kích thước tệp hình ảnh HTML, CSS và biểu định kiểu nhỏ hơn
Khi xem HTML của trang web của bạn, hãy để ý
- Kiểu nhúng hoặc kiểu nội tuyến sẽ được chuyển sang biểu định kiểu
- Các phần tử không cần kiểu dáng đặc biệt [các phần tử HTML không cần thiết, còn được gọi là “divitis” và được trình bày trong phần tiếp theo]
- Mã cũ, đã nhận xét có thể bị xóa
Nếu một trang web đã được chỉnh sửa bởi nhiều nhà phát triển hoặc nhà thiết kế, có thể có đánh dấu dường như không được sử dụng hoặc không cần thiết. Khi trang web cũ đi, các kỹ thuật lỗi thời, chẳng hạn như sử dụng bảng để bố trí, có xu hướng tồn tại mà không được làm sạch hoặc cập nhật theo các phương pháp hay nhất mới hơn. Hãy tàn nhẫn khi loại bỏ bất kỳ HTML thừa hoặc lỗi thời nào. Hiếm khi có lý do chính đáng “chỉ trong trường hợp” để giữ phần đánh dấu không cần thiết hoặc phức tạp;
bệnh viêm cổ tử cung
“Divitis” xảy ra khi bạn có nhiều thành phần trong HTML phục vụ ít mục đích khác ngoài việc giúp bạn định kiểu nội dung. Thường xảy ra tình trạng lộn xộn khi nhiều phần tử div thay thế các phần tử HTML ngữ nghĩa, có ý nghĩa hơn, nhưng sự lộn xộn có thể xảy ra với bất kỳ loại phần tử HTML nào
Site Name
Không rõ tại sao chúng ta có quá nhiều yếu tố trong ví dụ trước; . Nhưng đây chắc chắn là một dấu hiệu cho thấy có điều gì đó không ổn và cần được kiểm tra bằng mã đánh dấu của bạn. Thông thường, divitis là một dấu hiệu cho thấy tác giả mã bị choáng ngợp với bản chất xếp tầng của các kiểu và muốn cố gắng ghi đè lên giao diện của một phần tử và đã làm như vậy bằng cách thêm các phần tử cha bổ sung để nhắm mục tiêu bằng CSS
Divitis nên được loại bỏ trong đánh dấu của bạn. Nó tăng thêm độ phồng cho cả HTML và CSS của bạn và bằng cách loại bỏ các phần tử không cần thiết, bạn sẽ tạo ra một hệ thống phân cấp đơn giản và có ý nghĩa hơn nhiều cho trang web của mình. Nếu có thể, hãy sử dụng các phần tử HTML5 [chẳng hạn như
Site Name
Site Name
Để loại bỏ chứng viêm cổ tử cung, hãy xem các kiểu được áp dụng cho các thành phần trong khu vực cồng kềnh. Xem liệu có thể kết hợp các khai báo kiểu và áp dụng chúng cho các phần tử HTML ngữ nghĩa, chính xác để tạo ra một hệ thống phân cấp HTML tốt hơn, chẳng hạn như
Site Name
Hoặc đơn giản
Site Name
Đôi khi, bạn sẽ cần giữ lại một số thành phần cho bố cục và cấu trúc ngữ nghĩa, chẳng hạn như thành phần tiêu đề trong ví dụ này. Nhưng thường xuyên hơn không, việc kiểm tra và giảm số lượng thành phần trên trang của bạn sẽ làm bạn ngạc nhiên;
ngữ nghĩa
Tên phần tử ngữ nghĩa là những tên đại diện cho loại nội dung trong phần tử. Các lựa chọn yếu tố ngữ nghĩa tốt bao gồm các yếu tố HTML5 đại diện như
Site Name
Login
Username:
Password:
Login
Username:
Password:
Login
Username:
Password:
Login
Username:
Password:
Login
Username:
Password:
Đổi tên các phần tử để có nhiều ngữ nghĩa hơn sẽ giúp bạn tạo cấu trúc HTML tốt hơn cho trang của mình và cũng sẽ cho phép bạn tạo các mẫu thiết kế để sử dụng lại trên trang web. Ví dụ: đây là một cấu trúc HTML vô nghĩa với một chút yếu tố được đưa vào
Login
Username:
Password:
Phong cách của chúng tôi cho thanh bên này và biểu mẫu đăng nhập
Site Name
Trong ví dụ này, không có gì đặc biệt có ý nghĩa về cách mà các phần tử này hiện được đặt tên;
Ngoài ra, không rõ kiểu nào trong số những kiểu này là mẫu thiết kế có thể được sử dụng lại trên toàn bộ trang web. Trong CSS này, chúng tôi đặt
Login
Username:
Password:
Login
Username:
Password:
Site Name
Chúng tôi đã thay thế cấu trúc phi ngữ nghĩa hiện có bằng một cấu trúc ngữ nghĩa hơn và quy ước đặt tên. Bây giờ chúng tôi có một thanh bên, một tên rõ ràng và duy nhất cho biểu mẫu của chúng tôi và một danh sách không có thứ tự để nhóm các thành phần của biểu mẫu lại với nhau. Mặc dù nó dẫn đến nhiều CSS hơn một chút, nhưng đây thực sự là một điều tốt cho sự sạch sẽ tổng thể của mã của chúng tôi
Site Name
Như bạn có thể thấy, sẽ dễ dàng giữ tất cả các danh sách không có thứ tự trong các biểu mẫu chuẩn trên trang web của chúng tôi theo cùng một cách. Tương tự, một tiêu đề [trong trường hợp này là
Login
Username:
Password:
Login
Username:
Password:
Site Name
Đặt tên theo ngữ nghĩa cho phép bạn duy trì HTML và CSS của mình theo thời gian vì nó dễ đọc, kiểm tra và chỉnh sửa hơn theo thời gian. HTML và CSS sạch hơn thường tạo các tệp nhỏ hơn, giúp cải thiện thời gian tải trang và cũng giảm nguy cơ phình to trọng lượng trang khi trang web già đi. Bởi vì chúng có ý nghĩa hơn, cấu trúc ngữ nghĩa cho phép thiết kế và phong cách có thể tái sử dụng nhiều hơn, từ đó tạo ra trải nghiệm người dùng cuối tốt hơn
khả năng tiếp cận
Ngoài khả năng chỉnh sửa và hiệu suất của đánh dấu ngữ nghĩa, HTML sạch sẽ mang lại lợi ích cho người dùng có nhu cầu về khả năng truy cập. HTML ngữ nghĩa làm cho hệ thống phân cấp nội dung có ý nghĩa đối với trình duyệt, công cụ tìm kiếm và trình đọc màn hình. Với các thẻ HTML5 mới như
Site Name
Site Name
Nguyên tắc truy cập nội dung web [WCAG] cung cấp thêm thông tin về cách giúp người khuyết tật có thể truy cập trang web của bạn. Nếu bạn đang sử dụng hệ thống phân cấp HTML rõ ràng và có ngữ nghĩa, thì bạn đang trên đường làm cho trang web của mình có thể truy cập được. World Wide Web Consortium [W3C] cung cấp đầy đủ WCAG 2. 0 danh sách kiểm tra để giúp bạn hiểu và đáp ứng tất cả các yêu cầu WCAG hiện tại
Khung và lưới
Có rất nhiều khung và lưới hữu ích trên Web hỗ trợ các nhà thiết kế và nhà phát triển đang muốn bắt đầu một trang web nhưng không muốn bắt đầu từ đầu. Bootstrap, HTML5 Boilerplate và 960 Grid là những ví dụ về CSS, HTML và JavaScript nền tảng có thể giúp bạn bắt đầu thiết kế trang web
Tuy nhiên, lưới và khung có chi phí. Bởi vì chúng được thiết kế để bao gồm một số lượng lớn các trường hợp sử dụng chung, nên chúng sẽ bao gồm nhiều thứ mà bạn không cần trên trang web của mình. Nội dung không liên quan này có thể cản trở thời gian tải trang của bạn hơn là hỗ trợ thời gian phát triển của bạn;
Dưới đây là một số kiểu được bao gồm trong khung soạn thảo HTML5. Chúng sẽ là các kiểu hữu ích cho các trang web bao gồm các phần tử
Site Name
Site Name
Site Name
Site Name
Nếu bạn thực sự muốn sử dụng một khung, hãy đảm bảo xóa sạch tất cả tài liệu không liên quan trước khi người dùng cuối cố tải trang web của bạn. Hãy nhớ rằng lưới và khung có khả năng không cung cấp cấu trúc ngữ nghĩa mà chúng ta đang hướng tới, vì chúng chung chung và phù hợp với tất cả. Một số, chẳng hạn như HTML5 Boilerplate, cung cấp cho bạn các tùy chọn xây dựng tùy chỉnh mà bạn nên tận dụng, như trong Hình 4-1
Càng nhiều càng tốt, hãy làm sạch cấu trúc đặt tên và thành phần của các trang của bạn sau khi triển khai khung hoặc lưới sẵn dùng. Không có lý do gì để buộc người dùng cuối của bạn tải các kiểu, đánh dấu hoặc JavaScript không cần thiết
Làm sạch CSS của bạn
Hệ thống phân cấp HTML chu đáo và các lựa chọn có chủ ý về bố cục và thiết kế trang web của bạn sẽ thiết lập cho bạn một CSS rõ ràng, dễ chỉnh sửa và hiệu quả. Khi bạn kiểm tra CSS hiện có của trang web để tìm cách làm sạch nó, hãy nghĩ về cách nó phản ánh phân cấp HTML và các lựa chọn thiết kế của bạn. Có lẽ bạn sẽ thấy
- Tên phần tử không có ý nghĩa ngữ nghĩa
36 khai báoSite Name- Hack dành riêng cho trình duyệt
- Rất nhiều tính đặc hiệu của bộ chọn
Tìm kiếm các yếu tố không được sử dụng, các kiểu có thể được kết hợp hoặc viết lại để đạt hiệu quả và các cách lỗi thời để xử lý sự không nhất quán của trình duyệt. Khi trang web cũ đi, chúng tôi cần thường xuyên kiểm tra CSS của mình và xem xét triển khai công nghệ và kỹ thuật mới để cải thiện thời gian tải trang. Chúng ta càng thận trọng hơn với hệ thống phân cấp trang web và mục đích đằng sau các lựa chọn thiết kế của mình, thì CSS của chúng ta càng sạch sẽ. Khả năng bảo trì mã và hiệu suất trang web đi đôi với nhau
Kiểu không sử dụng
Nếu bạn có một trang web hiện có, nhiệm vụ dọn dẹp CSS đầu tiên cần giải quyết là xóa các kiểu không sử dụng. Khi trang web cũ đi, các kiểu không sử dụng sẽ tăng lên mà không được chú ý, làm tăng thêm sự phình to cho biểu định kiểu của bạn. Các kiểu không sử dụng có thể còn sót lại từ các thành phần đã xóa hoặc toàn bộ trang trên trang web của bạn, các thành phần đã được đổi tên hoặc thiết kế lại hoặc ghi đè từ các tiện ích của bên thứ ba mà bạn không còn sử dụng nữa. Không có lý do gì để giữ các bộ chọn hoặc kiểu không sử dụng trong biểu định kiểu của bạn và buộc người dùng cuối của bạn tải chúng xuống;
Có một số công cụ hiện có sẵn cho bạn để tìm CSS tiềm năng để loại bỏ. Dust-Me Selectors là một plug-in trình duyệt dành cho Firefox và Opera có thể quét mã HTML của trang web của bạn để tìm các bộ chọn không sử dụng. Trong Chrome DevTools, có tab Kiểm tra [Hình 4-2] cho phép bạn chạy kiểm tra Hiệu suất trang web và xem danh sách các quy tắc CSS không được sử dụng
Hãy cảnh giác với kết quả đầu ra của những công cụ này; . Những công cụ này rất tuyệt vời để giúp bạn có được danh sách bộ chọn ban đầu để kiểm tra trong biểu định kiểu của mình và sau đó bắt đầu thử nghiệm loại bỏ chúng
Kết hợp và cô đọng các kiểu
Các kiểu trùng lặp cho các yếu tố độc đáo trên trang web của bạn là một chỉ báo tuyệt vời về kiểu dáng nhất quán và thiết kế chu đáo. Xem qua các biểu định kiểu của bạn để tìm cơ hội kết hợp hoặc cô đọng các kiểu này, vì chúng sẽ giúp ích cho cả hiệu suất và khả năng bảo trì mã của bạn. Ở đây chúng tôi có hai yếu tố chia sẻ phong cách tương tự
Site Name
Sự khác biệt duy nhất giữa cách hai phần tử này được tạo kiểu là
Site Name
Site Name
Site Name
Site Name
Site Name
Hoặc, hãy tự hỏi. có lý do nào khiến
Site Name
Site Name
Nếu bạn thấy rằng mẫu này sẽ được lặp lại thường xuyên, bạn cũng có thể khái quát hóa tên lớp để nó có thể được sử dụng trên toàn bộ trang web, thay vì tiếp tục thêm tên lớp vào danh sách được phân tách bằng dấu phẩy này
Sự khác biệt nhỏ giữa các yếu tố chia sẻ nhiều phong cách có thể là do nhiều thứ. các phiên bản web hoàn hảo về pixel của mô hình PSD, cập nhật ngẫu nhiên vào một nơi tồn tại một phong cách chứ không phải một phong cách khác, v.v. Trong suốt các biểu định kiểu của mình, bạn có thể thấy nhiều chiều cao, chiều rộng, lề và phần đệm dành riêng cho từng pixel khác nhau được xác định. Chúng cố ý khác nhau một chút hay chúng có thể được bình thường hóa?
Tìm kiếm những loại cơ hội này để bình thường hóa và tạo ra các mẫu. Có lẽ những yếu tố này chia sẻ cùng một giao diện cố ý; . Việc kết hợp chúng để xác định các kiểu dùng chung sẽ giúp bạn tiết kiệm thời gian phát triển trong tương lai và tệp CSS ngắn hơn sẽ giúp bạn giảm thời gian tải trang ngay bây giờ
Ngoài ra, bạn có thể bắt đầu xác định các quy tắc về khoảng cách và kích thước phông chữ dễ thực hiện. Một cách tuyệt vời để đưa ra những quyết định này dễ dàng hơn là xem xét cơ sở của bạn
Site Name
Site Name
- Kích thước phông chữ tiêu đề theo bội số của 14 px
- Lề và đệm theo bội số của 1. 4 em
- Lưới tùy chỉnh dựa trên 14 px hoặc 1. tăng 4 em
CSS cũng cho phép bạn tận dụng sức mạnh của các khai báo kiểu tốc ký. Các khai báo tốc ký, chẳng hạn như
Login
Username:
Password:
Login
Username:
Password:
78Site Name
79Site Name
80Site Name
81Site Name
82Site Name
83Site Name
84Site Name
85Site Name
Bạn có thể đặt một, một số hoặc tất cả các giá trị này khi sử dụng
Login
Username:
Password:
Site Name
Chúng ta có thể đặt thuộc tính tốc ký cho các kiểu phổ biến giữa các phần tử và sau đó tạo kiểu cho những khác biệt nhỏ bằng cách sử dụng các thuộc tính [viết tắt] riêng lẻ
Site Name
Điều này cho phép chúng tôi viết CSS dễ đọc. Nếu chúng tôi đã xác định lại phần khai báo đường viền tốc ký một lần nữa cho
Site Name
Đôi khi, việc đổi tên các phần tử có thể giúp bạn kết hợp và cô đọng các kiểu. Hãy xem các yếu tố có kiểu dáng tương tự này
Site Name
Site Name
Trong trường hợp như thế này, có thể đổi tên các thành phần để tạo hệ thống phân cấp ngữ nghĩa hơn cũng như CSS sạch hơn. Sử dụng phán đoán tốt nhất của bạn. Trong trường hợp này, chúng tôi sẽ quyết định rằng trên thực tế,
Site Name
Site Name
Site Name
Site Name
Bằng cách đổi tên chúng trong HTML của chúng tôi, chúng tôi đã tự động kết hợp các kiểu ban đầu trong CSS của mình, vì giờ đây tất cả chúng đều nằm trong khối kiểu
Site Name
Site Name
Site Name
Site Name
Cuối cùng, nếu bạn sử dụng bộ tiền xử lý CSS như LESS hoặc SASS, bạn vẫn có thể nhận được một tệp CSS cồng kềnh với nhiều cơ hội để tái sử dụng hoặc thu gọn các kiểu. Lập kế hoạch tốt và các mẫu thiết kế có mục đích, có thể tái sử dụng sẽ giúp bạn phát triển CSS bằng bộ tiền xử lý, giống như khi bạn viết CSS thông thường. Tập trung vào việc giữ bất kỳ mixin nào [khối kiểu có thể tái sử dụng được xác định một lần] hiệu quả nhất có thể và đảm bảo theo dõi đầu ra của biểu định kiểu của bạn theo thời gian. Các tệp cồng kềnh có thể theo dõi bạn và bạn nên thường xuyên và liên tục kiểm tra hiệu suất CSS của mình
Hình ảnh biểu định kiểu sạch
Khi bạn đã kết hợp và cô đọng các kiểu, hãy xem bất kỳ hình ảnh nào được gọi từ biểu định kiểu của bạn. Hãy nhớ rằng, hình ảnh chiếm phần lớn trọng lượng trang của hầu hết các trang web, do đó, việc giảm kích thước và số lượng yêu cầu hình ảnh biểu định kiểu sẽ giúp tăng đáng kể thời gian tải trang của trang web của bạn
Đầu tiên, tìm kiếm cơ hội để tạo sprites. Nếu bạn có nhiều biểu tượng hoặc hình ảnh nhỏ khác được sử dụng trên toàn bộ trang web, một sprite có thể giúp ích rất nhiều trong việc tối ưu hóa các yêu cầu. Đọc “Sprites” để biết thêm thông tin về cách sprite tăng hiệu suất và cách triển khai chúng
Thứ hai, khi các trang web cũ đi, các nhân vật của họ cũng vậy. Bạn có thể nhận thấy rằng các họa tiết hiện có bao gồm các hình ảnh lỗi thời hoặc không còn được sử dụng. Kiểm tra các sprite hiện tại của bạn. có phần nào có thể được gỡ bỏ?
Tiếp theo, hãy tìm cơ hội để thay thế hình ảnh biểu định kiểu của bạn bằng các dải màu CSS3, URI dữ liệu hoặc SVG. Bạn có thể đọc thêm về cách tạo độ dốc trong “CSS3” và thêm về cách tạo các thay thế SVG hiệu suất cao trong “SVG. ” Độ dốc CSS3 là sự thay thế tuyệt vời cho bất kỳ hình nền lặp lại nào hiện đang được triển khai bằng CSS; . Thay thế hình ảnh bằng CSS3 có thể tăng tốc trang web của bạn rất nhanh. Tương tự, thay thế hình ảnh biểu định kiểu bằng SVG có thể cải thiện thời gian tải trang của bạn, vì tệp SVG có thể thay thế cả hình ảnh retina và nonretina trong biểu định kiểu của bạn
Đảm bảo rằng mọi biểu tượng mới hoặc hình ảnh khác được thêm vào biểu định kiểu của bạn đều có ý nghĩa hoặc mục đích trong thiết kế trang web của bạn. Ghi lại những điều này trong một hướng dẫn về phong cách để các nhà phát triển hoặc nhà thiết kế khác có thể xem những biểu tượng nào đã được thêm vào trang web và cách chúng hiện đang được sử dụng. Thông thường, tình trạng leo thang hình ảnh biểu định kiểu xảy ra do không rõ những hình ảnh nào đã có sẵn để sử dụng trên một trang web. Tôi đã thấy nhiều trang web phát triển nhiều cách để biểu thị cảnh báo hoặc cảnh báo bằng nhiều biểu tượng và đánh dấu khác nhau, thay vì chỉ tuân theo một quy ước kiểu dáng duy nhất. Khi bạn kiểm tra biểu định kiểu của mình để tìm cơ hội cho các mẫu thiết kế, hãy xem xét số lượng hình ảnh biểu định kiểu được gọi và liệu chúng có thể được cô đọng hay không
Xóa tính đặc hiệu
Khi nói đến CSS, tính đặc hiệu là thuật ngữ chỉ cách bạn viết ra các bộ chọn để giúp trình duyệt xác định quy tắc CSS nào được áp dụng. Có nhiều loại bộ chọn khác nhau và mỗi loại có trọng lượng riêng; . Nếu hai bộ chọn áp dụng cho cùng một phần tử, bộ chọn có độ đặc hiệu cao hơn sẽ thắng
Bạn sẽ thường thấy các bộ chọn quá cụ thể trong tệp CSS. Điều này thường xảy ra khi một nhà thiết kế hoặc nhà phát triển đang cố thêm trọng lượng để ghi đè các kiểu đã xác định trước đó áp dụng cho một bộ chọn nhất định. Ví dụ
Site Name
Tại sao tác giả biểu định kiểu này chọn thêm tất cả các bộ chọn này vào một hàng?
Site Name
Có thể tác giả thực sự cần tất cả những đặc điểm đó để thiết lập một phong cách chính xác. Tuy nhiên, tính cụ thể này cũng là một chỉ báo rằng một cái gì đó trong biểu định kiểu hoặc hệ thống phân cấp HTML có thể hiệu quả hơn nhiều. Bộ chọn không hiệu quả có xu hướng xảy ra do CSS ghi đè CSS quá cụ thể trước đó và đây là một điều tốt nên theo dõi để bạn có thể tìm các khu vực cần dọn dẹp và làm cho hiệu quả hơn. Điều này xảy ra thường xuyên trong các tổ chức lớn hơn, nơi có nhiều người chạm vào cùng một đoạn mã
Các bộ chọn không hiệu quả từng được coi là vốn dĩ không tốt cho hiệu suất, nhưng ngày nay điều đó ít được quan tâm hơn với các trình duyệt hiện đại có hiệu suất cao. Tuy nhiên, việc dọn sạch bộ chọn vẫn là một việc làm thông minh vì chúng có thể giúp bạn duy trì kiến trúc giao diện người dùng của mình
CSS của bạn càng hiệu quả thì nó càng hoạt động tốt hơn. Giảm tính đặc hiệu có nghĩa là sẽ dễ dàng ghi đè các kiểu bằng sức mạnh xếp tầng tự nhiên của CSS, thay vì trượt theo trọng số bổ sung hoặc quy tắc
Site Name
Site Name
Tối ưu hóa phông chữ web
Phông chữ web thêm nhiều yêu cầu và trọng lượng trang vào trang web của bạn. Phông chữ là ví dụ kinh điển về cân nhắc tính thẩm mỹ và tốc độ trang;
Đang tải một phông chữ web trông như thế này
Site Name
Hỗ trợ cho Định dạng phông chữ mở trên web, hoặc WOFF, đang tăng lên, do đó, tùy thuộc vào cơ sở người dùng của bạn và trình duyệt mà trang web của bạn hỗ trợ, bạn có thể chuyển sang khai báo
Site Name
Site Name
Sau đó, bạn sẽ áp dụng phông chữ này cho bộ chọn bằng cách sử dụng
Site Name
Site Name
Tại sao Bao gồm Phông chữ Dự phòng?
Sẽ có một nhóm nhỏ khách truy cập vào trang web của bạn có trình duyệt không hỗ trợ phông chữ web hoặc những người đã tắt tính năng tải phông chữ web. Cũng có khả năng phông chữ của bạn bị hỏng hoặc trình duyệt không thể tìm thấy nó. Nếu trình duyệt của người dùng không thể tìm thấy phông chữ đầu tiên trong danh sách
Site Name
Site Name
Site Name
Các tệp phông chữ web có nhiều kích cỡ, từ chỉ vài kilobyte đến 200 kilobyte. Kiểm tra các tệp phông chữ web của bạn để xem chúng lớn như thế nào và tìm kiếm các cơ hội sau để giảm trọng lượng của chúng
- Bạn chỉ cần một vài ký tự thay vì toàn bộ bảng chữ cái và tất cả các dấu chấm câu, chẳng hạn như khi bạn chỉ áp dụng một phông chữ cho logo?
- Phông chữ có hỗ trợ nhiều ngôn ngữ không?
- Bạn có thể loại bỏ bất kỳ ký tự riêng lẻ không cần thiết nào không?
Đặt con ký tự là một công cụ mạnh mẽ để giảm kích thước tệp phông chữ web của bạn. Nếu bạn đang sử dụng phông chữ từ dịch vụ phông chữ được lưu trữ như Google, bạn có thể chọn chỉ tải một tập hợp con ký tự nhất định. Trong ví dụ này, chúng tôi sẽ tải phông chữ Philosopher của Google với tập hợp con Cyrillic
Site Name
Nếu bạn chỉ muốn tải một số ký tự nhất định từ phông chữ được lưu trữ trên Google, bạn cũng có thể chỉ định những ký tự đó. Ví dụ: chúng ta có thể tải phông chữ Philosopher chỉ với các ký tự H, o, w, d và y
Site Name
Các phông chữ được lưu trữ bên ngoài như phông chữ từ Google có nhiều khả năng đã được lưu vào bộ nhớ cache hơn cho khách truy cập của bạn, nhưng nếu chúng không được lưu vào bộ nhớ cache cho một khách truy cập cụ thể thì chúng sẽ yêu cầu tra cứu thêm và yêu cầu tìm nạp từ miền bên ngoài. Các phông chữ tự lưu trữ sẽ tiết kiệm tra cứu DNS bổ sung đó nhưng sẽ không được lưu vào bộ đệm trong lần đầu tiên khách truy cập vào trang web của bạn
Một lợi ích bổ sung của việc tự lưu trữ phông chữ là tùy chỉnh tệp phông chữ. Nếu bạn đang lưu trữ phông chữ web của riêng mình, bạn có thể chạy nó thông qua một công cụ như Font Squirrel’s Webfont Generator và chọn một tập hợp con ký tự tùy chỉnh để tối ưu hóa tệp phông chữ, như thể hiện trong Hình 4-3
Bạn cũng có thể muốn sử dụng nhiều trọng lượng phông chữ cho phông chữ web của mình. Cân nhắc về số lượng phông chữ bạn tải; . Sử dụng càng ít trọng số thay thế càng tốt và đảm bảo cân bằng giữa tính thẩm mỹ và hiệu suất với phông chữ [đọc thêm về lựa chọn này và cách đo lường nó trong Chương 7]
Một tối ưu hóa bổ sung mà bạn có thể thực hiện đối với kỹ thuật tải phông chữ web của mình là chỉ tải phông chữ trên màn hình lớn. Điều này sẽ loại bỏ các yêu cầu và trọng lượng trang tăng thêm trên các thiết bị nhỏ hơn như điện thoại thông minh, có xu hướng đạt hiệu suất cao hơn [đọc thêm về lý do tại sao trong “Mạng di động”]. Sử dụng truy vấn phương tiện để áp dụng phông chữ web
Site Name
Hành động quan trọng nhất bạn có thể thực hiện khi áp dụng phông chữ web là cân nhắc kỹ về cách sử dụng chúng. Ghi lại thời điểm và cách sử dụng một độ dày phông chữ cụ thể để những người khác làm việc trên trang web của bạn có thể sử dụng lại mục đích đánh dấu này và hiểu khi nào thì thích hợp để áp dụng độ dày phông chữ. Làm rõ rằng chỉ nên sử dụng trọng lượng hiển thị cụ thể cho một loại tiêu đề nhất định hoặc bạn dành trọng lượng văn bản cho các mẫu thiết kế đặc biệt. Điều này sẽ giúp giáo dục các nhà thiết kế và nhà phát triển khác đang làm việc trên trang web của bạn và hy vọng sẽ giúp giữ cho trang web của bạn chạy nhanh nhất có thể. Đọc thêm về lợi ích hiệu suất của việc tạo hướng dẫn phong cách trong “Hướng dẫn phong cách. ”
Tạo đánh dấu có thể tái sử dụng
Tạo các mẫu thiết kế bằng cách sử dụng đánh dấu có thể tái sử dụng là chìa khóa để duy trì hiệu suất khi thiết kế trang web của bạn phát triển. Khi bạn đưa ra quyết định về ý nghĩa của hệ thống phân cấp, bố cục và cảm nhận trang web của mình, bạn có cơ hội cân nhắc về việc tải nội dung và tạo cơ hội sử dụng lại đánh dấu trên toàn trang web. Các mẫu thiết kế tiết kiệm cả thời gian phát triển và thời gian tải trang. Tái sử dụng đánh dấu sẽ
- Tạo cơ hội cho bộ nhớ đệm nội dung
- Ngăn chặn các nhà thiết kế hoặc nhà phát triển phát minh lại bánh xe
- Loại bỏ các yêu cầu nội dung không cần thiết khi nội dung mới được thêm vào
- Giúp bạn tách biệt các kiểu và nội dung không còn cần thiết
Bằng cách bình thường hóa các màu được sử dụng trên trang web, ghi lại các mẫu có thể tái sử dụng như spinners và sprite, đồng thời xác định thời điểm và cách triển khai các nội dung như phông chữ, bạn có thể trang bị cho nhóm của mình để đưa ra quyết định thông minh về thời gian tải trang khi trang web của bạn phát triển
Hãy lấy màu chuẩn hóa làm ví dụ. Kiểm tra tệp CSS của trang web của bạn và tìm tất cả các giá trị màu được sử dụng. Có bao nhiêu sắc thái khác nhau của màu xám được thực hiện? . bạn có một giá trị thập lục phân duy nhất được lặp lại trên toàn bộ trang web hay có các biến thể về độ sáng và độ bão hòa xung quanh một chủ đề không?
Bạn càng có nhiều biến thể về màu sắc trong thiết kế của mình, những màu đó sẽ càng ít ý nghĩa hơn và biểu định kiểu của bạn có thể trở nên lộn xộn hơn. Thu thập tất cả chúng vào một nơi và xem cái nào có thể được cô đọng. Khi bạn thu hẹp lựa chọn màu sắc của mình, hãy bắt đầu xác định lý do tại sao những màu này có thể được sử dụng. Ví dụ: thư viện mẫu của List Apart bao gồm mô tả về thời điểm sử dụng một số màu nhất định [Hình 4-4]
Khi tôi làm việc trên một trang web có nhiều màu vàng ánh kim và màu xám đậm, tôi đã làm sạch biểu định kiểu để làm cho màu sắc của trang web nhất quán hơn. Tôi đã ghi lại mã thập lục phân nào sẽ sử dụng khi một nhà thiết kế muốn sử dụng màu vàng đậm, vàng nhạt, thông báo cảnh báo màu đỏ, thông báo “đã thay đổi” màu xanh lục, v.v. Tôi cũng đã xem xét và dọn dẹp tất cả việc sử dụng màu xám, xác định giá trị nào nên được sử dụng và khi nào [chẳng hạn như
Site Name
Site Name
hướng dẫn phong cách
Tạo các mẫu thiết kế có thể tái sử dụng là tuyệt vời và chìa khóa để tiếp tục sử dụng lại chúng là tài liệu. Hướng dẫn phong cách có thể là tài nguyên tuyệt vời cho nhiều khán giả. biên tập viên, nhà phát triển, nhà thiết kế và bất kỳ ai khác có thể tìm kiếm hướng dẫn về các phương pháp hay nhất về thiết kế và phát triển trang web của bạn
Hướng dẫn về phong cách giới thiệu cách tốt nhất để triển khai mã và nội dung yêu cầu, cho phép bạn đảm bảo rằng những người khác làm việc trên trang web của bạn cũng đang giúp trang web đạt hiệu suất cao nhất có thể. Đặt nội dung biểu tượng trang web của bạn ở một nơi và tối ưu hóa các tệp nhỏ nhất có thể và ở định dạng tốt nhất cho công việc sẽ giúp đảm bảo rằng việc triển khai biểu trưng trong tương lai cũng tuân theo các phương pháp hay nhất. Ghi lại chỉ báo tải được chuẩn hóa và tối ưu hóa cho trang web của bạn sẽ giúp nhà thiết kế tương lai dễ dàng triển khai mô hình này và không phải phát minh lại bánh xe bằng một công cụ quay vòng mới, chậm và nặng. Đặt nỗ lực vào hướng dẫn phong cách của bạn bây giờ sẽ giúp đảm bảo rằng trang web của bạn vẫn nhanh nhất có thể trong tương lai
Cân nhắc đưa các thông tin sau vào hướng dẫn phong cách của bạn
- Các giá trị màu thập lục phân và khi nào chúng nên được sử dụng
- Các lớp nút và cách sử dụng chúng
- Sprites và lớp nào tương ứng với biểu tượng nào bên trong chúng
- Kiểu chữ, bao gồm cách tạo kiểu cho tiêu đề và cách nhập và áp dụng bất kỳ phông chữ web nào
Khi bạn ghi lại các phương pháp hay nhất, hãy bao gồm các ghi chú về cách triển khai các kiểu này. Thêm mã đánh dấu HTML hoặc CSS mẫu, cách bao gồm tệp JavaScript phù hợp hoặc bất kỳ ghi chú nào khác về cách triển khai hiệu quả. Ví dụ: hướng dẫn về phong cách của Yelp bao gồm một phần về các nút giới thiệu cách phù hợp để tạo kiểu cho các nút chính, phụ và thứ ba, cũng như một phần về các kiểu nút không dùng nữa không còn được sử dụng nữa [Hình 4-5]
Làm cho mọi đánh dấu dễ dàng sao chép và dán để rào cản đối với việc triển khai xuất sắc thấp đối với các nhà thiết kế và nhà phát triển trong tương lai. Ví dụ: hướng dẫn về phong cách của Starbucks bao gồm hướng dẫn cách triển khai phông chữ biểu tượng của công ty, với ví dụ về HTML và CSS cũng như các ví dụ được nhúng của từng biểu tượng [Hình 4-6]. Việc sử dụng lại các mẫu và sử dụng lại các nội dung trong hướng dẫn phong cách của bạn phải dễ dàng và trực quan nhất có thể
Sự kết hợp của các trường hợp sử dụng dễ hiểu, đánh dấu có thể sao chép và dán dễ dàng cũng như các ví dụ đẹp mắt sẽ giúp những người khác làm việc trên trang web của bạn dễ dàng triển khai các mẫu này. Hãy kỹ lưỡng trong tài liệu của bạn trong khi vẫn giữ cho nó trực quan. Ví dụ: khi ghi lại cách sử dụng phông chữ trên web, hãy phác thảo các trọng số phông chữ tiềm năng mà bạn có thể đưa vào, cách triển khai từng loại một cách hiệu quả và các quy tắc về thời điểm nên sử dụng chúng, giống như chúng tôi đã làm trong hướng dẫn về phong cách của Etsy [Hình 4-7]
Các mẫu có thể tái sử dụng giúp tiết kiệm thời gian tải trang cũng như thời gian thiết kế và phát triển. Khi thiết kế trang web của bạn thay đổi trong tương lai, việc cập nhật tất cả các phiên bản của một mẫu cụ thể sẽ dễ dàng hơn vì chúng sẽ chia sẻ cùng nội dung và kiểu. Càng nhiều mẫu được sử dụng lại, thì khả năng các kiểu và nội dung khác đã được lưu vào bộ đệm càng cao, biểu định kiểu của bạn sẽ càng ngắn và trang web sẽ tải càng nhanh
Cân nhắc đánh dấu bổ sung
Sau khi bạn đã dọn dẹp đánh dấu và kiểu của mình, bạn có thể thực hiện các tối ưu hóa bổ sung cho thứ tự tải, thu nhỏ và bộ nhớ đệm của nội dung để cải thiện thời gian tải trang. Chủ ý tải nội dung và hiểu cách chúng được phân phối tới người dùng của bạn sẽ giúp bạn cải thiện trải nghiệm người dùng tổng thể trên trang web của mình
Đang tải CSS và JavaScript
Có hai quy tắc chính khi tải CSS và JavaScript
- Tải CSS từ
93Site Name - Tải JavaScript ở cuối trang
Bây giờ bạn đã đọc về đường dẫn kết xuất quan trọng trong "Đường dẫn kết xuất quan trọng", bạn biết rằng CSS chặn kết xuất. Nếu các biểu định kiểu được bao gồm ở gần cuối trang, chúng sẽ cấm trang hiển thị nội dung của nó càng sớm càng tốt. Các trình duyệt muốn tránh phải vẽ lại các thành phần của trang nếu kiểu của chúng đang thay đổi;
Giảm các biểu định kiểu của bạn xuống càng ít tệp càng tốt sẽ giúp giảm tổng số yêu cầu mà trang web của bạn thực hiện và sẽ dẫn đến thời gian tải trang nhanh hơn nhiều. Điều này cũng có nghĩa là bạn nên tránh sử dụng
Site Name
Các tệp JavaScript phải được tải ở cuối trang và được tải không đồng bộ bất cứ khi nào có thể. Điều này sẽ cho phép nội dung trang khác được hiển thị cho người dùng nhanh hơn, vì JavaScript chặn cấu trúc DOM trừ khi nó được khai báo rõ ràng là không đồng bộ
Khi trình phân tích cú pháp HTML của trình duyệt tìm thấy thẻ
Site Name
Nếu bạn gọi một tệp JavaScript thay vì nội tuyến tập lệnh trong HTML của mình, thì trình duyệt của người dùng cần yêu cầu tệp đó từ máy chủ của bạn [hoặc máy chủ của bên thứ ba, nếu đó là tài nguyên bạn đang gọi từ một trang web khác]. Điều này có thể thêm hàng chục đến hàng nghìn mili giây thời gian chờ trước khi trình phân tích cú pháp HTML có thể tiếp tục hiển thị DOM. Tuy nhiên, bạn có thể cho trình duyệt biết rằng tập lệnh này không cần phải được thực thi ngay lập tức và do đó không nên chặn hiển thị nội dung bằng cách thêm thẻ async vào tập lệnh của bạn
Site Name
Điều này cho phép trình duyệt tiếp tục xây dựng DOM và sẽ thực thi tập lệnh sau khi được tải xuống và sẵn sàng
Khi nói đến các tập lệnh không đồng bộ, có một số "vấn đề" cần chú ý. Khi bạn triển khai các tập lệnh không đồng bộ tải nội dung mới, hãy nhớ chú ý xem điều này ảnh hưởng như thế nào đến trải nghiệm người dùng
Bất kỳ thứ gì tải muộn và ảnh hưởng đến bố cục trang đều có thể khiến nội dung thay đổi, khiến người dùng ngạc nhiên;
Lưu ý rằng thứ tự tải thuộc tính không đồng bộ không được đảm bảo, điều này có thể gây ra sự cố phụ thuộc. Tùy thuộc vào nội dung, bạn cũng có thể xem xét xây dựng chỉ báo tải trong khi nội dung đang được gọi không đồng bộ để người dùng của bạn hiểu rằng có những thông tin bị thiếu. Cũng lưu ý rằng nội dung được tải không đồng bộ có thể không hoạt động tốt với dấu trang, nút quay lại và công cụ tìm kiếm;
Nội dung của bên thứ ba như quảng cáo, nút chia sẻ xã hội và các tiện ích khác có thể là điểm nhấn về hiệu suất trên bất kỳ trang web nào. Bạn nên tải các tài nguyên này một cách không đồng bộ và đảm bảo rằng các tài nguyên được lưu trữ bên ngoài này không phải là điểm lỗi duy nhất cho trang web của bạn. Các tập lệnh của bên thứ ba có thể thêm nhiều chi phí hoạt động về trọng lượng trang, nhưng chúng cũng là một vấn đề về hiệu suất vì chúng yêu cầu kết nối và tra cứu DNS bổ sung vì chúng nằm ngoài trang web của bạn. Bạn cũng sẽ không có quyền kiểm soát bộ nhớ đệm cho tài nguyên của bên thứ ba
Cố gắng loại bỏ càng nhiều tập lệnh của bên thứ ba càng tốt. Bạn càng có ít yêu cầu, hiệu suất trang của bạn càng tốt. Cố gắng kết hợp và cô đọng các kịch bản; . Cố gắng thay thế các tập lệnh chia sẻ xã hội bằng các liên kết đơn giản. Định kỳ đánh giá giá trị của việc có tài nguyên của bên thứ ba được gọi trên trang của bạn. hiệu suất đạt được có lớn hơn lợi ích của bất kỳ thứ gì mà tài nguyên đó cung cấp cho người dùng của bạn không?
Về hiệu suất tập lệnh, hãy xem biểu đồ thác nước của bạn để đảm bảo rằng các tệp JavaScript của bạn đang tải sau nội dung khác của bạn và không chặn các lượt tải xuống khác hoặc hiển thị các phần quan trọng của trang. Các tập lệnh tải quảng cáo, chia sẻ xã hội và nội dung phụ trợ khác chắc chắn không được chặn việc tải hoặc hiển thị nội dung khác trên trang
Thu nhỏ và gzip
Xem tất cả khoảng trắng, dấu chấm phẩy không cần thiết và số 0 đứng đầu trong biểu định kiểu của bạn? . Thu nhỏ dẫn đến kích thước tệp nhỏ hơn, điều này rất tốt để cải thiện hiệu suất trang web của bạn
Bạn có thể sử dụng các công cụ dòng lệnh để thu nhỏ mã của mình hoặc các công cụ trực tuyến như CSSMinifier. com và JSCompress. com. Như trong Hình 4-8, tôi đã dán tệp CSS của trang web của mình vào công cụ trên CSSMinifier. com và nó xuất CSS được rút gọn, tối ưu hóa và ngắn hơn để tôi triển khai trên trang web của mình. Đầu ra nhỏ hơn 15% so với tệp gốc
Bạn sẽ nhận thấy rằng khi kiểm tra CSS đã rút gọn của một trang web, rất khó để tìm thấy một kiểu cụ thể được đặt ở đâu trong tệp, vì phiên bản rút gọn có mọi thứ trên một dòng. Đảm bảo lưu một bản sao của nội dung gốc, chưa được rút gọn của bạn vì chúng sẽ giúp bạn đọc và chỉnh sửa trong tương lai dễ dàng hơn nhiều so với các phiên bản đã rút gọn. Trên trang web của bạn, chỉ sử dụng các phiên bản rút gọn để người dùng của bạn tải xuống các tệp nhỏ nhất có thể
Một cách bổ sung để nén các tệp văn bản này là chạy chúng qua gzip. gzip là một ứng dụng phần mềm được sử dụng để nén các tệp dựa trên thuật toán. Thuật toán của gzip tìm các chuỗi tương tự trong tệp văn bản và thay thế các chuỗi đó để làm cho kích thước tệp tổng thể nhỏ hơn. Trình duyệt hiểu cách giải mã các chuỗi được thay thế này và sẽ hiển thị nội dung chính xác cho người dùng
Để thực hiện nén gzip, bạn cần kích hoạt nó trên máy chủ web của mình. Cách thực hiện việc này tùy thuộc vào loại máy chủ của bạn
- apache. Sử dụng mod_deflate
- NGINX. Sử dụng ngx_http_gzip_module
- IIS. Định cấu hình nén HTTP
gzip rất tốt cho tất cả các loại tệp văn bản như biểu định kiểu, HTML, JavaScript và phông chữ. Ngoại lệ duy nhất cho điều này là các tệp phông chữ WOFF, đi kèm với tính năng nén tích hợp
Nội dung bộ nhớ đệm
Bộ nhớ đệm rất quan trọng đối với hiệu suất trang web của bạn; . Bộ nhớ đệm hoạt động bằng cách chia sẻ thông tin với trình duyệt của người dùng để trình duyệt có thể xác định xem có nên hiển thị tệp đã tải xuống [được lưu trong bộ nhớ cache] trước đó từ đĩa hay yêu cầu lại nội dung từ máy chủ
Thông tin này được truyền đạt trong tiêu đề HTTP, đây là phần cốt lõi của bất kỳ yêu cầu nào được gửi qua lại giữa trình duyệt và máy chủ của bạn. Các tiêu đề HTTP bao gồm nhiều thông tin bổ sung như tác nhân người dùng của trình duyệt, thông tin cookie, loại mã hóa được sử dụng, ngôn ngữ của nội dung, v.v. Có hai loại tham số bộ nhớ đệm có thể được đưa vào tiêu đề phản hồi
- Những thứ đặt khoảng thời gian mà trình duyệt có thể sử dụng nội dung được lưu trong bộ nhớ cache của nó mà không cần kiểm tra xem liệu có sẵn nội dung mới từ máy chủ của bạn hay không [
97 vàSite Name
98]Site Name - Những người cho trình duyệt biết thông tin về phiên bản của nội dung để nó có thể so sánh phiên bản được lưu trong bộ nhớ cache của nó với phiên bản tồn tại trên máy chủ [
99 vàSite Name
40]Site Name
Bạn nên đặt một trong số
Site Name
Site Name
Site Name
Site Name
Site Name
Site Name
Site Name
Site Name
Tất cả nội dung tĩnh [tệp CSS, tệp JavaScript, hình ảnh, PDF, phông chữ, v.v. ] nên được lưu trữ
- Khi sử dụng
97, hãy đặt thời gian hết hạn lên tới một năm trong tương lai. Không đặt nó trong hơn một năm trong tương lai, vì điều đó sẽ vi phạm các nguyên tắc của RFCSite Name - Đặt
99 thành ngày mà nội dung được thay đổi lần cuốiSite Name
Nếu bạn tình cờ biết khi nào một tệp sẽ thay đổi và bạn muốn đặt thời hạn hết hạn ngắn hơn, bạn có thể làm như vậy, mặc dù tối thiểu một tháng vẫn là cách tốt nhất. Ngoài ra, bạn có thể thay đổi tham chiếu URL thành nội dung, điều này sẽ phá vỡ bộ đệm và buộc trình duyệt của người dùng tìm nạp phiên bản mới. Để biết hướng dẫn về cách bật bộ nhớ đệm với máy chủ Apache, hãy đọc Hướng dẫn bộ nhớ đệm Apache. Đối với máy chủ NGINX, hãy đọc NGINX Content Caching
Giữa thứ tự tải, thu nhỏ và lưu vào bộ nhớ đệm, bạn có rất nhiều đòn bẩy để sử dụng khi tối ưu hóa nội dung trang web của mình để có trải nghiệm người dùng tuyệt vời và nhanh chóng. Mỗi kỹ thuật này càng trở nên quan trọng hơn khi bạn triển khai nó cho người dùng di động có kết nối mạng kém hơn, đặc biệt nếu bạn chọn hiển thị nội dung khác nhau cho các loại thiết bị hoặc kích thước màn hình khác nhau. Trong chương tiếp theo, chúng tôi sẽ đề cập đến cách tải nội dung có chủ ý cho màn hình nhỏ hơn và cách tạo trải nghiệm người dùng tích cực và hiệu suất cao cho người dùng thiết bị di động của bạn