Tối ưu trang tải nhanh khi tải URL nguồn cấp
Tối ưu blog tải nhanh là sở thích hàng đầu của mình khi thiết kế blogspot, kinh nghiệm thiết kế lâu năm cho thấy trang mà có URL tải nguồn cấp feed lấy dữ liệu thì chắc chắn 100% trang sẽ tải chậm vì phải đợi tải URL feed.
Thời gian tải trang càng lâu còn phụ thuộc vào thời gian tải URL feed cụ thể là phụ thuộc vào tham số của URL feeds. Các tham số trong URL feed cần quan tâm là default (đầy đủ), summary (tóm tắt) và max-results (số bài đăng), trong đó tham số default lại phụ thuộc vào cài đặt cho phép nguồn cấp dữ liệu blog, nếu bạn cài đặt cho phép nguồn cấp Đầy đủ để cung cấp toàn bộ nội dung bài đăng của bạn., chọn Cho đến dấu ngắt để hiển thị tất cả nội dung bài đăng trước dấu nhảy ngắt đoạn và chọn Ngắn để cung cấp khoảng 400 ký tự đầu tiên.
Có hai kiểu URL nguồn cấp để lấy dữ liệu bài đăng: sử dụng URL blog hoặc sử dụng ID của blog
Sử dụng URL blog
/feeds/posts/summary
Sử dụng ID blog
https://www.blogger.com/feeds/blogID/posts/summary
Hoặc
https://draft.blogger.com/feeds/blogID/posts/default
https://draft.blogger.com/feeds/blogID/posts/summary
Giới hạn số bài đăng cho kiểu URL feed cũng khác nhau nếu tải bằng URL blog thì tham số max-results tối đa bằng 150 nhưng nếu tải bằng ID blog thì con số tối đa max-results=500. Nếu bạn không sử dụng tham số max-results trong URL nguồn cấp thì mặc định số bài đăng bằng 25.
Trên đây là một số thông tin cơ bản về URL nguồn cấp blog mà bạn cần phải nắm để biết được thời gian tải nó lâu đến chừng nào. Bạn cứ thí nghiệm cài đặt nguồn cấp blog đầy đủ sau đó tải trực tiếp bằng ID blog với số bài đăng tối đa max-results=500 với trường hợp blog bạn có hơn 500 bài đăng để xem kết quả nhé.
Tham khảo thêm: Các phương pháp tải feeds hiệu quả làm tăng tốc độ tải trang
Phương pháp truyền thống lấy dữ liệu bài đăng từ URL nguồn cấp
Cách làm truyền thống của đa số blog sẽ như thế này
Đặt script lấy dữ liệu trước thẻ </head> và sau đó đặt URL nguồn cấp trong thẻ script vào vị trí muốn hiển thị dữ liệu
<script>//<![CDATA[
function get_data(e) {
var contents=''
document.write(contents)
}
//]]></script>
</head>
<body>
<script src='/feeds/posts/default?alt=json-in-script&max-results=8&callback=get_data'/>
</body>
Với phương pháp này bạn không thể trì hoãn tải URL feed mà phải để URL feed tải ngay khi trang tải. Nếu là blog tin tức tải nhiều URL feed cùng lúc thì thời gian tải trang lại càng lâu.
Phương pháp mới lấy dữ liệu bài đăng từ URL nguồn cấp
Phương pháp mới mà mình tạo ra giúp trì hoãn được tải URL nguồn cấp ngay khi trang tải mà đợi cho trang tải xong mới tải URL nguồn cấp, đặc biệt bạn có thể cài đặt được kiểu hiển thị dữ liệu:
- recent posts: hiển thị các bài đăng mới nhất
- recent posts with label: hiển thị các bài đăng mới nhất theo Nhãn
- random posts: hiển thị các bài đăng ngẫu nhiên
- related posts: hiển thị các bài đăng ngẫu nhiên theo Nhãn (áp dụng cho trang bài viết)
Cách thực hiện
Đầu tiên bạn sẽ đặt script trước thẻ đóng </body>
<script>//<![CDATA[
window.addEventListener('load', function() {
var _feeds = 0
function _cate() {
if (_feeds == 0) {
_feeds = 1
var cate = $('.feed-entry')
if (cate.length != '') {
$(cate).each(function(i) {
var r = Number($(cate[i]).attr('data-item')),
cate_type=$(cate[i]).attr('data-type')
if ($(cate[i])[0].hasAttribute('data-category')) var cate_name = $(cate[i]).attr('data-category')
if (cate_type == 'recent posts') var cate_url = '/feeds/posts/default'
else if (cate_type == 'label posts') cate_url = '/feeds/posts/default/-/' + cate_name
else if (cate_type == 'random posts') cate_url = '/feeds/posts/summary?alt=json-in-script&max-results=0'
else if (cate_type == 'related posts') cate_url = '/feeds/posts/summary/-/' + cate_name + '?alt=json-in-script&max-results=0'
function get_data(e) { // Tạo dữ liệu bài đăng nguồn cấp
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
if (cate_type == 'random posts') {
$.get(cate_url, function(data) {
if (data.feed) {
var a = data.feed.openSearch$totalResults.$t
if (a < r) r = a
let arr = []
do {
let num = Math.floor(Math.random() * a)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(m) {
m += 1
$.ajax({
type: 'GET',
url: '/feeds/posts/default',
data: {'alt': 'json','start-index': m,'max-results': 1},
dataType: 'jsonp',
success: get_data
})
})
}
}, 'jsonp')
} else if (cate_type == 'related posts') {
$.get(cate_url, function(data) {
if (data.feed) {
var a = data.feed.openSearch$totalResults.$t
if (a < r) r = a
let arr = []
do {
let num = Math.floor(Math.random() * a)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(m) {
m += 1
$.ajax({
type: 'GET',
url: '/feeds/posts/default/-/' + cate_name,
data: {'alt': 'json','start-index': m,'max-results': 1},
dataType: 'jsonp',
success: get_data
})
})
}
}, 'jsonp')
} else {
$.ajax({
type: 'GET',
url: cate_url,
data: {'alt': 'json','max-results': r},
dataType: 'jsonp',
success: get_data
})
}
})
}
}
}
window.addEventListener('scroll', function() {_cate()})
window.addEventListener('mousemove', function() {_cate()})
setTimeout(function() {_cate()}, 1000)
})
//]]></script>
Tham khảo thêm: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Mô tả
- Đoạn script sẽ thực thi sau 1 giây sau khi trang tải xong nếu không tác động scroll hoặc hover
- Tìm tất cả các element chính có class='feed-entry' trong widget để tạo vòng lặp cho element
- Từ mỗi element class='feed-entry' lấy dữ liệu: tên Nhãn, kiểu hiển thị, số bài đăng
- Căn cứ vào dữ liệu tên Nhãn, kiểu hiển thị, số bài đăng của mỗi element get URL feed tạo và hiển thị dữ liệu trong element đó.
Trong đó hàm function trong đoạn script trên:
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
chính là hàm function theo cách truyền thống đặt trước </head> nhưng bạn sẽ thay JavaScrip document.write() bằng Jquery append()
Tiếp theo bạn sẽ định cấu hình widget hiển thị bài đăng.
Tiện ích HTML/JavaScript, bạn sửa lại nội dung mặc định trong thẻ <b:includable id='main'> của tiện ích thêm mới các thẻ <b:attr> bên trong
Tham khảo thêm: Cách sử dụng thẻ b:attr và b:class trong blogspot
Tiện ích HTML/JavaScript hiển thị các bài đăng mới nhất
<b:attr name='class' value='widget HTML feed-entry'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='recent posts'/>
<b:include name='widget-title'/>
<div class='widget-content'>
<!-- hiển thị các bài đăng mới nhất -->
</div>
</b:includable>
Tiện ích HTML/JavaScript hiển thị các bài đăng mới nhất theo Nhãn
<b:attr name='class' value='widget HTML feed-entry'/>
<b:attr name='data-category' value='tên Nhãn'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='label posts'/>
<b:include name='widget-title'/>
<div class='widget-content'>
<!-- hiển thị các bài đăng mới nhất theo Nhãn -->
</div>
</b:includable>
Tiện ích HTML/JavaScript hiển thị các bài đăng ngẫu nhiên
<b:attr name='class' value='widget HTML feed-entry'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='random posts'/>
<b:include name='widget-title'/>
<div class='widget-content'>
<!-- hiển thị các bài đăng ngẫu nhiên -->
</div>
</b:includable>
Hình minh họa
 |
| Hiển thị 8 bài đăng mới nhất theo Nhãn tại trang chủ |
Tại trang bài viết trong tiện ích Blog1, bạn sửa lại nội dung mặc định trong thẻ <b:includable id='main'> đầu trang của tiện ích thêm mới các thẻ <b:attr> bên trong
<b:if cond='data:view.isPost'>
<b:attr name='class' value='widget Blog feed-entry'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='related posts'/>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels.length - 1' var='label'>
<b:attr expr:value='data:post.labels[label].name' name='data-category'/>
</b:loop>
</b:loop>
</b:if>
</b:includable>
Hình minh họa
 |
| Hiển thị 4 bài đăng liên quan bên dưới nội dung bài viết |
Tham khảo thêm: Điều kiện và các tùy chọn hiển thị Label bài viết trong vòng lặp
Tiếp theo bạn sẽ sửa lại vị trí hiển thị các bài đăng liên quan thành
<div class='widget-content'>
<!-- hiển thị các bài đăng liên quan -->
</div>
</div>
Một điều bạn cần lưu ý: Bạn có thể hoặc không cài đặt hiển thị các tiện ích và các kiểu hiển thị dữ liệu bài đăng trong tiện ích. Để lại thắc mắc nếu bạn đọc không hiểu đoạn nào hoặc có yêu cầu gì thêm, mình sẽ hỗ trợ bạn.