Sử dụng DNS Prefetch để tăng tốc độ tải trang Blogger - Blogspot


Hôm nay, Vi-et Spaces chia sẻ đến các bạn một thủ thuật khá mới để 
tăng tốc độ tải trang Blogger - Blogspot bằng cách sử dụng DNS Prefetch và Preconnect.

DNS Prefetch và Preconnect là gì?

Trước tiên, chúng ta hãy cùng tìm hiểu xem hai khái niệm này nghĩa là gì nhé.

DNS Prefetch

DNS Prefetch nghĩa là nạp trước DNS, nó giúp phân giải địa chỉ IP của các tên miền trước, nhờ vào đó chúng ta có thể tăng tốc độ tải trang khi trang này sử dụng nhiều dữ liệu từ các tên miền khác website.

Preconnect

Nhân tố này sẽ cho phép trình duyệt bạn đang sử dụng thiết lập kết nối sớm hơn trước khi gửi yêu cầu về máy chủ, từ đó sẽ giúp tăng tốc độ tải ban đầu khi truy cập vào website.

Bạn có thể hiểu nôm na là DNS Prefetch có thể tải trước các tài nguyên Image, JavaScript, CSS - tương tự như bộ nhớ đệm - để sử dụng cho website của mình. Bằng cách này chúng ta sẽ tiết kiệm được thời gian khi tải các đường dẫn bên ngoài rất nhiều so với trước kia.

LÀM THẾ NÀO ĐỂ THÊM DNS-PREFETCH và PRECONNECT VÀO BLOGGER

Bước 1: Đăng nhập vào tài khoản Blogger của bạn.
Bước 2: Chọn Theme ➔ Edit HTML
Bước 3: Nhấp chuột vào vùng bất kỳ trong code.
Bước 4: Nhấn tổ hợp phím Ctrl + F để tìm thẻ <head>
Bước 5: Dán đoạn code này bên dưới thẻ <head>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
Bước 6: Nhấn vào Save template.

Vậy là xong rồi đấy, giờ bạn có thể thấy website của bạn tải nhanh hơn trước rất nhiều phải không nào. Chúc bạn thành công.

Post a Comment

Mới hơn Cũ hơn