Bài viết sẽ liên quan đến nhiều về ngôn ngữ web, code nên có thể gây khó hiểu cho bạn đọc.
Trước khi vào phần nội chúng về tối ưu tốc độ, ta sẽ đi đến cơ chế hoạt động của trình duyệt.
Khi trình duyệt (Browser) được người dùng (User) truy cập đến 1 domain hoặc url ngay lập tức sẽ theo đường địa chỉ IP ra lệnh cho Server/hosting/VPS trả về dữ liệu là các code web / requests / nội dung hình ảnh.... cho truy cập đó và trả lại cho trình duyệt đọc code, phân giải và hiển thị trên trình duyệt web mà ta gọi là trang web.
=> Do vậy tốc độ tải website phụ thuộc vào đường truyền mạng, trình duyệt, máy tính, tốc độ hồi đáp server, bộ nhớ cache...vv // rất nhiều yếu tố khác.
Sau khi đã hiểu so bộ qua về tốc độ tải website ta đi thẳng vào phần hoạt động và tối ưu cơ bản cho website
I. Tối ưu tốc độ website với PageSpeed Insights
 |
| PageSpeed Insights |
Có thể 3 yếu tố cơ bản nhất để có được điểm cao trên PageSpeed Insights là
(1) Tối ưu hình ảnh (Nén ảnh).
(1) Tối ưu hình ảnh (Nén ảnh).
(2) Chuyển bớt Javascript về cuối trang, không nên để javascript quá cao trong code để ưu tiên tải HTML trước. Đặc biệt để tối ưu lên được 5-10 điểm thì trong màn hình đầu tiên nên không chứa Javascript.
(3) Và nâng cao Cache, tức là lưu những thành phần quan trọng, ít sửa đổi lưu trong cache trình duyệt để gọi dữ liệu lại.
Nhắc thêm: Về cái phần tối ưu màn hình đầu tiên do bác nào để bài viết lên cao mà có dùng javascript điểm PageSpeed Insights sẽ bị giảm đi 5-10 điểm. Giải pháp có thể là các bác chèn 1 hình ảnh dưới menu vào giữa để đẩy đoạn javascript đó xuống để khỏi load tại màn hình đầu tiên => Phần này là để làm điểm PageSpeed Insights nó đẹp lên thôi
Nhắc thêm: Về cái phần tối ưu màn hình đầu tiên do bác nào để bài viết lên cao mà có dùng javascript điểm PageSpeed Insights sẽ bị giảm đi 5-10 điểm. Giải pháp có thể là các bác chèn 1 hình ảnh dưới menu vào giữa để đẩy đoạn javascript đó xuống để khỏi load tại màn hình đầu tiên => Phần này là để làm điểm PageSpeed Insights nó đẹp lên thôi
Có thể thấy trang web của mình toilaquantri.com chịu rất nhiều requests, hình ảnh, quảng cáo Google Adsense, code Google analytics, code remarketing nhưng vẫn đảm bảo PageSpeed Insights.
Nếu mình loại bỏ bớt những cái này điểm có thể lên 90-94
Chúng ta sẽ có 1 số công cụ để làm việc này:
1. Dời các đoạn code <script> hoặc file .js về trên </body>. Chọn tải không đồng độ các file .js này để ưu tiên HTML.
Mời các bài xem bài viết này: Tối ưu Javascript, CSS
2. Dùng PluginLazy Load image hoặc code để tạm hoảng tải hình ảnh
3. Nén ảnh trước khi upload, lưu ảnh về định dạng .jpg không lưu định dạng .png
Công cụ nén ảnh ưu thích: https://compressnow.com.
Up ảnh có width vừa với phần nội dung không nên quá lớn
VD: Phần độ rộng của bài viết chỉ có Width=640px thì không nên up ảnh có độ rộng cao hơn như 1600x1200 chẳng hạn mà hãy nén lại trước khi up.
Bạn cũng có thể sử dụng công nghệ mã hóa Base64 đối với các hình ảnh ít thường xuyên thay đổi như logo chẳng hạn.
Bạn cũng lưu ý kích thước chuẩn để khi share lên Facebook sao cho nó hiển thị hợp lí nhất
Code Lazy Load Image
Đối với Website/Blogger bạn có thể dùng code Lazy Load Image bên dưới, chèn trên </body>
Còn với Wordpress thì đã có plugin rồi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
// Sticky Sidebar Decoded and lazy load
!function(i){i.fn.theiaStickySidebar=function(t){function e(t,e){var a=o(t,e);a||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).on("scroll."+t.namespace,function(t,e){return function(a){var n=o(t,e);n&&i(this).unbind(a)}}(t,e)),i(window).on("resize."+t.namespace,function(t,e){return function(a){var n=o(t,e);n&&i(this).unbind(a)}}(t,e)))}function o(t,e){return t.initialized===!0||!(i("body").width()<t.minWidth)&&(a(t,e),!0)}function a(t,e){t.initialized=!0;var o=i("#theia-sticky-sidebar-stylesheet-"+t.namespace);0===o.length&&i("head").append(i('<style id="theia-sticky-sidebar-stylesheet-'+t.namespace+'">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),e.each(function(){function e(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:"",transform:"none"})}function o(t){var e=t.height();return t.children().each(function(){e=Math.max(e,i(this).height())}),e}var a={};if(a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.length&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:a.options.defaultPosition,overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length){var s=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;a.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(s)}).remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)}a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var r=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),r-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-r,0==r?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,e(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void e();if(a.options.disableOnResponsiveLayouts){var s=a.sidebar.outerWidth("none"==a.sidebar.css("float"));if(s+50>a.container.width())return void e()}var r=i(document).scrollTop(),d="static";if(r>=a.sidebar.offset().top+(a.paddingTop-a.options.additionalMarginTop)){var c,p=a.paddingTop+t.additionalMarginTop,b=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,l=a.sidebar.offset().top,f=a.sidebar.offset().top+o(a.container),h=0+t.additionalMarginTop,g=a.stickySidebar.outerHeight()+p+b<i(window).height();c=g?h+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var u=l-r+a.paddingTop,S=f-r-a.paddingBottom-a.marginBottom,y=a.stickySidebar.offset().top-r,m=a.previousScrollTop-r;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(y+=m),"stick-to-top"==a.options.sidebarBehavior&&(y=t.additionalMarginTop),"stick-to-bottom"==a.options.sidebarBehavior&&(y=c-a.stickySidebar.outerHeight()),y=m>0?Math.min(y,h):Math.max(y,c-a.stickySidebar.outerHeight()),y=Math.max(y,u),y=Math.min(y,S-a.stickySidebar.outerHeight());var k=a.container.height()==a.stickySidebar.outerHeight();d=(k||y!=h)&&(k||y!=c-a.stickySidebar.outerHeight())?r+y-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d){var v=i(document).scrollLeft();a.stickySidebar.css({position:"fixed",width:n(a.stickySidebar)+"px",transform:"translateY("+y+"px)",left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))-v+"px",top:"0px"})}else if("absolute"==d){var x={};"absolute"!=a.stickySidebar.css("position")&&(x.position="absolute",x.transform="translateY("+(r+y-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom)+"px)",x.top="0px"),x.width=n(a.stickySidebar)+"px",x.left="",a.stickySidebar.css(x)}else"static"==d&&e();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=r}},a.onScroll(a),i(document).on("scroll."+a.options.namespace,function(i){return function(){i.onScroll(i)}}(a)),i(window).on("resize."+a.options.namespace,function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a)),"undefined"!=typeof ResizeSensor&&new ResizeSensor(a.stickySidebar[0],function(i){return function(){i.onScroll(i)}}(a))})}function n(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return"undefined"==typeof t&&(t=i.width()),t}var s={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern",defaultPosition:"relative",namespace:"TSS"};return t=i.extend(s,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,e(t,this),this}}(jQuery);(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img:not(#sidebar-outer img)").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltYcif3Hr4W58Aac13gE5rwvca_1Q1xRZp1frRMzE6wSASVr_Bxwbk7cVS_XI0Ko3W2OvEtze10oMg3QZs03FXymyT_3XXJCiCMQcpnaFIPv0r-MsHzGAgp6XZFIkGdiYTZAUV6UNzMJF/s1600/Loading_icon.gif",effect:"fadeIn",threshold:"-100"})});
//]]>
</script>
Sau khi làm được điều này thì điểm PageSpeed Insights sẽ tăng đáng kể tuy nhiên tốc độ tải website chưa trách sẽ nhanh.
Về phần nâng cao Cache trình duyệt thì đã có rất nhiều hướng dẫn trên mạng cho các mã nguồn. Trong đó với wordpress bạn có thể dùng plugin Supper Cache, thiết lập để cho nó lưu cache và lazy load ảnh. Với Blogger thì hơi bất tiện với phần này
II. Kiểm tra tốc độ tải Website với Tools Pingdom
Truy cập https://tools.pingdom.com
Kéo xuống phí dưới 1 chút tới phần File requests bạn sẽ chọn Size để sắp xếp dung lượng các request có size từ cao tới thấp sau đó tiến hành tối ưu từng request nếu có thể.
Càng ít request thì website càng load nhanh, tối ưu code web cho thật gọn gàng vào. Lưu ý các request có thời gian tải quá lâu, nếu cần thiết thì xóa bỏ nó luôn.
Xóa bỏ các requests lạ hoặc chưa dùng đến hoặc các requests chưa tối ưu để tìm các tiện ích khác thay thế.
III. Cuối cùng là test lại bằng Google Chrome hoặc Cốc Cốc
Nhấn F12 trang Web và chuyển sang tab Network
Tải lại trang bằng Ctrl + F5 (Không được nhấn F5)
Phân tích:
Phân tích các requests có dung lượng lớn và tải lâu để xóa bớt hoặc tối ưu lại nhất là của các bên thứ 3 cung cấp
Một số request phổ biến mà mình đã tối ưu:
1. Font Google Roboto
2. Bootstrap
3. Fontawesome (dùng làm các icon trong web)
Bạn xóa tất cả 3 thành phần đó trong website và chèn đoạn code bên dưới vào sau thẻ <head>
<script async='async' type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic");loadCSS("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css")
//]]>
</script>
Tùy tình trạng từng website mà có cách tối ưu cụ thể hơn. Nếu có thắc mắc nào về website của bạn hãy comment link website của bạn bên dưới mình sẽ hỗ trợ bạn tối ưu website của mình.
Chúc bạn thành công!
Theo: Toilaquantri.com
[/tintuc]
