Trang chủ Thủ thuật Cách tối ưu hóa mã CSS, Javascript tăng tốc website

Cách tối ưu hóa mã CSS, Javascript tăng tốc website

speed-up-your-websiteNhận nhiệm vụ tối ưu hóa nhắm tăng tốc cho một website của khách hàng nên được dịp tìm hiểu các và triển khai các cách khác nhau để… chiều lòng khách hàng.

Một trong các cách mình thực hiện là nén các tập tin CSS, Javascript, hình ảnh…

Với hình ảnh thì ta có thể dùng một phần mềm chuyên dụng để hỗ trợ. Vậy còn nén tập tin CSS và Javascript thì phải như thế nào. Đơn giản dễ hiểu là phương pháp viết mã sao cho các đoạn mã liền

nhau và không phải xuống hàng.

Ví dụ ta có đoạn mã sau:

thì ta sẽ viết lại thành:

tức là từ 8 dòng còn lại 1 dòng. Chính vì vậy mà các bạn thường thấy các tập tin jQuery hiệu ứng thường có 2 phiên bản là bản thường mà một bản ta gọi là min. Bản thường là bản tường minh mà ta có thể dễ dàng đọc mã. Bản min tức là cách viết thu gọn như ví dụ ở trên. Với các viết như vậy đương nhiên là tập tin sẽ giảm dung lượng.

Với những đoạn mã ngắn thì ta có thể thủ công để thu gọn tuy nhiên với những đoạn mã nhiều thì khó vì dễ sai xót mà mấy cái này thiếu 1 dấu phảy (,) thì cũng đi luôn toàn bộ. Vậy nên ta có thể sử dụng một số công cụ trực tuyến sau:

Tối ưu hóa mã Javascript: www.jscompress.com, www.minifyjavascript.com, www.javascript-minifier.com, www.jsmini.com, www.refresh-sf.com/yui,…
Tối ưu hóa mã CSS: www.cssminifier.com, www.minifycss.com/css-compressor, www.csscompressor.com,…

Việc tối ưu hóa hình ảnh bạn cũng có thể sử dụng một số dịch vụ trực tuyến sau: www.compressnow.com, www.jpeg-optimizer.com, www.jpgoptimiser.com, www.imageoptimizer.net,…

Bạn có thể tìm thêm nhiều trang khác với từ khóa tương ứng như: minify css, minify js, images optimise,…

Đây là một trong những cách đơn giản để tối ưu tốc độ tải trang. Ngoài ra còn nhiều phương pháp khác nữa mà có dịp mình sẽ chia sẻ thêm.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Dân Anh đốt cột phát sóng 5G vì nghi phát tán virus Corona

Ít nhất ba cột phát sóng 5G vừa bị đốt cháy vì có người tin rằng nó là nguồn phát tán virus corona. Theo BBC,...

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

GitHub mua lại nền tảng npm

npm là đóng một phần quan trọng trong cộng đồng JavaScript. Cộng đồng npm trong 10 năm qua là sự đóng góp của hàng...

Youtube cho phép quảng cáo trên video có nội dung liên quan đến Covid-19

Trong một bài đăng trên blog, CEO Susan Wojcicki cho biết YouTube sẽ bắt đầu cho phép chạy quảng cáo trên các video thảo...

Kiểm tra khả năng bị lây nhiễm Covid-19 của bạn bằng trí tuệ nhân tạo

Trong bối cảnh Covid-19 đang lan rộng và khả năng lây nhiễm rất cao khi ta vô tình tiếp xúc với các người bị...

BẠN XEM CHƯA

Một triệu máy tính bị hack và trở thành công cụ kiếm tiền từ Adsense

Một nhóm tội phạm mạng đã chiếm quyền điều khiển gần 1 triệu máy tính trên khắp thế giới trong suốt 2 năm qua...

Những màn hình desktop thú vị

Mời các bạn chiêm ngưỡng bộ sưu tập những màn hình thú vị từ các siêu... lầy. Huỳnh Mai Anh Kiệt (Sưu tầm)

Một phó chủ tịch của Facebook bị bắt ở Brazil vì không chia sẻ dữ liệu WhatsApp

Apple không phải là hãng công nghệ duy nhất đang đấu tranh chống lại một quyết định của tòa án mà Facebook cũng đang...

Lưu hình ảnh từ một địa chỉ (đường dẫn) về máy chủ

Đoạn mã nay được mình viết bằng ngôn ngữ PHP có tác dụng giúp người dùng lưu trữ hình ảnh từ một địa chỉ...

Hướng dẫn cắt video bằng VLC

Có rất nhiều công cụ hỗ trợ bạn cắt video nhưng nếu đang cần dùng nhanh và không muốn cài thêm bất cứ phần...