Tốc độ load trang là một yếu tố cực kỳ quan trọng trong tất cả các trang web của bạn và điều đó càng quan trọng hơn khi trang Web của bạn ở dạng Mobile khi mà người dùng sử dụng kết nối chậm hơn, cấu hình lướt web của thiết bị không thể bằng máy vi tính hay laptop của bạn được. Điều đó có nghĩa là người dùng sẽ không muốn đợi để xem nội dung trang của bạn như thế nào cho dù nó có hấp dẫn thế nào chăng nữa. Trước khi đến với một vài phương pháp tăng tốc của mình ở bên dưới, để kiểm tra xem tốc độ load trang của bạn như thế nào , bạn có thể sử dụng công cụ PingDom để test một cách khách quan.
[notification type=”alert-info” close=”true” ]Bài viết sau đây liệt kê ra những phương pháp không chỉ áp dụng riêng cho Web Mobile mà còn sử dụng cho Website chính của bạn ở phiên bản laptop.[/notification]
Tối ưu hóa hình ảnh :
Hình ảnh là cần thiết trong các bài viết của bạn để minh họa cho dễ hiểu. Nó chiếm 80% sự thu hút về nội dung của bạn với những vị khách ghé thăm nhưng nó cũng là nguyên nhân lớn nhất khiến trang web của bạn load chậm. Ở đây có 1 vài cách để xử lý việc này.
Tối ưu hóa dung lượng ảnh của bạn :
Nếu bạn resize 1 bức ảnh có kích cỡ 500×500 xuống 50×50 bằng các thẻ HTML thì có lẽ bạn vẫn chưa biết rằng trình duyệt của bạn vẫn load full bức ảnh đó, chỉ là nó chỉ hiển thị 10% kích thước ảnh mà thôi. Cách tốt nhất ở đây là bạn nên tạo ra 2 bức ảnh, 1 cho Desktop và 1 cho Mobile như thế sẽ tăng tốc độ load cho cả 2 phiên bản Desktop, Mobile. Mình khuyến khích các bạn sử dụng phần mềm Photoshop và lưu với tùy chọn Save for Web & Devices.
Xem hướng dẫn thêm tại [button style=”btn-success btn-sm” icon=”glyphicon-hand-right” align=”left” type=”link” target=”false” title=”link này” link=”http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/”]
Sử dụng CSS3 thay cho Ảnh
Có một cách thường được sử dụng bởi các Webmaster có kinh nghiệm, đó là sử dụng CSS3 thay cho những bức ảnh kích cỡ nhỏ hoặc những bức ảnh cùng ý nghĩa. Một cách để tối giản ảnh trên Website. Ngoài ra, CSS3 có rất nhiều hiệu ứng khiến trang Web của bạn trở nên lộng lẫy hơn mà không bị hạn chế tốc độ load. Dưới đây là 1 vài nguồn tài nguyên về các hiệu ứng của CSS3 mà các bạn có thể vọc :
Responsive Image Plugins
Một trong những vấn đề lớn nhất với giao diện co giãn đó là các hình ảnh lớn sẽ tự động fit vừa với những màn hình nhỏ. Như thế thì nó chưa hẳn là tối ưu cho thiết bị di dộng, những người sử dụng phải load những bức ảnh lớn trong khi đáng lẽ họ chỉ cần ¼ kích cỡ bức ảnh mà thôi. Giải pháp đưa ra là sử dụng plugin Responsive Img của Jquery, nó giúp cho Website tạo ra các bức ảnh dựa trên kích cỡ của các loại smart-phone bằng cách tự động chèn các đoạn link vào các thẻ Src. Cách này giúp tăng tốc độ load trang cho site của bạn rất nhiều đấy.
1 Plugin khác giúp cho công việc của bạn mà không cần dùng tới ngôn ngữ lập trình trên server là responsiveBreakpointJQ.
Kỹ thuật Image Sprites
1 cách tốt để tối giản ảnh của bạn là bỏ nhiều ảnh vào 1 tấm ảnh và dùng kỹ thuật Sprites. Gói gọn trong 1 tấm ảnh lớn rồi dùng kỹ thuật này chia từng khung nhỏ, như thế sẽ làm giảm số lượng HTTP request lên server giúp website của bạn load nhanh hơn.
Để tìm hiểu kỹ hơn về kỹ thuật này, bạn có thể xem trên IzWeb
Một công cụ được mình khuyến khích khi muốn tạo 1 image sprites : [button style=”btn-success btn-sm” icon=”glyphicon-hand-right” align=”left” target=”false” title=”Công Cụ Tạo Sprit” link=”http://mysprit.es/tool”]
Gom các file giao diện lại thành 1 gói
Một cách khác để tối ưu hóa tốc độ load site, đó là gom tất cả các file CSS, JS lẻ tẻ lại thành 1 file ( Kiểu như dạng LESS ) . Ngoài ra các bạn có thể sử dụng 1 vài cách sau đây :
Sử dụng các công cụ nén mã :
Minify CSS and JavaScript
Minification được sử dụng rất phổ biến cho các developer. Bạn có thể nhận ra nó khi view source bất cứ trang nào mà thấy đuôi file có dạng jquery.min.js . Các file này khi view là 1 “nùi” code trong đó được trình bày 1 cách rối rắm hết sức. Thực chất việc nén này là lược bỏ các khoảng cách, dấu chấm phẩy không cần thiết khiến cho dung lượng file nhỏ đi và trình duyệt đọc dễ dàng hơn nhiều. Ở đây có 3 trang Web mình muốn chia sẻ cho các bạn khi tối ưu 1 trang Web Mobile.
[notification type=”alert-warning” close=”true” ]Lưu ý : Nhớ cẩn thận sao lưu trước nhé, vì 1 số câu lệnh Media Queries có thể bị sai lệch.[/notification]GZIP Files
GZIP cũng tương tự Minifier, nó nén các file của bạn lại và làm cho nó nhỏ gọn hơn. Nó nén được các định dạng như HTML, Javascript, CSS. Trình duyệt của bạn sẽ tải về, giải nén và thực thi nó nhưng nhanh hơn.
[notification type=”alert-info” close=”true” ]Làm thế nào để sử dụng nó ? Bạn xem thêm trên Stack Overflow nhé. Thực sự là có rất nhiều cách tùy CMS của bạn hoặc source code bạn làm.[/notification]Không phải tất cả các hosts đều cho phép GZIP trên dịch vụ của họ vì nó gây tổn hại đế CPU của họ. Vậy nên hãy sử dụng hosting tốt tốt chút. Mình khuyến nghị sử dụng HostGator hay Site5, những hosting tốt nhất mà mình từng dùng với rất nhiều tùy chọn dành cho dân dev.
Một vài giải pháp khác
Dưới đây là một số giải pháp khác giúp bạn tăng tốc hiệu suất trang web cũng như tốc độ tải trang.
Inline CSS and JavaScript
Kinh nghiệm này được rút ra từ độ ưu tiên trong mỗi trình duyệt. Khi trình duyệt đọc các file HTML, nó sẽ đọc luôn cả các dòng CSS/Javascript inline và chuyển sang thẻ nội dung và đọc lại 1 lần nữa. Điều này gây ra 1 sự lặp lại và đương nhiên tốn thời gian render trên screen, đặt biệt nếu các thẻ CSS ảnh hưởng đến các thẻ HTML khác thì trình duyệt lại phải render lại lần nữa và lại làm tăng thời gian load trang lên. Vì thế giải pháp ở đây là chia các định nghĩa CSS cho HTML ra 1 file riêng, tương tự Javascript cũng vậy và đặt nó lên phần header trong HTML để nó được load đầu tiên nhằm đảm bảo không có sự render lại.
HTTP Requests
Mỗi image, CSS & JavaScript file đều phải request lên 1 server nào đó. Nếu quá nhiều cùng request trong 1 khoảng thời gian sẽ khiến cho website của bạn bị quá tải hoặc làm chậm website của bạn. Vậy nên giải pháp đưa ra là hãy kết nối lại các file css với nhau thành 1 file ( Lúc xử lý thì bạn nên sử dụng định dạng LESS để sử lý, còn file CSS là file cuối cùng bạn complie ra ).
Ngoài ra, một mẹo nhỏ với HTTP requests đó là trình duyệt thường chỉ download từ 4-6 file trong cùng 1 thời điểm từ nhiều host khác nhau, nên nếu bạn muốn giảm tải cho website thì có thể đặt tối đa 4 file external trên mỗi host. Mẹo này mình nghĩ là các bạn có áp dụng nhưng chưa biết ý nghĩa của nó 😀
Kết luận
Hy vọng rằng những típ trên sẽ giúp bạn giảm thiểu thời gian load và render cho website của bạn. Và nhớ kiểm tra thời gian load trang với Pingdom sau khi sử dụng các giải pháp trên nhé.
Nếu các bạn biết các giải pháp khác nữa, hãy chia sẽ nó tại đây nhé.
Biên tập lại tại Jon Tetzlaff’s Blog
AnhThien8’s Blog
