10/10/2018, 13:33
Cho hỏi ảnh để ở sever khác load có nhanh hơn không
Tình hình là em tối ưu mấy cái ảnh để cho load nó nhẹ web nhưng khi zoom web nên ảnh nó vỡ nhìn xấu quá
bây giờ em đặt ảnh lên sever khác xong chỉ lấy url liệu web có nhanh hơn không nhỉ
mong mọi người tư vấn giúp mình với
bây giờ em đặt ảnh lên sever khác xong chỉ lấy url liệu web có nhanh hơn không nhỉ
mong mọi người tư vấn giúp mình với
Bài liên quan
- Mình hay host hình ở imgur .com.
1. Minify các file css và js. Cố gắng càng ít file css và js càng tốt (gom nhiều file css làm 1, gom nhiềm file js làm 1. Chú ý: gom file nhiều quá sau này khó edit file) vì browser sẽ giảm được số kết nối đến server để tải file.
2. Compress output (khi bạn view page source thì thấy source chỉ hiển thị trên 1 dòng, có tác dụng loại bỏ các khoảng trắng thừa, các ghi chú ---> giảm dung lượng file html)
3. Optimize các file hình, up lên server chứa ảnh nào có dịch vụ tốt để có tốc độ load về nhanh hơn
4. Chỉnh .htaccess để nén tất cả file html, css, js, hình ảnh theo chuẩn GZIP trước khi browser tải về.
5. Chỉnh .htaccess để browser cache các file css, js và hình ảnh lại, browser sẽ tự động dùng các file cache đó, không load về nữa. (nếu page tĩnh, có thể chỉnh để cache html luôn, còn page động - thay đổi dữ liệu thường xuyên thì đừng cache)
6. Nếu dùng framework có thể làm thêm cache các query truy vấn.
7. Dùng plugin jquery Lazy Load. Plugin này có tác dụng ngăn không cho browser tải về tất cả hình ảnh ngay từ đầu, chỉ khi bạn lướt đến phần chứa hình ảnh nào thì nó sẽ tự load hình ảnh đó lên thôi.
8. Đặt tất cả file css vào đầu trang trước tag </head> và đặt tất cả file js vào cuối trang trước tag </body>
Thanks!
- Vẫn trong FireFox ấn tổ hợp phím Ctrl + Shift + i để mở cửa sổ Toggle Tools, chuyển qua tab Network. Ở phía dưới cửa sổ, bạn chọn một trong các mục HTML, CSS, JS, Images ... hoặc chọn All rồi ấn phím F9, bạn sẽ thấy quá trình browser load file của trang web.
- Trong danh sách file hiện ra, bạn click vào 1 file sẽ thấy có 1 khung bên phải xuất hiện. Trong khung này, ở phía trên nếu có xuất hiện dòng Cache-Control với giá trị khác 0 và dòng Content-Encoding:"gzip" thì có nghĩa file này đã được cache và nén gzip.
=======================
Trường hợp website của bạn:
=======================
- Load rất nhiều (126 request)
- File đã được cache và nén gzip.
- Trang web chưa được minify (sorry ở trên mình gõ nhầm là minimize) css và js, chưa compress html.
- Trong page source: bạn nên để các file css ở trên, trước tag </head> và các file js ở dưới, trước tag </body> vì lúc mới load page, chỉ cần hiển thị nội dung chứ chưa cần phải thực hiện thao tác jquery gì cả. Lưu ý: phải đặt file quan trọng ở trên các file khác. Ví dụ:
====> nên đặt jquery-1.7.2 trên các file js khác vì đây là file nguồn, các file js khác sẽ sử dụng các hàm trong jquery-1.7.2
- Như đã nói ở trên, bạn nên dùng plugin jquery Lazy Load để load image. Khi sử dụng, bạn làm lại bước kiểm tra ở trên sẽ thấy số lượng request giảm rất nhiều.
- Hình ảnh trên website: bạn chỉ nên dùng các ảnh thumnail, bạn tự cắt hình trước và up lên để thumnail được đẹp và nhẹ. Dùng plugin jquery FancyBox, để khi click vào thumnail thì mới load ảnh với kích thước thật lên.
- Cuối cùng: Google PageSpeed Insights, bạn làm tốt các bước trên sẽ đạt được số điểm kha khá khoảng từ 70 điểm đổ lên là ổn. Cố gắng càng cao càng tốt, nhưng không cần phải 90 - 100 vì chính ngay bản thân Google cũng không được 100
- Mình up hình ở trang imgur chấm com