Kỹ thuật tăng tốc độ tải trang cho Blogger

Tốc độ tải trang là thời gian tải một trang web cho một lần xem trang hoặc bài viết cụ thể nào đó.
Thời gian tải trang thường được tính bằng thời gian hiển thị đầy đủ nội dung của trang, bài viết trên trang web đó hoặc là thời gian để trình duyệt của bạn nhận được byte đầu tiên từ máy chủ web.


Đối với người dùng tốc độ tải trang rất quan trọng. không biết mọi người thế nào nhưng riêng mình không hề có chút ấn tượng nào đối với những website chưa được tối ưu về tốc độ và có sự chậm trễ. nhất là khi sử dụng các thiết bị di dộng nếu thời gian tải trang trên 8 giây người dùng sẽ chỉ dùng 1% thời gian để sem .Còn đối với các công cụ tìm kiếm tốc độ tải trang dưới 3 giây sẽ được sếp hạng cao hơn trong tìm kiếm.

Đầu tiên các bạn vào https://tools.pingdom.com  dán url web của bạn  rồi Start test để kiểm tra sem thời gian tải trang .Mình cũng vừa Test thử -  Thời gian tải khi mình chưa áp dụng kỹ thuật nào là 2,32 giây tải trang với kích thước 1,2MB

Dưới đây mình sẽ liệt kê một số kỹ thuật giúp tăng tốc độ tải trang có thể lên đến 70% nếu như bạn kiên nhẫn thử lần lượt từng kỹ thuật sem đâu là phù hợp và tối ưu nhất đối với từng mẫu Themes mà bạn đang dùng .


1. Lazy Load

Lazy Load là một kỹ thuật được facebook áp dụng khá thành công và chỉ khi người dùng cuộn trang đến đâu ảnh và dòng thời gian mới tiếp tục tải về .Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không phải tải đối tượng không cần thiết.

Lợi ích của Lazy Load là giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng.

Để sử dụng thủ thuật này bạn cần đăng nhập vào blooger theo địa chỉ https://www.blogger.com
ở menu phía bên tay trái chọn phần Chủ đề  tiếp theo ta chọn Chỉnh sửa HTML

Copy và dán đoạn code bên dưới vào trước thẻ </head>
 thay   https://3.bp.blogspot.com/-iC75xsAPBKA/WmMgYgCenhI/AAAAAAAADhs/6gqKqb2JE_476iFFBC1SCbwNEXrV1CyLQCLcBGAs/s320/load-nguoi-phothi.gif   thành đường link ảnh xẽ suất hiện khi đang trong quá trình tải dữ liệu.


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
<!-- Lazy load -->
<script type='text/javascript'>
//<![CDATA[
(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };             
        if(options) {
            $.extend(settings, options);
        }
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
             
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }     
        this.each(function() {
            var self = this;         
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));   
            }

            if ("scroll" != settings.event ||
                    undefined == $(self).attr("src") ||
                    settings.placeholder == $(self).attr("src") ||
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) ||
                     $.belowthefold(self, settings) ||
                     $.rightoffold(self, settings) )) {
                     
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);   
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }         
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                       .attr("src", $(self).attr("original"));
                };
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });     
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event); 
        return this;
    };
    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    }; 
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };     
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    }; 
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */
    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
 
})(jQuery);
//]]>
</script>
<script type="text/javascript" charset="utf-8">
   $(function() {     

    $("img") // img là áp dụng với cả blog. Nếu chỉ muốn áp dụng cho một class nào đó thì thêm class đó vào trước img. Ví dụ: .post img, #content img, .comments img,…

.lazyload({
    placeholder : "https://3.bp.blogspot.com/-iC75xsAPBKA/WmMgYgCenhI/AAAAAAAADhs/6gqKqb2JE_476iFFBC1SCbwNEXrV1CyLQCLcBGAs/s320/load-nguoi-phothi.gif", /*Hình thay thế khi ảnh chưa load xong*/
    effect: "fadeIn" /* Hiệu ứng mờ khi ảnh xuất hiện. Có thể sử dụng các hiệu ứng khác như: slideUp, slideDown,…*/

 });
});
</script>



2. DNS Prefetch
Là tính năng mà các trình duyệt chủ động tìm nạp trước cho các hạng mục tham chiếu bởi tài liệu, bao gồm hình ảnh, CSS, JavaScript,... quá trình này được thực hiện ở chế độ nền và thực hiện trước khi người dùng nhấn chuật vào liên kết nên mức độ chậm trễ giảm đáng kể .

Để áp dụng kỹ thuật  DNS Prefetch cho blogspot bạn vào phần Chỉnh sửa HTML sau đó dán đoạn code sau dưới thẻ  <head>  sau đó ta lưu lại và Test thử sem thời gian tải trang có giảm đáng kể hơn không nhé.

<!-- 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='//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='//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='//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='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<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='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<!-- End DNS Prefetch -->

Dưới là kết quả sau khi mình áp dụng  thời gian tải trang chỉ còn 1,04 giây thật bất ngờ phải không nào.




3. Imagesmaller

Tăng tốc độ trang web bằng cách nén tất cả các hình ảnh có định dạn PNG và JPEG Trước khi tải lên Hosting, hoặc trước khi bạn tải lên nơi mà bạn lưu trữ , Dịch vụ này có thể làm giảm kích thước tệp của hình ảnh mà không làm giảm chất lượng hình ảnh. Hình ảnh PNG được nén duy trì độ trong suốt và ảnh JPEG \ JPG được nén bằng cách sử dụng yếu tố chất lượng hình ảnh là 75. Có thể giảm kích thước xuống khoảng 80% so với ảnh gốc mà chỉ cần một vài thao tác đơn giản và hoàn toàn miễn phí 

Để thực hiện việc này ta truy cập http://www.imagesmaller.com  ta bấm vào Browse... và chọ ảnh bạn cần nén ... tiếp theo ta Upload File
Và bước cuối cùng là bấm vào  Download File như hình dưới, quá nhanh phải không nào chỉ cần vài thao tác trực tuyến ta đã giảm kích thước tệp hình ảnh lên đến 80% so với kích thước ban đầu.

Chúc các bạn thành công - Lưu ý bài viết này đang được cập nhật hãy lưu lại URL của bài viết này để biết thêm một số kỹ thuật khác nữa.

Đăng nhận xét

0 Nhận xét