Tăng tốc độ tải trang. Vị trí thích hợp của CSS và JS

Trước hết, tốc độ tải xuống ảnh hưởng yếu tố hành vi: độ sâu duyệt và số lần thoát. Các trang web nhanh có tỷ lệ chuyển đổi cao hơn. Thành công còn gián tiếp phụ thuộc vào tốc độ khuyến mãi công cụ tìm kiếm: tất cả những thứ khác đều bằng nhau .

  • Các kỹ sư của Google nhận thấy rằng người dùng nhận thấy độ trễ tải thậm chí không đáng kể - 0,4 giây;
  • Người dùng có khả năng rời khỏi trang nếu mất hơn 3 giây để tải;
  • Người dùng di động sẵn sàng chờ lâu hơn một chút - 6-10 giây;
  • 79% người dùng cửa hàng trực tuyến sẽ không mua hàng lần nữa nếu trang web mất nhiều thời gian để tải trong lần đầu tiên.
Thí nghiệm của Thời báo Tài chính

đại diện báo kinh doanhđã tiến hành thử nghiệm với trang web mới của ấn phẩm.

Những người tham gia được chia thành hai nhóm. Đầu tiên, kiểm soát, xem các trang ở tốc độ tải bình thường và thứ hai - với độ trễ năm giây. Bốn nhóm đã tham gia giai đoạn thứ hai: một nhóm kiểm soát và ba nhóm nữa, những người tham gia của họ “có” độ trễ một, hai và ba giây. Độ sâu xem trong phiên được lấy làm tỷ lệ chuyển đổi (chúng tôi đã xem xét những người dùng đã truy cập ít nhất hai trang) và tính toán sự khác biệt giữa những người dùng đã chuyển đổi trong mỗi nhóm.

Khi truy cập hai trang, sự khác biệt giữa các biểu đồ là không đáng chú ý, nhưng khi truy cập ba trang trở lên, tất cả các tùy chọn độ trễ tải sẽ giảm dần - và độ sâu xem càng lớn thì sự khác biệt càng đáng kể. Trong phần lớn tốc độ thấp, với độ trễ từ ba đến năm giây, tỷ lệ chuyển đổi thấp hơn 7,5% và 11% so với nhóm đối chứng.

Thời gian tải càng lâu thì số trang được xem mỗi phiên càng ít. Kết quả nghiên cứu cho thấy tốc độ tải quan trọng như thế nào đối với mức độ tương tác của người dùng và cuối cùng là chuyển đổi.

Tốc độ tải xuống có thể được đo bằng các dịch vụ sau:

Cách tăng tốc độ tải trang 1. Giảm kích thước tải trang

Sử dụng nén gzip, điều này sẽ giảm thời gian chuyển file sang trình duyệt. Khối lượng dữ liệu được truyền sẽ giảm 4-5 lần và tốc độ tải xuống sẽ tăng lên.

Nginx

Để bật tính năng nén gzip trong Nginx, hãy thay đổi cấu hình máy chủ và thêm các dòng sau:

Máy chủ ( .... gzip on; gzip_disable "msie6"; gzip_types văn bản/văn bản thuần túy/ứng dụng css/ứng dụng json/văn bản x-javascript/ứng dụng xml/ứng dụng xml/xml+rss văn bản/ứng dụng javascript/javascript; )

Apache

Trước tiên hãy đảm bảo mô-đun mod_deflate được bật. Sau này, bạn cần thêm các dòng sau vào tệp .htaccess:

AddOutputFilterByType DEFLATE văn bản/plain AddOutputFilterByType DEFLATE văn bản/html AddOutputFilterByType DEFLATE văn bản/xml AddOutputFilterByType DEFLATE văn bản/css AddOutputFilterByType DEFLATE ứng dụng/xml AddOutputFilterByType DEFLATE ứng dụng/xhtml+xml AddOutputFilterByType ứng dụng DEFLATE/rss+xml AddOutputFilter ByType DEFLATE ứng dụng/ja vascript Ứng dụng AddOutputFilterByType DEFLATE/x - javascript

Mức độ nén

Gzip hỗ trợ các mức nén từ 1 đến 9. Trong Nginx có thể điều chỉnh như sau:

Gzip_comp_level 5;

Mức nén tối ưu là 5.

2. Giảm dung lượng đồ họa

Xóa không hình ảnh cần thiết. Nếu có thể, hãy sử dụng văn bản thay vì đồ họa nặng nề hơn.

Định dạng JPG tốt hơn Chỉ thích hợp cho việc chụp ảnh. PNG thích hợp hơn cho các thành phần khác của trang web - biểu tượng, hình minh họa, v.v., miễn là hình ảnh được nén đúng cách. Hãy nhớ rằng trang web sẽ được xem trên các thiết bị khác nhau và trong các trình duyệt khác nhau.

Bạn có thể sử dụng một hình ảnh có thể mở rộng nhưng nó sẽ chiếm nhiều dung lượng và làm chậm quá trình tải trang. Tốt hơn nên sử dụng một số hình ảnh phù hợp với các thiết bị khác nhauđể trình duyệt tải xuống những gì bạn cần - điều này có thể được thực hiện bằng cách sử dụng plugin Imager. Nó thay thế phần giữ chỗ hình ảnh trong suốt, kéo thuộc tính src cho mỗi thuộc tính và gán đúng kích cỡ, sau đó tất cả những gì bạn phải làm là tải lên một số tùy chọn hình ảnh có kích thước khác nhau.

Làm thế nào nó hoạt động:

Trình tạo ảnh mới((availableWidths: ));

Bạn có thể nén hình ảnh bằng chức năng lưu trang web trong trình chỉnh sửa đồ họa hoặc các dịch vụ PunyPNG, TinyPNG và các dịch vụ khác.

3. Giảm số lượng yêu cầu trình duyệt

Điểm này lặp lại điểm trước đó. Một cách để giảm số lượng yêu cầu của trình duyệt là xóa một số thành phần khỏi trang.

Sử dụng các họa tiết CSS - tập tin đồ họa, chứa nhiều hình ảnh cùng một lúc. Đây là cách tốt nhất nếu trang web có nhiều hình ảnh và biểu tượng nhỏ. Kết hợp nhiều tệp CSS và JS thành một, điều này sẽ làm giảm số lượng yêu cầu HTTP.

Để xem số lượng yêu cầu trình duyệt trong Chrome, hãy đi tới Công cụ dành cho nhà phát triển (Cài đặt → Công cụ bổ sung) và chuyển đến tab Mạng.

4. Kích hoạt bộ nhớ đệm dữ liệu

Định cấu hình máy chủ để trình duyệt của người dùng lưu trữ dữ liệu vào bộ nhớ đệm - trong trường hợp này, khi truy cập trang web lần đầu tiên, một số thành phần trang (hình ảnh, tệp CSS và JS) sẽ được lưu tự động. Lần sau trình duyệt sẽ không tốn thời gian tải chúng nữa.

Tuy nhiên, phương pháp này chỉ giúp tăng tốc độ tải khi truy cập trang web nhiều lần.

Làm cách nào để kích hoạt bộ nhớ đệm?

Sử dụng mô-đun tiêu đề của máy chủ web Apache để kiểm soát và sửa đổi tiêu đề yêu cầu HTTP và phản hồi HTTP. Trình duyệt tải từ máy chủ về bộ đệm cục bộ dữ liệu hiếm khi thay đổi và khi truy cập một trang web, nó sẽ tải dữ liệu đó từ bộ đệm. Bạn cũng có thể lưu vào bộ nhớ đệm các tập tin một số loại TRÊN thời gian quy định, sau đó chúng sẽ được tải xuống lại từ máy chủ.

Điều này có thể được thực hiện như thế này:

Tiêu đề được đặt Kiểm soát bộ đệm “max-age=1234000”

Chỉ định phần mở rộng cần thiết các tệp trong cấu trúc FilesMatch, trong đó tiêu đề Kiểm soát bộ đệm và biến độ tuổi tối đa được đặt cho chúng, với sự trợ giúp của thời gian lưu trữ tệp tính bằng giây được chỉ định. Những tệp không cần phải lưu vào bộ nhớ đệm chỉ đơn giản là không đưa chúng vào danh sách.

Bạn cũng có thể tắt bộ nhớ đệm tập tin. Thêm mã sau vào .htachess, sau khi chỉ định loại tệp nào bạn không muốn lưu vào bộ đệm:

Tiêu đề không được đặt Kiểm soát bộ đệm

Bạn cũng có thể kiểm soát bộ nhớ đệm bằng mô-đun hết hạn. Nó kiểm soát việc cài đặt các tiêu đề bộ nhớ đệm HTTP của trình duyệt. Chỉ định khoảng thời gian lưu trữ dữ liệu tùy thuộc vào thời gian từ thay đổi cuối cùng tập tin hoặc từ thời gian truy cập của khách hàng.

Ví dụ như thế này:

ExpiresActive On ExpiresDefault “truy cập cộng thêm 2 tháng” ExpiresByType image/png “truy cập cộng thêm 4 tháng” ExpiresByType image/swf “truy cập cộng thêm 4 tháng”

ExpiresByType text/html “truy cập cộng thêm 2 tháng 14 ngày 7 giờ” ExpiresByType image/gif “sửa đổi cộng thêm 8 giờ 3 phút”

5. Giảm kích thước mã CSS và JavaScript

Các dịch vụ đặc biệt để đơn giản hóa JavaScript và CSS sẽ loại bỏ các ký tự “thêm” (dấu cách, nhận xét) khỏi mã và giảm thời gian tải. Chúng có thể hiệu quả hơn so với nén gzip tiêu chuẩn để tăng tốc độ. Google khuyến nghị các tệp CSS kích thước nhỏ dán trực tiếp vào tài liệu HTML.

Bạn có thể sử dụng các dịch vụ này:

Đặt các tệp CSS ở đầu trang và các tệp JS ở cuối.

Nếu các tệp CSS nằm trong tiêu đề, trang sẽ hiển thị dần dần, điều này tạo ấn tượng tích cực về trang web. Việc đặt các tệp JS ở cuối trang cho phép trình duyệt tải nội dung trang trước và chỉ sau đó mới xử lý các tập lệnh.

Chúc bạn thiết lập vui vẻ!

Tôi nghĩ không có gì ngạc nhiên khi tốc độ tải trang bị ảnh hưởng bởi nhiều yếu tố. Nếu ai chưa biết, tôi sẽ nói ngắn gọn như sau: tốc độ tải không chỉ ảnh hưởng đến việc khách truy cập có đợi trang web của bạn tải hay không mà còn ảnh hưởng đến việc tối ưu hóa SEO. Thật vậy, ngày nay nhiều công cụ tìm kiếm đã bắt đầu tính đến tốc độ tải trang khi xếp hạng trang web. Do đó, trang web của bạn tải càng nhanh thì bạn càng có thể thu hút được nhiều khách truy cập hơn công cụ tìm kiếm, và do đó, thêm tiền kiếm tiền từ việc này.

Do đó, trong bài viết này, tôi quyết định tổng hợp 10 mẹo hàng đầu về cách bạn có thể tăng tốc độ tải của một trang web và toàn bộ trang web.

Nhân tiện, bài viết này tham gia cuộc thi TOP-10 từ Sergei Shelvin với quỹ giải thưởng là 500 USD!

5. Sử dụng tên miền phụ để tải xuống song song

Như tôi đã nói ở trên, theo đặc tả HTTP/1.1, các trình duyệt phải tuân theo các hạn chế về số lượng thành phần trang web được tải đồng thời, cụ thể là không quá 2 thành phần từ một máy chủ. Do đó, nếu trang web của bạn có nhiều đồ họa thì tốt hơn hết bạn nên chuyển nó sang một hoặc nhiều tên miền phụ riêng biệt. Đối với bạn nó sẽ là cùng một máy chủ, nhưng đối với trình duyệt thì nó sẽ khác. Bạn càng tạo nhiều tên miền phụ thì nhiều tập tin hơn trình duyệt sẽ có thể tải cùng lúc và toàn bộ trang của trang web sẽ tải nhanh hơn. Tất cả những gì bạn phải làm là thay đổi địa chỉ của ảnh sang địa chỉ mới. Một cách rất đơn giản nhưng hiệu quả.

6. Sử dụng bộ đệm của trình duyệt

Bộ nhớ đệm đang trở nên cực kỳ quan trọng đối với các trang web hiện đại sử dụng rộng rãi Kết nối JavaScript và CSS. Thực tế là khi khách truy cập truy cập trang web của bạn lần đầu tiên, trình duyệt sẽ tải xuống tất cả các tệp javascript và css, đồng thời cũng sẽ tải tất cả đồ họa và flash, nhưng bằng cách đặt chính xác tiêu đề HTTP hết hạn, bạn sẽ tạo trang các thành phần có thể lưu vào bộ nhớ đệm. Bằng cách này, khi khách truy cập truy cập lại trang web của bạn hoặc truy cập Trang tiếp theo của trang web của bạn, bộ đệm trình duyệt của nó sẽ chứa một số tập tin cần thiết và trình duyệt sẽ không cần phải tải chúng xuống nữa. Do đó đạt được tốc độ tải trang web.

Do đó, hãy đặt tiêu đề HTTP hết hạn bất cứ khi nào có thể, trước vài ngày hoặc thậm chí vài tháng. Để máy chủ web Apache phát hành các tiêu đề HTTP Expires tuân thủ các khuyến nghị, bạn cần thêm các dòng sau vào tệp .htaccess nằm trong thư mục gốc của trang web:

Tiêu đề nối thêm Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "truy cập cộng thêm 0 phút" ExpiresByType image/ico "truy cập cộng thêm 1 năm" ExpiresByType text/css "truy cập cộng thêm 1 năm" ExpiresByType text/javascript "truy cập cộng thêm 1 năm" ExpiresByType image/gif "truy cập cộng thêm 1 năm" ExpiresByType image/jpg "truy cập cộng thêm 1 năm" ExpiresByType image/jpeg "truy cập cộng thêm 1 năm" ExpiresByType image/bmp "truy cập cộng thêm 1 năm" ExpiresByType image/png "truy cập cộng thêm 1 năm"

Đoạn này của tập tin cấu hình Máy chủ web Apache kiểm tra sự hiện diện của mô-đun mod_expires và nếu mô-đun mod_expires khả dụng, hãy bật gửi tiêu đề HTTP hết hạn, đặt thời gian lưu trữ cho các đối tượng trên trong bộ đệm của trình duyệt và máy chủ proxy thành một năm kể từ thời điểm lần tải xuống đầu tiên. Bằng cách đặt thời lượng tồn tại của bộ nhớ đệm của trình duyệt ở mức này, việc cập nhật tệp có thể gặp khó khăn. Vì vậy, nếu bạn thay đổi nội dung css hoặc tệp javascript và muốn những thay đổi này được cập nhật vào bộ đệm của trình duyệt, bạn cần thay đổi tên của chính tệp đó. Thông thường phiên bản của tệp sẽ được thêm vào tên tệp, ví dụ: styles.v1.css

7. Sử dụng CDN để tải các thư viện JavaScript phổ biến

Nếu trang web của bạn sử dụng khung javascript phổ biến, chẳng hạn như jQuery, thì tốt hơn nên sử dụng CDN để kết nối nó.

8. Tối ưu hóa hình ảnh của bạn

Bạn cần xác định định dạng phù hợp cho hình ảnh của mình. Việc chọn sai định dạng hình ảnh có thể làm tăng đáng kể kích thước tệp.

  • GIF lý tưởng cho hình ảnh có nhiều màu sắc, chẳng hạn như biểu trưng.
  • JPEG - tuyệt vời cho hình ảnh chi tiết với một lượng lớn hoa như ảnh chụp.
  • PNG là sự lựa chọn của bạn khi bạn cần một hình ảnh chất lượng cao với độ trong suốt.

Có hai cách để tối ưu hóa hình ảnh: sử dụng các chương trình hoặc dịch vụ trực tuyến trên Internet để nén hình ảnh. Trong trường hợp đầu tiên, bạn sẽ cần có kiến ​​​​thức nhất định để làm việc với chương trình này hoặc chương trình kia, nhưng bất kỳ ai cũng có thể sử dụng các dịch vụ trực tuyến. Tất cả những gì bạn cần làm là tải lên những hình ảnh cần thiết và dịch vụ sẽ tự tối ưu hóa chúng và cung cấp liên kết để tải xuống các tệp đã nén.

Dưới đây là một số dịch vụ trực tuyến để tối ưu hóa hình ảnh:

  • www.compress-online.com (Cảm ơn Mary_T về liên kết)

9. Không chia tỷ lệ hình ảnh

Không thay đổi kích thước hình ảnh bằng thuộc tính chiều rộng và chiều cao của thẻ hoặc sử dụng CSS. Điều này cũng ảnh hưởng tiêu cực đến tốc độ tải trang. Nếu bạn có một hình ảnh có kích thước 500x500px và bạn muốn chèn một hình ảnh có kích thước 100x100px vào trang web thì tốt hơn hết bạn nên thay đổi kích thước hình ảnh gốc bằng cách sử dụng biên tập đồ họa Photoshop, hoặc bất kỳ thứ gì khác. Hình ảnh càng nhẹ thì thời gian tải càng ít.

10. Sử dụng nén Gzip

Như các nghiên cứu đã chỉ ra, nén gzip tập tin văn bản“Nhanh chóng” trong 95-98% trường hợp cho phép bạn giảm thời gian chuyển tệp sang trình duyệt. Nếu bạn lưu trữ các bản sao của tệp đã lưu trữ trên máy chủ (trong bộ nhớ của máy chủ proxy hoặc chỉ trên đĩa), thì kết nối sẽ bị ngắt. trường hợp chung quản lý để phát hành nhanh hơn 3-4 lần.

Bắt đầu với HTTP/1.1, máy khách web cho biết loại nén nào chúng hỗ trợ bằng cách đặt tiêu đề Accept-Encoding trong yêu cầu HTTP.

Mã hóa chấp nhận: gzip, giảm phát

Nếu máy chủ web nhìn thấy tiêu đề như vậy trong một yêu cầu, nó có thể áp dụng tính năng nén phản hồi bằng một trong các phương pháp được máy khách liệt kê. Khi đưa ra phản hồi, máy chủ sẽ thông báo cho khách hàng thông qua tiêu đề Mã hóa nội dung về cách nén phản hồi.

Mã hóa nội dung: gzip

Dữ liệu được truyền theo cách này nhỏ hơn khoảng 5 lần so với dữ liệu gốc và điều này giúp tăng tốc đáng kể tốc độ truyền dữ liệu. Tuy nhiên, có một nhược điểm: nó làm tăng tải cho máy chủ web. Nhưng vấn đề với máy chủ luôn có thể được giải quyết. Vì thế chúng ta đừng để ý đến điều này.

Để bật tính năng nén GZIP trên trang web của bạn, bạn cần viết các dòng mã sau vào tệp .htaccess:

AddOutputFilterByType DEFLATE văn bản/html AddOutputFilterByType DEFLATE ứng dụng/javascript AddOutputFilterByType DEFLATE văn bản/javascript AddOutputFilterByType DEFLATE văn bản/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no -gzip !gzip-only-text/html

Nếu như phương pháp nàyđã hoạt động thì tuyệt vời, nếu không, bạn có thể thử mã này:

AddOutputFilterByType DEFLATE văn bản/văn bản html/văn bản thuần túy/ứng dụng xml/ứng dụng xml/xhtml+xml văn bản/văn bản javascript/ứng dụng css/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Có tệp mod_gzip_item_include \.js$ mod_gzip_item_include tệp \.css$

Nhưng một lần nữa, mã này không hoạt động trên tất cả các máy chủ, vì vậy tốt hơn hết bạn nên liên hệ với dịch vụ hỗ trợ của nhà cung cấp dịch vụ lưu trữ của bạn và làm rõ vấn đề này.

Chà, thực ra đó là tất cả những gì tôi muốn nói với bạn. Trong bài viết này, tôi đã cố gắng liệt kê tất cả các phương pháp tối ưu hóa ứng dụng khách chính để tăng tốc độ tải trang web. Ngoài tối ưu hóa máy khách, còn có tối ưu hóa máy chủ. Nhưng đây là một chủ đề cho một bài viết riêng biệt.

Nếu bạn bỏ lỡ điều gì đó hoặc có điều gì cần bổ sung, hãy viết ý kiến ​​​​của bạn trong phần bình luận bên dưới bài đăng này. Cám ơn vì sự quan tâm của bạn!

Một trong những điều nhất khía cạnh quan trọng trang web của bạn là tốc độ tải của nó; Người dùng muốn nhận được một bức ảnh ngay lập tức mà không có bất kỳ sự chậm trễ nào và nếu bạn không thể cung cấp cho họ điều này, thì họ sẽ không ngần ngại tìm kiếm thông tin ở nơi khác. Trong bài viết này, chúng tôi sẽ thảo luận về 5 cách để tăng tốc thời gian tải trang web của bạn.

1. Sử dụng YSlow để theo dõi thời gian tải trang

Biết lượng thời gian cần thiết để tải trang có thể giúp bạn xác định các khu vực có vấn đề. Điều này cũng sẽ mang lại cho bạn một động lực khác để sử dụng chức năng và cố gắng khắc phục tình hình.

Trước khi chúng ta bắt đầu, bạn sẽ cần cài đặt YSlow, nếu bạn chưa cài đặt. YSlow là một phần mở rộng cho Mozilla Firefox, mà bạn có thể tìm thấy trên trang này:

Bây giờ hãy mở một số trang web. Giả sử Sáu bản sửa đổi để chúng tôi có dữ liệu gần giống nhau (chỉ cần mở trang web này trong tab mới trong trình duyệt của bạn).

Ở phía dưới bên phải trình duyệt của bạn, bạn có một bảng điều khiển đặc biệt có biểu tượng (xem Hình 1). Xa hơn một chút khỏi bảng điều khiển này, sau khi tải trang, bên cạnh 'YSlow' bạn sẽ thấy một con số. Con số này là thời gian để trang này tải tính bằng giây trong trình duyệt của bạn. Chúng ta cần phải số đã cho có càng ít càng tốt.

Những “kẻ làm chậm” phổ biến nhất là các đối tượng hoặc thao tác sau:

  • Quá nhiều yêu cầu HTTP
  • Không tập tin nén JavaScript
  • Không có thời gian chờ tiêu đề cho tệp đồ họa

Chúng ta sẽ đi vào chi tiết hơn về điều này trong vài phút nữa.

Để làm quen với hệ thống này, hãy xem qua một số trang web và xem thời gian tải của chúng. Bạn có thể kiểm tra Google, Facebook và một số blog/trang web yêu thích mà bạn truy cập thường xuyên nhất. Xin lưu ý rằng các tệp và hình ảnh JavaScript ảnh hưởng đến tốc độ nhiều nhất.

Sử dụng YSlow một cách tối đa

Ngoài việc tính toán thời gian tải trang, YSlow phần mở rộng này cũng cung cấp cho bạn thông tin nâng cao về những gì bạn cần khắc phục để tối ưu hóa quá trình tải trang web của mình, nhờ đó bạn có thể vá các lỗ hổng.

Để biết thông tin tương tự, hãy nhấp vào tab Hiệu suất. Sau khi quét trang web, YSlow sẽ cung cấp cho bạn đánh giá tổng thể, điều này sẽ mô tả hiệu suất của trang của bạn.

Việc truy cập thông tin có thể được tăng tốc bằng cách sử dụng CDN (Mạng phân phối nội dung). CDN được sử dụng tốt nhất cho các trang web lớn. Chúng được sử dụng để phân phối thông tin qua một số máy chủ trong các bộ phận khác nhau hòa bình. Bằng cách này, thông tin sẽ được tải xuống từ máy chủ thích hợp (gần người dùng nhất) để không đi qua bộ định tuyến cá nhân. YSlow cũng theo dõi các yêu cầu CDN.

Nhưng theo quy định, mọi người không sử dụng CDN (khá đắt).

Phân loại các loại lỗi

Bây giờ chúng ta hãy đi qua từng mục có trong phần mở rộng nêu trên. Tiếp theo bạn sẽ tìm thấy bản tóm tắt các trang của bạn được đánh giá theo tiêu chí nào và cách giải quyết vấn đề để đạt được hiệu suất tối đa.

Thực hiện càng ít yêu cầu HTTP càng tốt: Yêu cầu HTTP xảy ra khi trình duyệt gửi yêu cầu đến máy chủ. Điều tương tự có thể xảy ra khi kết nối tập lệnh, tệp CSS, hình ảnh và cả khi yêu cầu không đồng bộ, cả từ phía máy khách và phía máy chủ (Ajax và các công nghệ tương tự khác). Tuy nhiên, khi nói đến hiệu suất hệ thống, điều đáng suy nghĩ là có bao nhiêu yêu cầu tương tự xảy ra trên trang của bạn. Là một giải pháp, bạn có thể sử dụng bộ nhớ đệm để giúp máy khách tải tập lệnh, CSS và hình ảnh nhanh hơn.

Thêm tiêu đề Hết hạn: 80% tải trang tập trung vào việc tải xuống tập lệnh, ảnh và tệp CSS. Trong hầu hết các trường hợp, những điều này không thay đổi trên máy người dùng. Bằng cách thêm một ít mã vào tệp .htaccess, bạn có thể lưu vào bộ nhớ đệm các tệp trùng lặp trên máy cục bộ của người dùng (chúng ta sẽ nói về cách thực hiện việc này sau).

Thành phần Gzip: Ứng dụng Gzip hoặc nén các tệp, hình ảnh, tài liệu HTML, tệp CSS, v.v. cho phép người dùng tải xuống thông tin với kích thước giảm, giúp tăng đáng kể tốc độ tải trang. Ngoài ra, điều này sẽ tiết kiệm dung lượng trên máy chủ, tuy nhiên, việc giải nén dữ liệu có thể dẫn đến phản hồi chậm và phụ thuộc trực tiếp vào trình duyệt của người dùng.

Đặt CSS ở đầu trang: Nếu bạn đặt kết nối tới các tệp CSS ở đầu trang, điều này có nghĩa là chúng sẽ tải trước, hình ảnh và tập lệnh sẽ tải sau.

Đặt JS ở cuối trang: Bây giờ các tệp CSS của bạn sẽ tải ở trên cùng, đã đến lúc đặt các tập lệnh JS ngay trước thẻ đóng. Điều này sẽ cho phép trang của bạn hiển thị và sau đó kích hoạt các tập lệnh cần thiết.

Tránh biểu thức CSS: Cá nhân tôi chưa bao giờ sử dụng biểu thức CSS (còn gọi là thuộc tính động). Những biểu thức này là các khái niệm lập trình độc quyền cho IE (chẳng hạn như biểu thức điều kiện) trong CSS. Công nghệ được sử dụng trong IE8 và thực tế là trong tất cả các phiên bản khác sẽ không còn được hỗ trợ nữa, vì vậy trong mọi trường hợp, bạn sẽ phải từ bỏ điều này viết CSS biểu thức. PHP phù hợp hơn cho các mục đích tương tự, chẳng hạn như để tải các kiểu CSS khác nhau tùy thuộc vào một số điều kiện, chẳng hạn như số ngẫu nhiên, thời gian trong ngày hoặc trình duyệt của người dùng.

Viết JS và CSS vào tập tin riêng biệt: nếu bạn đặt tập lệnh của mình vào JS và Kiểu CSS trong các tệp riêng biệt, trình duyệt có thể dễ dàng lưu chúng vào bộ đệm, từ đó cho phép trang của bạn tải nhanh hơn.

Giảm thời gian tra cứu DNS: khi người dùng nhập tên trang web của bạn vào trình duyệt, quá trình tìm kiếm DNS ngay lập tức bắt đầu đối với địa chỉ IP nơi đặt trang web của bạn. Trang web của bạn càng chứa nhiều nguồn lực bên ngoài, việc tìm kiếm DNS sẽ càng mất nhiều thời gian. Theo quy định, một lần tìm kiếm như vậy kéo dài 60-100 mili giây.

Giảm thiểu JS: Ngoài việc nén gzip, việc thu nhỏ các tệp JavaScript cho phép bạn đơn giản hóa các tập lệnh của mình bằng cách loại bỏ không gian không cần thiết, tab và các ký tự đặc biệt khác, cùng nhau làm tăng kích thước tệp. Điều này là hiển nhiên - tệp càng nhỏ thì tải trang càng nhanh. Để thu nhỏ các tệp JavaScript, bạn có thể sử dụng công cụ JSMIN.

Tránh chuyển hướng: Việc bạn thực hiện chuyển hướng ở đâu, trong JS, HTML hay PHP không quan trọng. Trong cả hai trường hợp, trình duyệt của bạn sẽ nhận được tiêu đề có Trang trống, việc này sẽ mất thời gian để tải. Vì vậy, hãy cố gắng không sử dụng chuyển hướng nếu có thể tránh được.

Tránh tải tập lệnh trùng lặp: Nếu trình duyệt của bạn tải một tập lệnh nhiều lần, điều đó sẽ ảnh hưởng đáng kể đến việc tải trang. Toán học ở đây không phức tạp. Làm sao nhiều lượt tải xuống hơn cùng một tập tin, trang tải càng lâu. Xem lại tập lệnh của bạn và đảm bảo bạn không gọi jQuery 2 hoặc 3 lần. Điều tương tự cũng áp dụng cho các tập lệnh JS.

Chà... tôi nghĩ thế là đủ rồi. Bây giờ, hãy chuyển sang tab YSlow tiếp theo trước khi chúng ta xem xét một số kỹ thuật khác sẽ cải thiện tốc độ tải trang của bạn.

Tab Thành phần sẽ cho phép bạn xác định những nỗ lực bạn cần thực hiện để cải thiện tốc độ tải. Tại đây bạn sẽ tìm thấy thông tin về trọng lượng của mỗi tệp cũng như thời gian tải xuống. Bạn cũng có thể xem gzip được sử dụng cho những tệp nào, tìm hiểu thời gian phản hồi, liệu các tệp có được lưu vào bộ nhớ đệm trên máy của người dùng hay không và khi nào bộ nhớ đệm tự kết thúc. Thông tin này có thể hữu ích cho bạn khi đánh giá các vấn đề của trang web, bạn sẽ biết mình đang gặp vấn đề gì và cần tối ưu hóa điều gì.

Và cuối cùng, hãy chuyển sang tab cuối cùng Tab thống kê. Ở đây bạn sẽ tìm thấy thông tin về tất cả các yêu cầu HTTP, cho cả tập tin thông thường và cho những cái được lưu trong bộ nhớ đệm. Giá trị Bộ đệm trống cho biết rằng các tệp này phải được tải để hiển thị trang. Đổi lại, Primed Cache là các tệp đã được trình duyệt của người dùng lưu vào bộ nhớ đệm. Điều này có nghĩa là bạn không cần phải tải chúng xuống.

2. Sử dụng CSS sprite để rút ngắn yêu cầu HTTP

CSS sprite có lẽ là thứ quan trọng nhất mà nhân loại đã nghĩ ra kể từ khi Tesla phát minh ra điện... Thực ra tôi đã nói rằng... ôi, ý tôi là Edison.

Chà, có lẽ không hẳn là tuyệt nhất, nhưng vẫn vậy.

CSS sprite có thể giúp tăng đáng kể tốc độ tải trang bằng cách giảm số lượng yêu cầu HTTP được tạo để tải hình ảnh.

Bạn có thể tìm thấy rất nhiều hướng dẫn nói về cách các họa tiết CSS hữu ích cho việc điều hướng - nói chung là để sử dụng chúng trong giao diện người dùng.

Bây giờ chúng ta hãy xem nhanh cách YouTube sử dụng CSS sprite. Sprite họ sử dụng trông như thế này:

YouTube sử dụng tệp này theo cách khá nguyên bản. Họ tải nó làm nền cho lớp sprite. Khi có nhu cầu chọn một phần tử, vị trí ban đầu được chọn bằng cách sử dụng Thuộc tính CSS vị trí nền rồi áp dụng chiều cao và chiều rộng.

Chúng ta hãy thử một cái gì đó tương tự quá. Hãy thử nghiệm trên cùng một hình ảnh từ YouTube.

Trong ví dụ dưới đây chúng ta hiển thị logo YouTube trên màn hình. Sử dụng cùng một lớp sprite và giống nhau hình ảnh hình ảnh, chúng ta có thể tạo một hình ảnh sẽ thay đổi khi di chuột.

.sprite ( nền:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( width:100px; chiều cao:45px; vị trí nền:0 0; )

Như vậy, sử dụng bức ảnh này, chúng tôi có thể giảm tất cả các kết nối thành một yêu cầu HTTP. Ừm, hiệu quả thế nào?

Một ưu điểm khác của CSS sprite là khi sử dụng lớp giả :hover, hình ảnh sẽ không biến mất trong một vài khoảnh khắc (được dùng để tải một hình ảnh mới), điều này xảy ra mà không cần sử dụng CSS yêu tinh.

.sprite ( nền:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( width:100px; chiều cao:45px; vị trí nền:0 0; ) #button ( vị trí nền: 0 -355px; phần đệm: 5px 8px; ) #button:hover( vị trí nền:-25px -355px; )

3. Tải file CSS trước, file JavaScript sau cùng

Đối với một số trang web, việc giảm số lượng yêu cầu HTTP có thể dẫn đến sự cố về chức năng. Một cách khác để tăng tốc độ tải trang là đặt tất cả các kết nối tệp JavaScript ở cuối tài liệu.

Nó cũng đáng lưu ý:

  • Tải các tệp CSS trong phần ngay trước khi bắt đầu thẻ body.
  • Bao gồm JavaScript ngay trước thẻ đóng nội dung.
  • Nếu bạn làm theo lời khuyên của chúng tôi, bạn sẽ cho phép người dùng chiêm ngưỡng trang web của mình trong khi tải tập lệnh JavaScript ở chế độ nền.

    Lưu ý: Nếu bạn không muốn di chuyển các thẻ JavaScript vì sợ chức năng đó sẽ bị mất thì tôi khuyên bạn nên sử dụng thuộc tính defer. Áp dụng nó như thế này:

    4. Sử dụng tên miền phụ để tải xuống song song

    Tải xuống song song có nghĩa là tăng tải xuống song song các tệp giống nhau. Nếu xem qua nhiều trang web, bạn có thể nhận thấy rằng nhiều trang trong số đó gửi yêu cầu đến static.domain.com và c1.domain.com. Điều này có thể được nhìn thấy ở thanh dưới cùng của trình duyệt.

    Cái này cách tuyệt vời tăng hiệu suất trang web. Khi sử dụng tên miền phụ, về cơ bản thông tin sẽ nằm trên cùng một máy chủ, nhưng chúng sẽ khác nhau đối với trình duyệt.

    Thiết lập quy trình:

  • Tạo 3 tên miền phụ trên máy chủ của bạn
  • Sắp xếp hình ảnh của bạn trong các thư mục trên các tên miền phụ khác nhau
  • Thay thế đường dẫn trong tệp của bạn
  • 5. Thêm tiêu đề Hết hạn

    Một số trang web vẫn được tải ngay cả sau khi áp dụng tất cả các phương pháp được mô tả ở trên. Nhưng có một vài phương pháp nữa.

    Người dùng có thể truy cập trang web của bạn và thực hiện tất cả các yêu cầu HTTP cần thiết để hiển thị trang, hình ảnh, tập lệnh, v.v.

    Khi bạn sử dụng tiêu đề Hết hạn, bạn có thể lưu vào bộ đệm tất cả các thành phần này trên máy của người dùng, do đó không chỉ tăng tốc độ tải trang mà còn giảm lưu lượng truy cập. Tiêu đề hết hạn có thể được áp dụng cho tất cả tập lệnh, CSS và hình ảnh của bạn.

    Hiệu ứng này có thể đạt được thông qua một vài dòng mà bạn cần thêm vào tệp .htaccess, nằm ở thư mục gốc trang web của bạn.

    Ví dụ tiếp theo. tập tin htaccess và đặt tiêu đề hết hạn thành một số nhất định trong năm 2010 cho các loại tệp như .ico, .pfd, .flv ( Tệp flash), .jpg, .png, v.v.

    Bộ tiêu đề Hết hạn "Thứ năm, ngày 15 tháng 4 năm 2010 20:00:00 GMT"

    Hãy cẩn thận: nếu bạn thực hiện bất kỳ thay đổi nào đối với các tệp này (nếu chưa hết thời hạn), bạn cần đổi tên chúng (hoặc thêm phiên bản vào tên), nếu không chúng sẽ không được cập nhật trong bộ đệm.

    Ví dụ, nếu bạn có tập tin JavaScript, trong đó bạn đã thay đổi nội dung nào đó, chỉ cần thêm số phiên bản vào tên (đại loại như javascriptfile-1.0.js, javascriptfile-1.1.js, v.v.)

    Phần kết luận

    Hôm nay chúng ta đã trải qua nhiều phương pháp. Tôi hy vọng bạn đã lưu ý một số phương pháp mà bạn sẽ tích cực sử dụng trong các dự án của mình! Chúc may mắn!

    Đối với quản trị viên web và người tối ưu hóa, thời gian tải trang web rất quan trọng. Để xác nhận điều này, tôi muốn cung cấp một số số liệu thống kê và sự kiện:

    • Hơn một nửa số khách truy cập rời khỏi một trang mất hơn 3 giây để tải;
    • Trang web tải trong 3 giây có số lượt xem ít hơn 25%, số lần thoát ra nhiều hơn 50% và số chuyển đổi ít hơn 25% so với trang web tải trong 1 giây;
    • Thanh tiến trình tăng thời gian chờ tải trang;
    • Tốc độ tải ảnh hưởng trực tiếp đến doanh số bán hàng và vị trí trang web;

    Việc xác định tốc độ tải của một trang web không khó chút nào. Ví dụ: bạn có thể sử dụng các dịch vụ trực tuyến phổ biến sau:

    Hãy xem xét các cách để tăng tốc thời gian tải trang của trang web. Trên thực tế, tất cả các phương pháp đều rất đơn giản và thường nhằm mục đích tối ưu hóa “trọng lượng” của trang và tải mã chính xác.

    Có khá nhiều tài liệu về chủ đề này trên Internet. Tôi đã cố gắng trình bày tất cả các phương pháp một cách cô đọng và chỉ đi vào trọng tâm. Hãy bắt đầu nào.

    1. Kích hoạt tính năng nén gzip

    Mỗi trang web đều có các tệp plug-in với style.css và scripts.js. Chúng có thể được nén nhanh chóng (khi tải trang). Nói một cách đơn giản, chúng tôi giảm trọng lượng của chúng và do đó trang web tải nhanh hơn. Các tập tin của tôi đã được nén trung bình 75%. Ví dụ: nếu một tệp nặng 45 kbyte thì sau khi nén, nó bắt đầu nặng 12 kbyte. Tiết kiệm tổng cộng 33 KB dung lượng trên tệp với biểu định kiểu.

    Kích hoạt tính năng nén không thể dễ dàng hơn. Bạn chỉ cần viết những dòng mã sau vào tệp .htaccess (tệp nằm ở thư mục gốc của trang web):

    mod_gzip_on Có mod_gzip_dechunk Có mod_gzip_item_include tệp .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* item_exclude rspheader ^Content -Mã hóa:.*gzip.*

    Bạn có thể kiểm tra xem tính năng nén có được bật trên trang web hay không

    Nếu có điều gì đó không ổn, vui lòng viết câu hỏi cho bộ phận hỗ trợ kỹ thuật về dịch vụ lưu trữ của bạn. Điều thường xảy ra là bản thân họ có thứ gì đó không được kích hoạt trong cài đặt máy chủ.

    2. Kích hoạt bộ nhớ đệm của trình duyệt

    Việc kích hoạt bộ đệm của trình duyệt được thực hiện bằng cách thêm một vài dòng mã vào cùng một tệp .htaccess:

    Tiêu đề nối thêm Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "truy cập cộng thêm 0 phút" ExpiresByType image/ico "truy cập cộng thêm 1 năm" ExpiresByType text/css "truy cập cộng thêm 1 năm" ExpiresByType text/javascript "truy cập cộng thêm 1 năm" ExpiresByType image/gif "truy cập cộng thêm 1 năm" ExpiresByType image/jpg "truy cập cộng thêm 1 năm" ExpiresByType image/jpeg "truy cập cộng thêm 1 năm" ExpiresByType image/bmp "truy cập cộng thêm 1 năm" ExpiresByType image/png "truy cập cộng thêm 1 năm"

    chỉ có vấn đề quan trọng, khoảng thời gian lưu trữ bộ nhớ đệm cần đặt. Nếu bạn đặt giới hạn thời gian rất dài và tệp đã thay đổi, trình duyệt sẽ tải những gì nó có trong bộ đệm một cách cứng đầu. Một cách thoát khỏi tình huống này có thể là thay thế tên tệp và thay đổi mẫu, nhưng điều này có thuận tiện không? Vì vậy, bạn nên suy nghĩ và tự mình xác định tần suất thay đổi tệp trên trang web.

    Ý kiến ​​​​của tôi là trong mọi trường hợp, luôn có thể đặt khoảng thời gian từ 1-7 ngày.

    Đây là điều đơn giản nhất có thể làm được, hãy tiếp tục.

    Bạn có thể quan tâm:

    3. Tối ưu hóa hình ảnh của bạn

    Sử dụng hình ảnh jpg - để có độ tương phản và gif - trong đó số lượng màu ít. Đây đều là những tiên đề. Trong mọi trường hợp, bạn không nên sử dụng lại png hoặc bmp vì cả hai định dạng đều không được tối ưu hóa.

    Các hình ảnh jpg và png hiện có có thể được nén dễ dàng bằng các chương trình và dịch vụ. Cá nhân tôi đã tìm kiếm trên Internet các dịch vụ nén hình ảnh. Tôi đã so sánh kết quả và kết luận rằng tôi thích dịch vụ trực tuyến tinypng.com nhất. Đôi khi anh ấy có thể giảm hình ảnh xuống tới 75%, trong khi chất lượng gần như không thay đổi.

    Nếu trang web sử dụng làm nền hình ảnh lớn, thì nó có thể bị nén rất mạnh. Ví dụ: tôi đã cố gắng nén hình ảnh từ 300 KB xuống 86 KB lý lịch cho một trong các trang web.

    4. Tải tệp lên từ tên miền khác

    Các trình duyệt có giới hạn về số lượng yêu cầu được thực hiện đồng thời (không quá hai yêu cầu song song). Nói cách khác, nếu trang web có nhiều hình ảnh (thậm chí cả những hình ảnh nhỏ), thời gian tải của nó sẽ tăng lên đáng kể. Vì vậy, hãy sử dụng thủ thuật sau:

    Họ tạo một tên miền phụ để lưu trữ ảnh, javascript và hơn thế nữa. Ví dụ: nếu trước đây ảnh được đặt tại /img/foto.jpg thì bây giờ địa chỉ cần được đổi thành img.site.ru/img/foto.jpg. Đối với trình duyệt, nó sẽ là một tên miền khác và vì vậy phương pháp nhân tạo Chúng tôi tăng tốc độ tải.

    Ghi chú

    Ngày nay việc sử dụng "CSS sprite" khá là hợp thời. Ý nghĩa như sau: ví dụ: trên trang web của chúng tôi, chúng tôi có một loạt các hình ảnh nhỏ làm nền (tôi nghĩ điều này quen thuộc với mọi người). Tất cả những hình ảnh này có thể được kết hợp thành một hình ảnh lớn và với sử dụng CSS“cắt” đúng miếng vào đúng chỗ.

    5. Tối ưu hóa CSS và JS

    Thường ở Tệp CSS và JS có rất nhiều mô tả không cần thiết về phong cách, tập lệnh và thậm chí cả các khoảng trắng và nhận xét đơn giản. Đây là trọng lượng bổ sung cho trang web. Bạn có thể dễ dàng thoát khỏi điều này bằng cách sử dụng các dịch vụ sau:

    Nghe có vẻ giống như một trò “lừa đảo” đơn giản nhưng đây lại là một phần thưởng nhỏ để giảm kích thước trang.

    6. Đặt CSS và JS đúng cách

    Chúng tôi bao gồm tất cả các tệp .css trong thẻ head (trước thẻ cơ thể), chúng tôi bao gồm tất cả các tập lệnh ở cuối trang. Nói chung, điều này sẽ không tăng tốc độ tải trang, nhưng nội dung sẽ bắt đầu xuất hiện trước mặt người dùng sớm hơn và điều này sẽ thúc đẩy anh ta chờ đợi vì anh ta thấy rằng trang web đang tải.

    Ghi chú

    Tất nhiên, nếu bạn đang tải thư viện AJAX (từ Google), thì tải trực tiếp từ trang web của Google sẽ nhanh hơn, ngoài ra bạn có thể chắc chắn gần như 100% rằng trình duyệt của người dùng đã có bộ đệm. Nhưng đôi khi Google không có mặt vì lý do nào đó hoặc làm chậm quá trình tải, vì vậy để giảm thiểu rủi ro này, bạn có thể viết đoạn mã sau:

    window.jQuery || document.write("");

    Ý nghĩa khá đơn giản. Đầu tiên, chúng tôi cố gắng tải xuống thư viện trực tiếp từ ajax.googleapis.com; nếu việc này không thành công thì chúng tôi tải xuống bản sao của thư viện từ trang web của mình.

    Ghi chú

    Nếu bạn gặp trường hợp duy nhất là trang web vẫn còn rất nặng và mất nhiều thời gian để tải, thì hãy tạo một “thanh tiến trình” trên trang web của bạn. Điều này cho người dùng biết rằng trang web đang tải và họ chỉ cần đợi một chút.

    “Chúng tôi đã phân phối một số nội dung (hình ảnh, jQuery) cho các tên miền phụ và một số cho CDN (cloudflare.com) để giảm khoảng cách giữa máy chủ và người dùng.” Điều này không tốt cho trang web - hình ảnh sẽ không được liên kết đến trang web mà với CDN. Trong số liệu thống kê của Yandex, bạn sẽ thấy “hình ảnh trong chỉ mục - 0”. © thông tin từ Yandex.

    Tức là bạn đã bật tất cả các hộp kiểm trong cài đặt tối ưu hóa trang web trên dịch vụ lưu trữ của mình. Họ đã lừa khách hàng vài trăm đô la. Đồng thời, họ đã loại bỏ một tham số như vậy trong tiêu đề được sửa đổi lần cuối, bởi vì khi các tùy chọn này được bật, nó sẽ không được truyền đi - đó là tính đặc hiệu của nó. Cảm giác như không có website, họ chỉ nghĩ ra một bài viết và viết lại tên các check box từ hosting, nghĩ rằng sẽ để lại ấn tượng lâu dài.
    Hoan hô, tôi chưa bao giờ đọc một bài báo nào thô sơ hơn thế, một trường hợp tranh giải Darwin!

    Alexander Porechnikov

    Java thậm chí còn không bằng Java Script

    Alexander Porechnikov

    Vì vậy, Gennady, bạn viết rằng bạn đã kích hoạt http2 và đồng thời vì lý do nào đó mà kết hợp các tài nguyên vào một tệp. Bạn có đang mâu thuẫn với chính mình không? Hoặc bạn không biết http2 hoạt động như thế nào. Và xét theo danh sách kiểm tra, bạn có đo được tốc độ tải xuống sau bật tắt đơn giản ganzipa, mọi thứ khác đều là sự tinh tế và rừng rậm đến mức chúng gặp phải khi bạn cần thực hiện 400ms từ 500ms hoặc máy chủ bị treo do tải (lỗi 504 xảy ra). Và loại bỏ Apache ra khỏi sự kết hợp Apache + Nzhinix (tất nhiên trừ khi bạn sử dụng các plugin Apache cụ thể) + lời khuyên, giữ tất cả dữ liệu tĩnh trên SDN, nó rất rẻ và lợi ích của việc này là rất lớn, ít nhất là trong việc giảm tải lên bộ xử lý

    Alexander Porechnikov

    và các bản sao được tạo ra để làm gì - hợp nhất SDN với miền chính và thế là xong

    Alexander Porechnikov

    Tôi đồng ý về chất lượng của bài viết, nhưng tôi không đồng ý về bản thân khái niệm - chúng tôi đã tự mình kiểm tra tất cả các điểm, nhưng chỉ để lại chưa đến một nửa trong số đó, phần còn lại không hoạt động hoặc tốc độ tăng ít ỏi không' t biện minh cho nỗ lực

    Đã cấu hình OpCashe, đổi thành OPcache

    Alexander, chắc chắn, các tùy chọn này của mô-đun tốc độ trang sẽ tăng tốc trang web, nhưng khi bạn chọn ít nhất một trong số chúng trên máy chủ lưu trữ, sửa đổi lần cuối sẽ không được truyền đi, phản hồi 304 của máy chủ đối với yêu cầu if-modified-since không được trả về , kiểm soát bộ đệm -> tuổi tối đa trở thành 0.
    Đây không phải là điều khiến tôi tức giận trong bài báo, tôi rất tức giận khi tác giả viết những điều sâu sắc như vậy khi họ vạch ra một kế hoạch, cách họ triển khai các công nghệ SEO lớn và cách họ dành 60 giờ công cho nó, 60 KARL! Nghĩa là, khách hàng phải trả ít nhất 500 đô la cho việc chọn các hộp trên dịch vụ lưu trữ. Đừng lo lắng, chúc sức khỏe! Chà, để tôi nói cho bạn biết và giữ im lặng, nhưng đừng truy cập các trang web bình thường với kiến ​​​​thức giả của bạn và đừng lấy đi thời gian của mọi người! Tại sao tôi chắc chắn rằng họ đã điều khiển việc lưu trữ - đây là ảnh chụp màn hình của một nhà cung cấp dịch vụ lưu trữ nâng cao ở Ukraine, trong đó thứ tự của các hộp kiểm này gần như trùng khớp 100% với kế hoạch tuyệt vời của tác giả và đồng nghiệp nhằm tăng tốc trang web.
    https://uploads.disquscdn.c...

    Alexander Porechnikov

    Trên dịch vụ lưu trữ này, chúng tôi thậm chí còn có một trong những dự án bán tĩnh cũ đang chạy, dịch vụ lưu trữ tuyệt vời. Tôi biết bạn đã nói về điều gì, nhưng nhiều người không hiểu rằng trên thực tế chỉ có một số cách để thực sự giảm thời gian tải chứ không phải “tiết kiệm trận đấu” - đó là:
    0) bật tính năng nén trên máy chủ web (gzip),
    1) cài đặt tiêu đề chính xác Trực tuyến
    2) không sử dụng dịch vụ lưu trữ chia sẻ mà thậm chí sử dụng VPSK tối thiểu
    3) sử dụng một công cụ nhanh hơn hoặc ít hơn (tốt nhất không phải WordPress mà là một khung)
    4) thu nhỏ các tệp tĩnh (những gì hiếm khi thay đổi - kiểu, hình ảnh, tập lệnh, phông chữ)
    5) trang/bộ nhớ đệm tĩnh

    Mọi thứ khác mang lại rất ít hoặc không mang lại lợi ích gì, và một số lời khuyên chỉ cản trở bạn. Vâng, điều quan trọng nhất là phải làm điều đó phiên bản điện thoại, bởi vì Thông thường, vấn đề về tốc độ tải trang xảy ra trên thiết bị di động.

    Tôi đồng ý với bạn 100%, cảm ơn vì sự chính xác và chính xác của bạn!

    Lyapushkin Nikita

    Chính khoảnh khắc đó bạn có thể cảm nhận được những cụm từ được ghi nhớ của một người bán hàng chưa bao giờ nhìn thấy những gì anh ta đang nói.
    Nếu bài viết dành cho phát triển chung- cái này phù hợp, nhưng không phù hợp cho tờ kiểm tra hoặc sách hướng dẫn sử dụng.
    Chỉ cần lấy tên các công nghệ và tự mình tìm kiếm chủ đề, tôi thậm chí khuyên bạn nên bỏ qua các câu được đưa ra trong bài viết.

    tan gai

    loại lưu trữ nào?)

    tan gai

    Alexey Tyazhelnikov

    "Thời gian bộ đệm mở rộng cho JavaScript và CSS" nghĩa là gì?

    Chúng tôi đã bật hộp kiểm cuối cùng và áp chót trên máy chủ lưu trữ (bài đăng có ảnh chụp màn hình ở trên))))

    Gennady Fedorov

    Vâng, đó là những gì họ đã làm!
    Rất tiếc, bạn không có năng lực trong vấn đề này.

    Gennady Fedorov

    Cảm ơn!
    Sự phức tạp của công việc tạo ra kết quả.

    Gennady Fedorov

    Đây là nhiệm vụ tạo động lực cho hành động chứ không phải mô tả cách thực hiện nó.

    Gennady Fedorov

    Cảm ơn đã bình luận!
    Tôi thừa nhận, mọi thứ đã được kết hợp trước khi chuyển sang https/http2))
    Có, chúng tôi đã đo tốc độ sau gzip, nhưng kết quả không giống nhau (bạn sẽ không làm hài lòng tất cả mọi người)...

    Gennady Fedorov

    Bạn đây, với tư cách là chuyên gia, đang đánh giá... hãy nhìn từ phía người dùng))

    Gennady Fedorov

    Nhận xét của bạn hoàn toàn không rõ ràng

    Alexander Porechnikov

    Người dùng thường không setup server, không lập trình hay tạo sản phẩm, thì việc một người không có kiến ​​thức vẫn có thể tạo một “blog/site” trên WordPress chắc chắn là tốt, nhưng nếu người đó có thắc mắc thì vẫn sẽ có để xử lý PHP, JavaScript , Nginx, Apache và các từ xa lạ khác trước đây và Google thường trợ giúp việc này, do đó, “sự mù chữ nhẹ” về mặt thuật ngữ sẽ dẫn đến thực tế là một người sẽ tìm kiếm thứ gì đó tương tự như “thanh trượt trong Java” và hãy ngạc nhiên khi thấy một loại JavaScript nào đó được chuyển cho anh ta trong kết quả. Vì vậy, nó không có giá trị kêu gọi từ phía người dùng

    Alexander Porechnikov

    Thông thường, vấn đề không phải là tốc độ tăng do tất cả các thao tác (dù chỉ là 0,1%), mà là chúng tôi không thấy các cách tối ưu hóa khác (CDN, nginx) và không hiểu cách thức hoạt động của nó (http2) và kết quả là , chúng ta tối ưu hóa những gì không có ý nghĩa để tối ưu hóa và quên mất những gì nên tối ưu hóa hoặc cách đạt được kết quả tối đa với việc tối ưu hóa của chúng ta.