Hướng dẫn - 10 phương pháp tăng tốc website của bạn | VN-Zoom | Cộng đồng Chia Sẻ Kiến Thức Công Nghệ và Phần Mềm Máy Tính

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

If possible, please support us by clicking on the advertisements.

Please add vn-z.vn to your ad blocking whitelist or disable your adblocking software.

×

Hướng dẫn 10 phương pháp tăng tốc website của bạn

Huỳnh Phúc Huy

Búa Đá Đôi
Cuối tuần rảnh rỗi, mình đã sưu tầm và dịch bài này từ crazyegg.com, bài này rất hay nhưng khá dài nên mình dịch hơi lâu chút và đôi chỗ vẫn chưa chuẩn xác cho lắm {biggrin}

Bài này cung cấp cho các bạn 10 phương pháp giúp tối ưu hóa, tăng tốc độ và giảm thiểu tối đa thời gian tải trang nhằm mang lại trải nghiệm tốt nhất cho người dùng khi họ vào ghé thăm trang web của bạn. Okay, bắt đầu nào! {hehe}

tang-toc-do-load-website.jpg

Bạn nghĩ rằng tốc độ tải trang không ảnh hưởng đến chất lượng website hay doanh số dịch vụ của bạn?

Hãy nghĩ lại đi.

Chỉ một giây chậm trễ trong khi tải trang dẫn đến:
· Lượt view sẽ thấp hơn 11%
· Giảm 16% sự hài lòng của khách hàng
· Chỉ số CR giảm 7% (chỉ số đo việc những khách hàng tiềm năng trở thành khách hàng thật sự khi họ mua một món hàng hay dịch vụ của bạn)

Amazon đã chứng minh điều này là đúng, báo cáo doanh thu tăng 1% cho mỗi 100 mili giây cải tiến tốc độ trang web của họ.

Rõ ràng là việc tăng tốc website của bạn là tối cần thiết để tăng doanh thu và chất lượng website của bạn.


coollogo_com-14983709.gif

1.
Giảm thiểu các truy vấn HTTP

http.svg

Theo Yahoo, 80% thời gian tải trang phụ thuộc vào các thành phần như: hình ảnh, stylesheets, scripts, Flash... Một truy vấn HTTP sẽ được khỏi tạo cho mỗi thành phần, vì thế website càng nhiều thành phần thì tải trang càng lâu. Vì vậy để tăng tốc thì việc đầu tiên cần làm là đơn giản hóa giao diện trang web của bạn.

· Sử dụng CSS thay cho hình ảnh nếu có thể.
· Kết hợp các file CSS lại thành một.
· Giảm thiểu số script và đặt chúng ở cuối trang.

Luôn luôn nhớ rằng, “càng đơn giản càng tốt”

Mẹo: Khi giảm thiểu số lượng các thành phần của trang, bạn sẽ giảm được số lượng truy vấn HTTP tới trang giúp giảm tải băng thông và cải thiện đáng kể hiệu suất trang web .


2. Giảm thiểu khoảng thời gian hồi đáp của máy chủ

29-300x223.jpg

Mục tiêu tiếp theo của các bạn là giảm thời gian hồi đáp của máy chủ xuống dưới 200 mili giây. Nếu làm theo những thủ thuật dưới dây, bạn hoàn toàn có thể đạt được.

Google khuyến cáo nên sử dụng các giải pháp theo dõi ứng dụng web để tránh xảy ra tình trạng nghẽn ổ chai trong khi hoạt động

Mẹo: Sử dụng các trang web sau để tính toán tốc độ tải trang của website và nhận các hướng dẫn để tối ưu hóa website của bạn:
· Yslow
· Google’s PageSpeed Tools


3. Nén, nén và nén

backup-compression.jpg

Những trang dung lượng lớn (Những trang mà bạn tạo ra nội dung với chất lượng cao) thường nặng hơn 100Kb. Kết quả là chúng cồng kềnh và mất nhiều thời gian để tải. Cách tốt nhất để giảm thời gian tải trang là nén chúng lại.

Việc nén dữ liệu sẽ giúp làm giảm băng thông của bạn, do đó làm giảm nhẹ kích thước gói tin HTTP. Công cụ được sử dụng ở đây là Gzip.

Hầu hết các máy chủ web có thể nén các tệp ở định dạng Gzip trước khi gửi chúng để tải xuống bằng cách gọi mô-đun bên thứ ba hoặc sử dụng các chương trình được cài đặt sẵn

Theo Yahoo, việc này có thể giảm thời gian tải xuống đến 70%.
Hiện nay thì 90% các trình duyệt đều hỗ trợ Gzip, đây là một sự lựa chọn tuyệt vời để tăng tốc website của bạn.

Mẹo: Bạn có thể tham khảo thêm bài viết sau về Gzip compression. Sau đó cài đặt server của bạn để có thể sử dụng compression:
· Apache: Dùng mod_deflate
· Nginx: Dùng HttpGzipModule
· IIS: Cấu hình HTTP Compression


4. Cho phép browser caching

1691_repetitive.jpg

Khi bạn ghé thăm một trang web, những thành phần trên trang được lưu trữ trên ổ đĩa của bạn trong cache, vùng lưu trữ tạm thời, vì vậy lần tới khi mà bạn ghé thăm trang web, trình duyệt của bạn có thể tải trang mà không cần phải gửi lại các truy vấn HTTP một lần nữa.

Lần đầu tiên khi một người ghé thăm website, họ phải tải toàn bộ văn bản HTML, stylesheets, tập tin javascript và hình ảnh để có thể hiển thị và sử dụng. Có thể lên tới 30 thành phần và mất tới 2.4 giây

load-time-1.png

Một khi trang đã được tải xong và các thành phần được lưu trữ trong cache, sẽ chỉ cần một vài thành phần cần tải xuống trong các lượt ghé thăm kế tiếp.

Mẹo: Xem thêm bài viết này để biết 4 phương pháp bật caching.

Các thành phần của website cần có thời gian cache ít nhất là 1 tuần. Với những thành phần bên thứ như quảng cáo hay widgets thì nên có thời gian cache ít nhất 1 ngày.

Những thành phần khác (JS và CSS, hình ảnh, đa phương tiện, PDFthiết lập thời gian ít nhất là 1 tuần, và có thể đến 1 năm.


5. Giảm thiểu kích thước các tài nguyên khi tải trang

compression-icon.jpg

Để làm giảm kích thước của các tài nguyên này, sau đây là một số lời khuyên:

· Để giảm kích thước HTML, bạn có thể sử dụng PageSpeed Insights Chrome Extension để tạo một mã nguồn HTML được tối ưu. Chạy phân tích website của bạn và chọn tùy chọn ‘Minify HTML’. Click vào ‘See optimized content’ để lấy mã HTML đã được tối ưu.
· Để giảm kích thước CSS, bạn có thể sử dụng YUI Compressorcssmin.js.
· Để giảm kích thước JavaScript, hãy thử Closure Compiler, JSMin hoặc YUI Compressor. Bạn cũng có thể sử dụng Gulp để tự động nén và tối ưu hóa các tập tin này.


6. Tối ưu hóa hình ảnh

Optimize-Images-for-SEO.jpg.jpg

Với hình ảnh bạn cần tập trung vào 3 thứ: kích thước, định dạng và thuộc tính src.

Kích thước hình ảnh

Những hình ảnh kích thước quá lớn tốn nhiều thời gian dể tải, iì vậy bạn cần phải sử dụng hình ảnh ở kích thước nhỏ nhất có thê. Sử dụng image editing tools để:

· Crop ảnh của bạn để được kích thước đúng. Ví dụ nếu trang của bạn rộng 570px, hãy thu nhỏ ảnh của bạn bằng đúng kích thước ấy. Đừng sử dụng hình ảnh rộng 2000px và thiết lập thuộc tính (width=”570”). Việc này sẽ almf chậm tốc độ tải trang và mang đến trải ngheiemj không tốt cho người dùng.
· Giảm chiều sâu của màu sắc xuống mức có thể chấp nhận được.

Định dạng hình ảnh

· JPEG là định dạng tốt nhất.
· PNG cũng tốt, tuy nhiên một số rất ít các trình duyệt cũ sẽ không hỗ trợ.
· GIFs nên được sử dụng cho các khối hình đơn giản và nhỏ (nhỏ hơn 10×10 pixels) và sử dụng cho ảnh động.
· Không nên sử dụng BMPs hay TIFFs.

Thuộc tính Src

Một khi bạn đã có kích thước và định dạng chuẩn, hãy đảm bảo rằng mã nguồn cũng phải chính xác. Cụ thể là hãy tránh những hình ảnh với mã src rỗng.

Trong HTML, mã nguồn nhúng hình ảnh bao gồm:
HTML:
<img src=””>

Khi không có nguồn ảnh trong dấu nháy, trình duyệt thực hiện truy vấn tới chính trang hiện tại. Điều này làm tăng thêm lưu lượng truy cập không cần thiết đồng thời làm đứt gãy dữ liệu người dùng.

Mẹo: Hãy bỏ thời gian để điều chỉnh kích thước của bạn trước khi sử dụng và luôn luôn sử dụng đường dẫn chính xác đến hình ảnh.


7. Tối ưu hóa việc phân phối CSS

minify-css-website-performance-optimization-tasks.jpg

Có 3 phương thức phân phối CSS:

- Sử dụng tập tin CSS bên ngoài, tập tin này sẽ được tải trước khi trang của bạn được hiển thị
- CSS được đặt trực tiếp trong thẻ head mà không liên kết với tập tin CSS bên ngoài (phương thức này không khuyến cáo sử dụng)
- Sử dụng inline CSS được chèn vào chính DOM Element của tài tiệu HTML

CSS bên ngoài được đặt trong thẻ head của tài liệu HTML và có mã nguồn như dưới đây:
HTML:
<!— CSS styles –>
<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />

Inline CSS được nhúng bên trong tài liệu HTML của bạn và có dạng như thế này:

inline-css-example.png


Nhìn chung, việc sử dụng tập tin CSS bên ngoài phù hợp hơn bởi nó làm giảm kích thước mã nguồn của bạn và hạn chế bị trùng lặp mã nguồn.

Mẹo: Chỉ nên sử dụng duy nhất một tập tin CSS stylesheet để tránh gia tăng truy vấn HTTP đến máy chủ, sau đây là 2 công cụ hữu ích mà mình muốn chia sẻ:
· CSS Delivery Tool – Cho bạn biết số tập tin CSS bên ngoài mà website của bạn đang sử dụng
· Hướng dẫn gộp các tập tin CSS.


8. Ưu tiên phần trên cùng của trang

tro-ve-dau-trang.png

Thường thì các bạn chỉ nên sử dụng một tập tin CSS Stylesheet thay vì inline CSS nhưng đôi khi phải kết hợp cả hai khi sử dụng với mục đích sau: bạn có thể cải thiện trải nghiệm người dùng bằng cách ưu tiên hiển thị phần đầu của trang nhanh nhất có thể, tiếp đến là nội dung chính của trang…phần còn lại của trang thì được tải sau đó.

Mẹo: Bạn nên cân nhắc chia CSS thành 2 phần: Một phần nhỏ inline CSS để ưu tiên hiển thị phần trên cùng của trang nhanh nhất có thể, phần còn lại sử dụng tập tin CSS bên ngoài có thể được tải sau.


9. Giảm thiểu số plugin sử dụng cho website

pluginicon256.png

Quá nhiều plugin sẽ làm chậm website của bạn, gây ra các vấn đề về bảo mật, thường dẫn đến crash và các vấn đề kỹ thuật khác

Mẹo: Tắt và xóa những plugin không cần thiết, đặc biệt là những plugin ảnh hưởng tới tốc độ tải trang website của bạn


10. Giảm thiểu các điều hướng ko cần thiết

how-to-create-seo-friendly-redirects.jpg
Việc chuyển hướng sẽ tạo nên các truy vấn HTTP bổ sung và gia tăng thời gian tải trang. Vì vậy bạn phải hạn chế việc chuyển hướng đến mức tối thiểu

Việc chuyển hướng thường được sử dụng cho responsive website, những người dùng trên điện thoại sẽ được chuyển hướng đến phiên bản responsive phù hợp với từng thiết bị.

Mẹo: Google khuyến cáo 2 phương pháp để đảm bảo việc chuyển hướng đến responsive page không làm chậm website của bạn:

· Chỉ sử dụng một HTTP redirect để đưa những người dùng với mobile user agents thẳng tới những liên kết mobile mà không sử dụng những chuyển hướng trung gian nào hết, và
· Thêm <link rel=”alternate”> markup vào trang hiển thị cho màn hình desktop để nhận diện các liên kết mobile tương ứng với từng thiết bị giúp cho Googlebot có thể crawl và index các trang mobile của bạn.

Nghe có vẻ hơi phức tạp phải không. Các bạn cũng có thể tyham khảo thêm bài đăng này VerveSearch sẽ giúp các bạn chuyển hướng sang website thân thiện với di động mà không làm giảm tốc độ tải trang.


Điểm mấu chốt

Một số phương pháp trong những phương pháp nêu trên rất dễ thực hiện, tuy nhiên một số ít phương pháp lại khá phức tạp và cần nhiều kỹ thuật nâng cao.

Nếu bạn muốn khám phá thêm, Các nhà phát triển Google có những thông tin hữu ích có thể giúp các bạn cải thiện hiệu suất trang web.
Cảm ơn các bạn đã đọc đến hết bài, chúc các bạn cuối tuần vui vẻ! {beauty}
 

tunghn89

Gà con
Thiếu 1 cái nữa là lựa chọn nhà cung cấp hosting có tốc độ đường truyền nhanh và ổn định, máy chủ mạnh, blabla..... chứ tối ưu mà server không hỗ trợ cũng như không
 


Top