Vấn đề mà rất nhiều bạn làm web và quản trị web đau đầu nhất là “thời gian tải trang web”. Thời gian tải trang web là một trong những yếu tố quan trọng nhất ảnh hưởng đến khả năng sử dụng của nó, hầu hết người dùng Internet sẽ bỏ qua website của bạn nếu nó không tải được trong vòng 2-4 giây, nếu nhanh hơn nữa thì quá tốt, mình chỉ để con số có thể mà thôi.
Và Phúc chia sẻ cho các bạn “cách tăng tốc cho website nhanh nhất” mà mình đã thực hiện thành công, cải thiện tốc độ loading website của mình từ hơn 5 giây xuống dưới con số này. Nói thế không phải lúc nào bạn truy cập website cũng load nhanh cả vì nó còn phụ thuộc vào nhiều vấn đề khác như đường truyền internet, tốc độ hosting, hình ảnh, nội dung ….Mình chỉ nói về các vấn đề đơn giản nhất nhưng hiệu quả để đảm bảo rằng trang web của bạn chạy nhanh. Bạn có thể click vào từng hạng mục để đọc bài viết và kiểm tra ý kiến của người dùng.
>>>> CÓ THỂ BẠN QUAN TÂM: Cách viết Status có nhiều người like trên mạng xã hội
Tối ưu hóa hình ảnh : Luôn luôn sử dụng “Save for web” tính năng có trên phần mềm chỉnh sửa hình ảnh photoshop. Hình ảnh đại diện cho bài viết hoặc trong nội dung bài viết làm cho trang web load chậm nhất mà hầu như trang web nào cũng gặp phải, bạn hãy tối ưu chúng thành size nhỏ nhất nhưng vẫn đảm bảo khung ảnh tốt nhất. Ngoài ra bạn cũng có thể dùng một số công cụ chỉnh sửa size ảnh trực tuyến.
Định dạng hình ảnh : Ở trên là bạn chỉnh sửa size ảnh, tức là làm cho kích thước size nhỏ lại, thì bây giờ bạn sẽ chọn định dạng phù hợp để tối ưu cho website của bạn chạy nhanh. Theo cá nhân tôi thì định dạng file ảnh có đuôi .JPEG là phù hợp nhất, nhẹ nhưng vẫn đảm bảo màu sắc của file ảnh, định dạng GIF thì nên dùng cho các Icon, còn .PNG thì cũng giống như GIF nhưng nó hỗ trợ nhiều màu sắc và độ net cao hơn.
>>>> CÓ GIÚP ÍCH CHO BẠN KHÔNG? Những sai lầm mà bạn cần nên tránh khi thiết kế website
Tối ưu hóa CSS : Hiện nay hầu hết các website điều được thiết kế với CSS. Hãy chắc chắn rằng để tổng hợp và làm sạch CSS của bạn. CleanCSS là một ứng dụng trực tuyến mà sẽ hợp nhất các liên kết trong code, loại bỏ tính thừa thải và loại bỏ các khoảng trắng từ đoạn code trong website của bạn.
VD:
Ban đầu
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
Thay vào đó
margin: 10px 20px 10px 20px;
Ban đầu
<P class = “decorated”> Một đoạn văn bản được viết </ p>
<p class = “decorated”> đoạn thứ hai </ p>
<p class = “decorated”> đoạn thứ ba </ p>
<p class = ” decorated “> đoạn thứ 4 </ p>
Thay vào đó
<Div class = “decorated”>
<p> Một đoạn văn bản được viết </ p>
<p> đoạn thứ hai </ p>
<p> đoạn thứ ba </ p>
<p> đoạn thứ 4 </ p>
</ div >
Sử dụng một dấu (/) khi liên kết link: Một khi bạn mở một link liên kết cho một từ khóa trên trang web của bạn “http://websitequangngai.com/ve-toi” thì lúc đó máy chủ sẽ cần phải tìm những loại tập tin hoặc trang được chứa địa chỉ liên kết đó. Nếu bạn cho thêm vào phía sau dấu gạch chéo (/) thì máy chủ sẽ biết đây là một thư mục, như thế nó sẽ làm giảm tải cho website của bạn
VD: http://websitequangngai.com/ve-toi/
Sử dụng chiều cao và rộng cho ảnh : Nhiều người quên để thêm chiều cao và rộng trên mã thẻ hình ảnh. Những thẻ này sẽ đảm bảo rằng trình duyệt biết kích thước của hình ảnh trước khi tải nó. Kết quả là nó sẽ đặt chỗ cho các hình ảnh trong khi tải các phần còn lại của trang web, làm cho website load nhanh hơn.
VD: <img id=”Phuc” height=”200″ width=”450″ src=”http://www.phucboss.com/phuc.png” alt=”Phuc Boss” />
Giảm yêu cầu HTTP : Khi bạn truy cập một website thì từ hình ảnh, nội dung …. nó sẽ chạy đến máy chủ và quay ngược lại cho người xem đọc, nhìn thấy được nó. Không nhiều nhưng sẽ mất vài giây cho tốt độ load website. Bạn hãy tối ưu hóa nó bằng cách kết hợp giữa những tập tin css và scripts lại với nhau.
VD:
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
Bạn nên sử dụng duy nhất một liên kết: <link rel=”stylesheet” type=”text/css” href=”/style.css” />
Phúc hy vọng với một chút kiến thức nhỏ nhoi này sẽ giúp các bạn tối ưu hóa cho website của mình load nhanh hơn, người dùng sẽ truy cập nhiều đến website của bạn nhiều hơn. Ngoài ra nó còn giúp website của bạn SEO tốt hơn nữa đấy. Không tin cứ thử. Phúc chúc các bạn thành công hơn nữa trong cuộc sống vào công việc. Share giúp mình.
CUỐI CÙNG: 3 Công cụ kiểm tra tốc độ website mà bạn nên thử
1. Google PageSpeed Insights
2. Pingdom Website Speed Test
3. GTmetrix Website Speed And Performance Optimization