Các phương pháp giúp tăng tốc độ tải trang cho mobile web

Các phương pháp giúp tăng tốc độ tải trang cho mobile web
     

Một trong những yếu tố quan trọng để Google đánh giá một website là tốc độ tải trang, đặc biệt điều này càng được quan tâm khi website ở dạng mobile. Đối...

Một trong những yếu tố quan trọng để Google đánh giá một website là tốc độ tải trang, đặc biệt điều này càng được quan tâm khi website ở dạng mobile. Đối với các website có tốc độ tải tốt, Google sẽ ưu tiên index và giới thiệu đến người dùng. Vậy hãy cùng xem qua những phương pháp giúp tăng tốc cho trang mobile web của bạn.

tang toc website 
Một mobile web tải chậm sẽ ảnh hưởng đến đánh giá của Google và người dùng

Trước khi tham khảo các phương pháp gợi ý giúp tăng tốc trang mobile web, Tạp Chí Web khuyên bạn nên kiểm tra tốc độ tải trang website của mình trước bằng một số các công cụ để test một cách khách quan nhất.

Nếu bạn đã kiểm tra xong rồi thì hãy cùng bắt tay vào nghiên cứu các phương pháp giúp tăng tốc độ tải trang cho mobile web dưới đây.

1. 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.

toi uu hinh anh 
Tối ưu hóa dung lượng hình ảnh

2. 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.

3. Sử dụng CSS3 thay cho Ảnh

CSS3 
CSS3 sẽ được sử dụng thay cho hình ả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.

4. Responsive Image Plugins

co dan hinh anh 
Tự động co giãn hình ảnh phù hợp với smartphone

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 độ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.

5. Kỹ thuật Image Sprites

Image Sprites  
Sử dụng kỹ thuật Image Sprites sẽ giúp website load nhanh hơn

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.

6. 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 thông qua việc sử dụng các công cụ nén mã :

a. 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.

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.

b. 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.

×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.

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.

7. 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.

a. 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.

b. 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 các công cụ có sẵn 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é.