Tốc độ tải trang web. 4 yếu tố chính.

Tags: SEO

Tốc độ tải trang web. Làm thế nào để tăng tốc độ tải xuống? Vẫn đề chính.

Khuyến khích tốc độ tải trang web Google - 2 giây. (và bây giờ hãy nhìn vào tốc độ của bạn)

(Làm thế nào để kiểm tra tốc độ tải trang web?Cách dễ nhất và nhanh nhất là mở công cụ dành cho nhà phát triển CTRL + SHIFT + ITiếp theo, chọn tab “Mạng”, sau đó làm mới trang, để xem tốc độ tải xuống mà bạn cần làm mới trang, Làm mới mà không cần bộ nhớ cache: bạn cần nhấn CTRL + F5 / CTRL + R. Và bên dưới sẽ là tốc độ tải xuống.)

Kiểm tra tốc độ tải trang
sử dụng dịch vụ của Google: PageSpeed Insights

Những điểm chính ảnh hưởng nhiều nhất:

Bộ nhớ đệm
css (phong cách)
JS (tập lệnh)
Hình ảnh (trọng lượng, kích thước - vâng, chính xác là kích thước HxW, dữ liệu Meta - vâng, có một thứ như vậy, đây là thông tin của họ như: Ngày tháng, tiêu đề, chủ đề, v.v.)

Để không tô vẽ nhiều thông tin không cần thiết về những khoảnh khắc nhỏ không ảnh hưởng đặc biệt hoặc ảnh hưởng không đáng kể, tôi sẽ không viết về chúng.

# 1 TIỀN MẶT

bộ nhớ đệm (hoặc làbộ nhớ đệm) là một vùng đệm (một nơi) lưu trữ bất kỳ dữ liệu nào. Trong trường hợp của chúng tôi, đây là Hình ảnh, mã, kiểu dáng và hơn thế nữa.

Dễ nhất những gì bạn có thể làm cho mình là kích hoạt bộ nhớ đệm trên máy chủ.
(Nếu bạn có Ukraine.com.ua lưu trữ, thì bạn cần vào “cài đặt trang” -> “cài đặt cơ bản” và sẽ có một mục “Bộ nhớ đệm” và ở đó bạn chọn khoảng thời gian cần thiết mà trang web của bạn sẽ được lưu vào bộ nhớ đệm. Từ bản thân tôi, tôi khuyên bạn nên đặt nó thành 2 tuần - với khoảng thời gian lưu vào bộ nhớ đệm này, thông tin chi tiết về tốc độ trang của google sẽ thêm rất nhiều điểm.)

Các phương pháp khác liên quan đến htaccess, thẻ trình duyệt, v.v. có thể được tìm thấy trên Internet trong một số bài báo và tôi không thấy điểm nào trong việc sơn lại. Bạn có thể đọc về các loại bộ nhớ đệm trong bài viết trên Habré.

# 2 CSS (kiểu)

CSS - (Cascading Style Sheets - trang định kiểu xếp tầng).
Những gì có thể được thực hiện với các phong cách?
Tốt Trước hết bóp chúng.
Thứ hai giảm số lượng tệp, tức là hợp nhất nhiều nhất có thể để giảm số lượng cuộc gọi đến máy chủ.
Thứ banhúng các kiểu chính ảnh hưởng đến việc hiển thị phần hiển thị của màn hình đầu tiên trực tiếp vào và để phần còn lại trong tệp.

Tôi cũng để lại một vài liên kết hữu ích:

dịch vụ nén css
cách nén tệp css

# 3 JS (tập lệnh)

Ở đây chúng tôi cũng có một số cách để tối ưu hóa tập lệnh.

Hoãn tải tập lệnh. Đẩy nó càng thấp càng tốt, đặt nó sau hoặc thậm chí thấp hơn đôi khi nó có ích, đôi khi nó không phải là một lựa chọn. Nhưng điểm số 2 đến để giải cứu.
ASYNC - tải tập lệnh không đồng bộ. Điều này được thực hiện bằng cách sử dụng tham số "async"
Có thêm chi tiết về async ở đây.
Thêm một chút thông tin về JS và ảnh hưởng của nó.
Điểm nhỏ.
JS cũng có thể được nén. Đồng thời hợp nhất thành 1 tệp.

# 4 Hình ảnh

Bạn luôn có thể làm ba điều: Nhìn vào ngọn lửa, nhìn vào nước và tối ưu hóa các bức tranh.

Chủ đề khá rộng, vì vậy tôi sẽ cố gắng chỉ cung cấp cho bạn những thông tin quan trọng.

Tối ưu hóa cân nặng.

Làm sao? Thông qua một chương trình hoặc dịch vụ.

Chương trình làm việc hàng loạt với hình ảnh Hình ảnh đá nhanhvới nó bạn có thể
Thay đổi kích thước hình ảnh hàng loạt. Làm thế nào và những gì đã có google không khó.
Tải xuống Hình ảnh Faststone.
Dịch vụ giảm kích thước hình ảnh - gấu trúc. Hay đúng hơn là TinyPNG & TinyJPG.
Ưu điểm chính của TRỰC TUYẾN. Chỉ cần tải tệp lên và lấy lại ở phiên bản nén - Chất lượng không bị ảnh hưởng chút nào (đó là Magic).
Liên kết: tinypng.com & tinyjpg.com

Tối ưu hóa Kích thước.

Kích thước như tôi đã viết ở trên có thể được thay đổi bằng cách sử dụng chương trình hình ảnh đá nhanh.
Kích thước là Chiều cao x Cân nặng (Chiều cao x Chiều rộng).

Thí dụ:

Kích cỡ	Điểm ảnh	Kích thước tập tin
100x100	10 000	39 KB
200x200	40 000	156 KB
300 x 300	90 000	351 KB
500x500	250 000	977 KB
800x800	640 000	2500 KB

(Nếu bạn muốn biết thêm về điều này, bạn có thể đọc phần trợ giúp của Google về chủ đề này. BÀI VIẾT từ Google, nhưng tôi cảnh báo bạn rằng nó khá khó hiểu ở một mức độ nào đó)

Ví dụ, chúng tôi có 2 hình ảnh:
1) Trọng lượng 100kb, Kích thước 500x500
2) Trọng lượng 100kb, Kích thước 2500x2500
Có vẻ như nó tạo ra sự khác biệt nào, chúng có trọng lượng như nhau, do đó, tải chúng phải phức tạp hoặc đơn giản như nhau, nhưng nó không có ở đó nếu bạn kiểm tra bằng tốc độ trang của google, nó vẫn sẽ có độ phân giải cao hơn hình ảnh.

Tổng kết: Vấn đề kích cỡ. Trọng lượng quá. (phần còn lại không quá quan trọng nhưng theo lập luận của một số chuyên gia thì nó cũng có tác động, bây giờ tôi đang nói về Siêu dữ liệu hình ảnh)

Tôi không thực sự viết bất cứ điều gì về dữ liệu meta, tốt, không có gì để viết ở đây ...
Chỉ cần xóa tất cả dữ liệu meta cho tất cả các hình ảnh, theo truyền thuyết, bạn có thể giảm kích thước xuống 2 lần. Tôi đã phát hiện ra gần đây (về ảnh hưởng của kích thước tệp, tôi nghĩ nó khá nhỏ).

Tóm tắt về bản phát hành: