> Platform : Blogger >> Category : Magazine >> Homepage : https://squeeze-template.blogspot.com >> Version : 1.0.0 >> License : Free =========================================================== */ /* ==================== >> TABLE OF CONTENTS : ======================= 🔹 Variables 🔹 Normalize 🔹 Spinner 🔹 Fonts 🔹 OwlCarousel 🔹 Main 🔹 Widths 🔹 Framework 🔹 Header 🔹 Intro 🔹 Sidebar 🔹 Footer 🔹 Widgets 🔹 Pages (Common) 🔹 Homepage 🔹 Post Page 🔹 Error Page 🔹 Redirect Page 🔹 Archive Page 🔹 Authors Page 🔹 Shortcodes 🔹 Responsive */ /*================= 🔹 Variables ===================*/ /**/ /*================= 🔹 Normalize ===================*/ html{font-family:serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a:focus,a:active{outline:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{max-width:100%;border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:serif;font-size:100%;line-height:1.15;margin:0}button,input{outline:none!important;overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}iframe{border:none} *,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} /*================= 🔹 Fonts ===================*/ @font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIkTpu0xg.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIvTpu0xg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIhTps.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6O59ZMaA.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6F59ZMaA.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6L59Y.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /*================= 🔹 Main ===================*/ body{font-family:'Cairo',serif;font-size:14px;line-height:1.5em} body::-webkit-scrollbar{background-color:$(main.back);width:10px} body::-webkit-scrollbar-thumb{background:$(keycolor)} body::-moz-selection{background:$(keycolor);color:#FFF} body[data-boxed='true'] .main-container{max-width:$(content.width)} ::-moz-selection{background:$(keycolor);color:#FFF} ::selection{background:$(keycolor);color:#FFF} ul{list-style:none;padding:0;margin:0} p{line-height:2;font-size:12px;text-align:justify} a{text-decoration:none;color:inherit} .main-container{width:100%;margin:0 auto;background-color:$(main.back);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-moz-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .main-container:before,.main-container:after{content:'';display:block;height:3px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} .middle-content{overflow:hidden} .main-wrap{padding:0 $(main.padding)} #RecentPosts{margin-bottom:$(main.margin)} .side-$startSide{margin-bottom:$(main.margin)} body.no-sidebar .side-$startSide{float:none;width:100%} body.no-sidebar aside{display:none} .tempscheme{border-color:$(keycolor) $(footer.line) $(step.color) $(footer.text);float:$startSide;text-align:$endSide;color:$(keycolor);background-color:$(step.color)} /*================= 🔹 Widths ===================*/ .side-$startSide{width:-webkit-calc(100% - $(sidebar.width) - 2%);width:-moz-calc(100% - $(sidebar.width) - 2%);width:calc(100% - $(sidebar.width) - 2%);float:$startSide} aside{float:$endSide;width:$(sidebar.width)} .wrapper{max-width:$(content.width);margin:0 auto} header .color-wrap{background-color:$(menu.back)} #footer .color-wrap{position:relative;background-color:rgba(0,0,0,0.1)} /*================= 🔹 Framework ===================*/ /* ------- Quickedit ------ */ .quickedit:after{content:'\f0ad';position:absolute;font-family:fontawesome;color:#666;top:100%;$endSide:0;font-size:18px;z-index:5;opacity:.8} .quickedit:hover:after{-webkit-animation:quickedit .3s ease-in-out;-moz-animation:quickedit .3s ease-in-out;-o-animation:quickedit .3s ease-in-out;animation:quickedit .3s ease-in-out;opacity:1} @-webkit-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} } @-moz-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} } @-o-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } @keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } /* ------- Headlines ------ */ .headline{margin-bottom:15px;border-bottom:2px solid $(main.line)} .main-wrap aside .headline{margin-bottom:15px;border-bottom:2px solid $(aside.line)} #footer .headline{margin-bottom:15px;border-bottom:2px solid $(footer.line)} #LinkList303 .headline h6{margin-top:0} .headline h6{display:inline-block;margin:0 0 12px;font-size:17px;position:relative} .main-wrap .headline h6{color:$(main.title)} .main-wrap aside .headline h6{color:$(aside.title)} #footer .headline h6{color:$(footer.title)} .headline h6:after{content:"";height:2px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:33px;$endSide:0;$startSide:0;bottom:0} .headline a{color:$(main.text);float:$endSide;padding:5px 12px;font-size:12px;background-color:$(main.line);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;line-height:18px} /* ------ Read More ------ */ .read-more{display:inline-block;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:5px 15px;font-size:14px;font-weight:700;color:$(grad.color);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .read-more:hover{padding:5px 25px} /* ------ Post Share ------ */ .post-share{float:$endSide} .post-share .share-icon{z-index:1;float:$endSide;width:31px;height:31px;line-height:31px;text-align:center;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:16px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:relative} .post-share .share-icon:after{opacity:0;content:"";font-family:FontAwesome;border-width:5px;border-style:solid;position:absolute;top:11px;$endSide:100%} [dir='rtl'] .post-share .share-icon:after{border-color:transparent transparent transparent $(keycolor)} [dir='ltr'] .post-share .share-icon:after{border-color:transparent $(keycolor) transparent transparent} .post-share .share-icon.arrow:after{opacity:1} .post-share .share-menu{visibility:hidden;float:$endSide;margin-top:1px;margin-bottom:0;margin-$endSide:5px} .post-share .share-menu li{float:$endSide;opacity:0;margin-$endSide:5px} [dir='rtl'] .post-share .share-menu li{-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);-moz-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px)} [dir='ltr'] .post-share .share-menu li{-webkit-transform:translateX(30px);-ms-transform:translateX(30px);-moz-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)} .post-share .share-menu li i{width:27px;height:27px;line-height:27px;margin-top:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#FFF} .post-share .share-menu li .fa-facebook{background-color:#3b5998} .post-share .share-menu li .fa-twitter{background-color:#1da1f2} .post-share .share-menu li .fa-pinterest-p{background-color:#dd4b39} .share-open.share-menu{visibility:visible} [dir] .share-open.share-menu li{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)} .share-open.share-menu li:nth-of-type(1){-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .share-open.share-menu li:nth-of-type(2){-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear} .share-open.share-menu li:nth-of-type(3){-webkit-transition:.2s linear;-o-transition:.2s linear;-moz-transition:.2s linear;transition:.2s linear} /* ------ Image Wrap ------ */ .img-wrap{display:block;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;overflow:hidden;position:relative} .img-wrap:hover img{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .overlay{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:0;$endSide:0}{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:rgba(0,0,0,0.6);position:absolute;top:0;$endSide:0} .img-wrap:hover .overlay{opacity:.8} .details-on-img{position:absolute;top:0;$endSide:0;$startSide:0;bottom:0} .details-on-img .author-prof,.details-on-img .post-date{padding:0 4px;background:$(main.back);font-size:10px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;position:absolute;$startSide:-100%;z-index:2;-webkit-box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3);-moz-box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3);box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3)} .details-on-img .author-prof{color:$(keycolor)} .details-on-img .post-date{color:$(step.color)} .img-wrap .author-prof{top:30px;-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .img-wrap .post-date{top:55px;-webkit-transition:.6s linear;-o-transition:.6s linear;-moz-transition:.6s linear;transition:.6s linear} .img-wrap:hover .author-prof,.img-wrap:hover .post-date{$startSide:0} .img-wrap img{display:none;width:100%;height:100%} .details-on-img i{margin-$endSide:5px} .caption{padding:30px;background:-webkit-gradient(linear,$endSide top, $endSide bottom,from(transparent),color-stop(rgba(0,0,0,0.7)),to(#000));background:-webkit-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-o-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-moz-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:linear-gradient(transparent,rgba(0,0,0,0.7),#000);color:#FFF;position:absolute;bottom:0;$startSide:0;$endSide:0} aside .img-wrap:before,aside .img-wrap:after{display:none} /* ------ Social Colors ------ */ .social{font-size:0} .social li{display:inline-block;margin:0 2px} .social li i{color:#FFF;width:28px;height:28px;line-height:28px;margin-bottom:5px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;text-align:center;font-size:16px} .social-sites .social li:hover{-webkit-animation:SocIcons .2s ease-in-out;-moz-animation:SocIcons .2s ease-in-out;-o-animation:SocIcons .2s ease-in-out;animation:SocIcons .2s ease-in-out} @-webkit-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);transform:cale(1.5)} } @-moz-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:cale(1.5);transform:cale(1.5)} } @-o-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-o-transform:cale(1.5);transform:cale(1.5)} } @keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:cale(1.5);-o-transform:cale(1.5);transform:cale(1.5)} } .social .fa-facebook {background-color:#3b5998} .social .fa-twitter {background-color:#1da1f2} .social .fa-rss {background-color:#f26522} .social .fa-dribbble {background-color:#ea4c89} .social .fa-google-plus {background-color:#dd4b39} .social .fa-pinterest {background-color:#cc2127} .social .fa-linkedin {background-color:#0976b4} .social .fa-youtube {background-color:#e52d27} .social .fa-wordpress {background-color:#1081B1} .social .fa-digg {background-color:#476BA3} .social .fa-quora {background-color:#a82400} .social .fa-spotify {background-color:#1ed760} .social .fa-reddit {background-color:#ff4500} .social .fa-snapchat {background-color:#f5d602} .social .fa-drupal {background-color:#008BCA} .social .fa-github {background-color:#000000} .social .fa-flickr {background-color:#FF0084} .social .fa-tumblr {background-color:#304E6C} .social .fa-instagram {background-color:#7c38af;background: radial-gradient(circle at 0 130%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} .social .fa-delicious {background-color:#DEDEDF} .social .fa-behance {background-color:#009fff} .social .fa-soundcloud {background-color:#FF5419} .social .fa-telegram {background-color:#32AEE1} .social .fa-website {background-color:#444444} .social .fa-google-play {background-color:#3d9dab} .fa-google-play:before{content:'\f04b'} .fa-website:before{content:"\f0ac"} /* ------ Label-Title ------ */ .label-title{padding:0 8px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2} .img-wrap:hover .label-title{$startSide:-100%} .img-wrap .label-name{float:$startSide;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:2px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:12px;margin-bottom:5px;color:$(grad.color);position:relative;$startSide:0} .img-wrap:hover .label-name{$startSide:-100%} /* ------ Ribble Button ------ */ .ribble{position:relative;overflow:hidden} .ribble b{position:relative;z-index:1;-webkit-transition:.6s ease-in-out;-o-transition:.6s ease-in-out;-moz-transition:.6s ease-in-out;transition:.6s ease-in-out} .ribble:hover{padding:5px 20px} .ribble:hover b{color:$(grad.color)} .ribble:before{content:'';background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:100%;$startSide:-200%;height:200%;width:200%;display:block;z-index:1;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;transition:.5s ease-in-out} .ribble:hover:before{top:-25px;$startSide:-50px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Other ------ */ .blog-admin,#uds-searchControl,#ContactForm93{display:none} .clear-$endSide{display:block;height:1px;clear:$endSide} .clear{height:1px;clear:both;display:block} object{max-width:100%} .hide{display:none!important} :not(.notr),:not(.notr):before,:not(.notr):after{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out} .post-body #ContactForm93{display:block} div#Tempnec{display:none!important} /*================= 🔹 Header ===================*/ header #top-bar{padding:0 $(main.padding);height:40px;line-height:40px;color:#FFF;position:relative} #head-sec{padding:$(main.margin) $(main.padding);min-height:120px;overflow:hidden} /* ------ Header Social ------ */ header #top-bar #LinkList301{max-width:30%;margin-$endSide:15px;float:$startSide;position:relative;height:40px} #LinkList301 .social-sites{margin-top:5px} #LinkList301 .social-sites li{vertical-align:top} /* ------ Header Pages List ------ */ header #top-bar #PageList301{float:$startSide;max-width:-webkit-calc(70% - 60px);max-width:-moz-calc(70% - 60px);max-width:calc(70% - 60px);height:40px} header #top-bar .menu li{float:$startSide;margin:8px 0} header #top-bar .menu li a{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none;background:rgba(255,255,255,0.1);margin-$endSide:7px;font-size:12px;display:block;line-height:normal;padding:0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-weight:700;color:$(menu.text);line-height:2em} header #top-bar .menu li a:hover,header #top-bar .menu li.selected a{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} header #top-bar .menu-res{display:none} header #top-bar .menu-res i{display:block;width:30px;height:30px;line-height:30px;font-size:20px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));color:$(grad.color);text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:absolute;top:5px;$startSide:$(main.padding);z-index:2;cursor:pointer} nav.menu-res-wrap ul:before{content:"";border-width:8px;border-style:solid;border-color:transparent transparent $(menu.back);position:absolute;top:-14px;$startSide:10px;z-index:2} nav.menu-res-wrap ul{width:180px;top:50px;position:absolute;background-color:$(menu.back);$startSide:10px;padding:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;z-index:9999} nav.menu-res-wrap ul a{display:block;border-bottom:1px dotted rgba(255,255,255,0.2);color:$(menu.text);text-align:center} nav.menu-res-wrap ul li:last-of-type a{border-bottom:none} /* ------ Search Box ------ */ header #top-bar #HTML301{direction:ltr;min-width:200px;height:30px;position:absolute;$endSide:$(main.padding);top:0} header #top-bar .search form{direction:rtl;position:relative} header #top-bar .search form span{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));display:block;width:30px;height:30px;line-height:29px;font-size:18px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:absolute;top:5px;$endSide:0;z-index:2} header #top-bar .search form span.open-search:after{opacity:1;$endSide:100%} header #top-bar .search input{font-family:inherit;-webkit-border-radius:0 1px 1px 0;-moz-border-radius:0 1px 1px 0;border-radius:0 1px 1px 0;height:30px;margin:5px 0;background-color:$(menu.back);color:#FFF;font-size:12px;border:none;outline:none;position:absolute;$endSide:30px;width:0} header #top-bar .search .open-search ~ input{padding:0 15px;width:100%} /* ------ Logo & AD ------ */ #Header1{width:290px;float:$startSide} #Header1 .headone{font-weight:700;display:block;margin:0 0 10px;font-size:35px;line-height:1em;text-align:center} #Header1 p{margin:0;font-size:12px;text-align:center;line-height:1.5em} #Header1 img{width:auto;max-width:100%;margin:0 auto;display:block} #HTML302{width:728px;float:$endSide;text-align:$endSide} /* ------ Main Menu ------ */ #menu-bar{clear:both;position:relative;margin-bottom:$(main.margin);padding:0 $(main.padding)} #LinkList302{height:58px;background-color:$(menu.back);position:relative} #LinkList302:before{content:'';display:block;height:3px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;width:100%;bottom:0;$startSide:0} #menu-bar .menu-bar ul li{float:$startSide} #menu-bar .menu-bar ul li>a{font-weight:700;display:block;width:100%;padding:17px 15px;color:$(menu.text);position:relative} #menu-bar .menu-bar li>a:hover{background-color:rgba(0,0,0,0.2);color:#FFF} #menu-bar .menu-bar ul li.drop-menu-st >a{padding-$endSide:30px} .menu-bar ul i{font-size:18px;display:inline-block;vertical-align:middle;margin-$endSide:10px} #menu-bar .home{white-space:nowrap;overflow:hidden;height:55px;line-height:25px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:#FFF!important;min-width:65px;max-width:65px} #menu-bar .home:hover{max-width:100%!important;padding-$startSide:40px} #menu-bar .home b{position:relative;$startSide:50px} #menu-bar .home:hover b{$startSide:0px} .home:before{font-weight:400;content:"\f015";font-family:FontAwesome;font-size:20px;position:absolute;$startSide:23px;text-indent:0;-webkit-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);transform:scale(2);top:16px} #menu-bar .home:hover:before{$startSide:10px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Sub Menu ------ */ #menu-bar .menu-bar li>ul li a{padding:12px 20px} #menu-bar .menu-bar li>ul li a:hover{background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);padding-$startSide:30px} #menu-bar .menu-bar .drop-menu-st{position:relative;padding-bottom:5px} #menu-bar .menu-bar .drop-menu-st:after{content:"\f078";font-family:FontAwesome;font-size:10px;color:$(menu.text);position:absolute;top:18px;$endSide:10px} #menu-bar .menu-bar .drop-menu-st ul{display:none;width:200px;height:auto;background-color:$(menu.back);position:absolute;top:58px;z-index:10;-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);box-shadow:0 5px 5px 0 rgba(0,0,0,0.2)} #menu-bar .menu-bar .drop-menu-st:hover ul{display:block} #menu-bar .menu-bar .drop-menu-st ul li{float:none} /* ------ Responsive Menu ------ */ .menu-bar-res{display:none} .menu-bar-res .fa-bars{cursor:pointer;float:$endSide;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));height:55px;width:55px;text-align:center;font-size:26px;padding-top:16px} .res-home{display:none;float:$startSide;height:55px;width:110px;text-align:center;padding-top:17px;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));font-weight:700} .res-home:before{content:"\f015";font-family:FontAwesome;font-weight:400;font-size:24px;margin-$endSide:5px;display:inline-block;vertical-align:-2px} /*================= 🔹 Sidebar ===================*/ aside .widget{margin-bottom:$(main.margin)} /* ------ Social Widget ------ */ .social-counter .social{overflow:hidden;padding:$(main.padding);border:1px solid $(aside.line)} .social-counter li{float:$startSide;width:23.5%;margin:0 1%;min-width:55px} .social-counter li:nth-child(4n+1){margin-$startSide:0} .social-counter li:nth-child(4n+4){margin-$endSide:0} .social-counter li i{text-align:center;display:block;width:55px;height:55px;line-height:55px;margin:auto;color:#FFF;font-size:24px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transform:translate(0,5px);-ms-transform:translate(0,5px)} .social-counter li:hover i{-webkit-transform:translate(0);-ms-transform:translate(0)} .social-counter li div{color:$(aside.link);padding:5px 7px;margin-bottom:15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:$(aside.line);font-size:11px;text-align:center;position:relative} .social-counter li div:after{content:"";display:block;border-width:5px;border-style:solid;border-color:transparent transparent $(aside.line);position:absolute;top:-10px;$endSide:44%} /*================= 🔹 Footer ===================*/ #footer{position:relative;background:-webkit-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-o-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-moz-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:linear-gradient(45deg,$(footer.back1),$(footer.back2));border-top:3px solid $(keycolor);clear:both} #footer-sections{font-size:0;padding:$(main.margin) $(main.padding)} #footer-sections .f-sec{display:inline-block;vertical-align:top;font-size:14px;width:-webkit-calc((100% - 90px)/4);width:-moz-calc((100% - 90px)/4);width:calc((100% - 90px)/4);margin-$endSide:30px} #footer-sections .f-sec:last-of-type{margin-$endSide:0} #footer-sections .f-sec .widget{margin-bottom:$(main.margin)} #footer-sections .f-sec .widget:last-of-type{margin-bottom:0} #footer-top-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-bottom:1px solid $(footer.line)} #footer-bottom-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-top:1px solid $(footer.line)} [data-boxed='false'] #footer-top-section:not(.no-items).wrapper{margin:$(main.margin) auto 0;padding:0 $(main.padding) $(main.margin)} [data-boxed='false'] #footer-bottom-section:not(.no-items).wrapper{margin:0 auto;padding:$(main.margin) $(main.padding)} #footer-top-section:not(.no-items).wrapper{padding:$(main.margin) 0;margin:0 $(main.padding)} #footer-cop-section{padding:5px $(main.padding);overflow:hidden;position:relative} /* ------ Copyrights ------ */ #HTML303{color:$(footer.link);margin-top:5px;float:$startSide} #HTML303 > *{vertical-align:middle;display:inline-block} #HTML303 a{color:$(keycolor)} #HTML303 a:hover{color:$(step.color);text-decoration:underline} #HTML303 > b{font-family:Tahoma;color:$(keycolor);font-size:15px} #LinkList304{float:$endSide;margin-top:5px} .credits span{margin-$endSide:5px} /* ------ Footer Scroll To Top ------ */ .scroll-top{background-color:$(footer.line);width:30px;height:30px;text-align:center;border-radius:100px;color:$(footer.text);padding-top:7px;cursor:pointer;position:absolute;left:calc(50% - 15px);top:-15px;z-index:1} .scroll-top:before{display:block} .scroll-top:hover{background:$(keycolor);color:#FFF} /*================= 🔹 Widgets ===================*/ .widget{position:relative} .widget-item-control{position:absolute;$endSide:0;top:100%;z-index:2;opacity:.7} .widget-item-control:hover{opacity:1} #top-bar .widget-item-control{top:0} .item-thumbnail img{display:none} /* ------ Email Subscription ------ */ aside .subscrib-sec p{margin:0 0 10px;color:$(aside.text);text-align:$startSide} #footer .subscrib-sec p{margin:0 0 10px;color:$(footer.text);text-align:$startSide} .subscrib-sec input[name="email"]{display:block;width:100%;padding:15px;margin:auto;line-height:0;outline:0;font-size:12px;border:0;border-radius:2px;direction:ltr;text-align:left} aside .subscrib-sec input[name="email"]{background-color:$(aside.line);color:$(aside.link)} #footer .subscrib-sec input[name="email"]{background-color:$(footer.line);color:$(footer.link)} .msg-send{font-family:inherit;display:block;padding:10px 30px 10px 20px;margin:5px auto 0;outline:0;border:0;border-radius:2px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:#FFF;font-weight:700;cursor:pointer;position:relative;overflow:hidden;width:100%;color:$(grad.color)} .msg-send:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .msg-send:before{content:"\f1d8";font-family:FontAwesome;position:absolute;top:10px;$startSide:10px;z-index:1;font-weight:normal} .msg-send:hover input[type="submit"]{color:#2c2c2c} .ltr .msg-send:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)} .msg-send:hover:before{-webkit-animation:subs .3s ease-in-out;animation:subs .3s ease-in-out} @-webkit-keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } @keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } /* ------ LinkList & PageList Widget ------ */ .LinkList .widget-content li a, *:not(header) .PageList .widget-content li a{display:block;padding:13px 0;font-size:14px} .LinkList .widget-content li:first-child a, *:not(header) .PageList .widget-content li:first-child a{padding-top:0} aside .LinkList .widget-content li a,aside .PageList .widget-content li a{color:$(aside.link);border-bottom:1px solid $(aside.line)} footer .LinkList .widget-content li a,footer .PageList .widget-content li a{color:$(footer.link);display:block;border-bottom:1px solid $(footer.line)} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before{content:"\f08b"} *:not(header) .PageList .widget-content li a::before{content:"\f0f6"} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before,*:not(header) .PageList .widget-content li a::before{display:inline-block;vertical-align:top;font-family:fontawesome;margin-$endSide:10px;font-size:20px} aside .LinkList .widget-content li a::before,aside .PageList .widget-content li a::before{color:$(aside.link)} footer .LinkList li a::before,footer .PageList .widget-content li a::before{color:$(footer.line)} aside .LinkList .widget-content li a:hover,#footer .LinkList .widget-content li a:hover, *:not(header) .PageList .widget-content li a:hover{color:$(keycolor);border-bottom:1px solid $(keycolor)} aside .LinkList .widget-content li a:hover::before,#footer .LinkList .widget-content li a:hover::before{-webkit-animation:LinkIcon 0.2s linear;animation:LinkIcon 0.2s linear;color:$(keycolor)} *:not(header) .PageList .widget-content li a:hover::before{color:$(keycolor)} @-webkit-keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} @keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} /* ------ Popular Posts ------ */ .PopularPosts article{margin-bottom:15px;padding-bottom:15px;overflow:hidden} .PopularPosts article:last-of-type{margin-bottom:0;border-bottom:none} aside .PopularPosts article{border-bottom:1px solid $(aside.line)} #footer .PopularPosts article{border-bottom:1px solid $(footer.line)} .PopularPosts .post-date{display:inline-block;background-color:$(keycolor);text-align:$startSide;font-size:10px;color:$(grad.color);padding-$startSide:5px;padding-$endSide:10px;margin-bottom:5px} .PopularPosts .post-date i{background-color:rgba(0,0,0,0.2);font-size:12px;display:inline-block;vertical-align:middle;padding:5px;color:$(grad.color);margin-$endSide:5px} .PopularPosts .item-thumbnail{display:block;overflow:hidden;float:$startSide;width:72px;height:72px;margin-$endSide:15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .PopularPosts .item-thumbnail img{height:100%} .PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .PopularPosts .post-title{overflow:hidden;margin:0 0 5px;font-weight:700;font-size:16px} aside .PopularPosts .post-title a{color:$(aside.link)} #footer .PopularPosts .post-title a{color:$(footer.link)} .PopularPosts .post-title a:hover{color:$(keycolor)} .snippet-item{font-size:12px;text-align:justify;line-height:1.5em;margin:0} aside .snippet-item{color:$(aside.text)} #footer .snippet-item{color:$(footer.text)} /* ------ Featured Post ------ */ .FeaturedPost h2{margin:0 0 5px 0;line-height:1.5em;font-size:18px} .FeaturedPost .item-thumbnail,.FeaturedPost .item-thumbnail img{display:block;text-align:center;margin:0 auto;width:100%} .FeaturedPost .item-thumbnail{min-height:150px;overflow:hidden;margin-bottom:5px} aside .FeaturedPost h2{color:$(aside.link)} footer .FeaturedPost h2{color:$(footer.link)} .widget.FeaturedPost h2:hover{color:$(keycolor)} aside .FeaturedPost p{color:$(aside.text)} footer .FeaturedPost p{color:$(footer.text)} /* ------ Archive Widget ------ */ .BlogArchive select{background:transparent;width:100%;outline:none;padding:5px 20px;margin:0 auto;display:block;font-family:inherit;font-size:12px} .BlogArchive select:focus{border:1px solid $(keycolor)} aside .BlogArchive select{border:1px solid $(aside.line);color:$(aside.link)} #footer .BlogArchive select{border:1px solid $(footer.line);color:$(footer.link)} /* Flat */ .flat .archivedate .post-count{font-style:normal;float:$endSide} aside .flat .archivedate i{color:$(aside.text)} #footer .flat .archivedate i{color:$(footer.text)} .BlogArchive .flat .archivedate a{display:block;padding:7px 2px} aside .BlogArchive .flat .archivedate a{color:$(aside.link);border-bottom:1px dotted $(aside.line)} footer .BlogArchive .flat .archivedate a{color:$(footer.link);border-bottom:1px dotted $(footer.line)} .BlogArchive .flat .archivedate a::before{color:$(step.color);display:inline-block;content:"\f08d";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);font-family:fontawesome;margin-$endSide:10px;vertical-align:middle} .BlogArchive .flat .archivedate:hover a{color:$(keycolor);border-bottom:1px dotted $(step.color)} .BlogArchive .archivedate:hover a:before{color:$(keycolor)} /* Hierarchy */ .hierarchy .hierarchy{margin-$startSide:10px} aside .hierarchy-title{background:$(aside.line);margin-bottom:5px;padding:8px 15px} #footer .hierarchy-title{background:$(footer.line);margin-bottom:5px;padding:5px 20px} aside .hierarchy .post-count-link,aside .hierarchy ul.posts a{color:$(aside.link)} #footer .post-count-link,#footer .hierarchy ul.posts a{color:$(footer.link)} .hierarchy .post-count{float:$endSide;color:#999} aside .hierarchy .post-count{color:$(aside.text)} #footer .hierarchy .post-count{color:$(footer.text)} .hierarchy ul.posts{margin-$startSide:0} .hierarchy ul.posts a{font-size:12px;display:block;padding:5px 0} .hierarchy ul.posts a:hover{border-bottom:1px solid $(step.color);color:$(keycolor);padding-$startSide:5px} aside .hierarchy ul.posts a{border-bottom:1px solid $(aside.line)} #footer .hierarchy ul.posts a{border-bottom:1px solid $(footer.line)} /* ------ Label Widget ------ */ .cloud-label-widget-content{overflow:hidden} .label-size{float:$startSide;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:7px 15px;margin-$endSide:7px;margin-bottom:7px;-webkit-border-radius:2px;-moz-border-radius:2x;border-radius:2px;font-size:14px;color:$(grad.color);font-weight:700} .label-size a::before{content:"\f02b";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;margin-top:-4px;font-size:14px;padding-top:5px;text-align:center;font-weight:400} .label-size:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .list-label-widget-content a{display:block;padding:5px 0} .label-size .label-count{display:none} .label-size:hover a:before{-webkit-animation:label .3s ease-in-out;-moz-animation:label .3s ease-in-out;-o-animation:label .3s ease-in-out;animation:label .3s ease-in-out} @-webkit-keyframes label { 50%{-webkit-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);transform:rotate(-60deg)} } @-moz-keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);transform:rotate(-60deg)} } @-o-keyframes label { 50%{-webkit-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)} } @keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)} } aside .list-label-widget-content .label-name{color:$(aside.link);border-bottom:1px dotted $(aside.line)} #footer .list-label-widget-content .label-name{color:$(footer.link);border-bottom:1px dotted $(footer.line)} .list-label-widget-content .label-name::before{content:"\f07b";font-family:fontawesome;margin-$endSide:10px;display:inline-block;vertical-align:top;-webkit-transition:.3s ease-out;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;transition:.3s ease-out;width:20px;font-size:18px;text-align:$endSide} aside .list-label-widget-content .label-name::before{color:$(aside.line)} footer .list-label-widget-content .label-name::before{color:$(footer.line)} .list-label-widget-content .label-name:hover::before{content:"\f07c";color:$(keycolor)} aside .list-label-widget-content .label-count{float:$endSide;color:$(aside.text)} #footer .list-label-widget-content .label-count{float:$endSide;color:$(footer.text)} aside .list-label-widget-content .label-name:hover{color:$(keycolor);border-bottom:1px dotted $(keycolor)} #footer .list-label-widget-content .label-name:hover{color:$(keycolor);border-bottom:1px dotted $(keycolor)} /* ------ Statistics ------ */ .Stats img{width:auto;height:auto;display:inline-block;vertical-align:-4px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-$endSide:5px} .Stats .widget-content{text-align:center;font-size:30px;font-weight:700;font-family:Arial} aside .text-counter-wrapper{color:$(aside.link)} footer .text-counter-wrapper{color:$(footer.link)} /* ------ Contact Form ------ */ .post-body #ContactForm93{padding:$(main.padding);border:1px solid $(main.line)} .post-body #ContactForm93 .headline{display:none} .ContactForm form{position:relative} .ContactForm input[type='text'],.ContactForm textarea{display:block;width:100%;margin-bottom:5px;padding-top:15px;padding-bottom:5px;padding-$startSide:30px;padding-$endSide:20px;border:0;resize:vertical;outline:0;font-family:inherit;font-size:14px;font-weight:700;line-height:2em;background-color:transparent;position:relative;z-index:2} aside .ContactForm input[type='text'],aside .ContactForm textarea{border-bottom:2px solid $(aside.line);color:$(aside.text)} footer .ContactForm input[type='text'],footer .ContactForm textarea{border-bottom:2px solid $(footer.line);color:$(footer.text)} .ContactForm textarea{min-height:150px} .ContactForm input[type='text']:focus,.ContactForm textarea:focus{border-bottom:2px solid $(keycolor)} .ContactForm i{position:absolute;$startSide:0;font-size:18px} aside .ContactForm i{color:$(aside.text)} footer .ContactForm i{color:$(footer.text)} .ContactForm input[type='text']:foucs + i,.ContactForm textarea:focus + i{color:$(keycolor)} .ContactForm i:nth-of-type(1){top:17px} .ContactForm i:nth-of-type(2){top:70px} .ContactForm i:nth-of-type(3){top:130px} .ContactForm b{position:absolute;$startSide:30px;font-size:14px} aside .ContactForm b{position:absolute;$startSide:30px;color:$(aside.text)} footer .ContactForm b{position:absolute;$startSide:30px;color:$(footer.text)} .ContactForm b:nth-of-type(1){font-size:14px;top:15px} .ContactForm b:nth-of-type(2){font-size:14px;top:68px} .ContactForm b:nth-of-type(3){font-size:14px;top:128px} .ContactForm input[type='text']:nth-of-type(1):valid ~ b:nth-of-type(1),.ContactForm input[type='text']:nth-of-type(1):focus ~ b:nth-of-type(1){font-size:10px;top:-5px} .ContactForm input[type='text']:nth-of-type(2):valid ~ b:nth-of-type(2),.ContactForm input[type='text']:nth-of-type(2):focus ~ b:nth-of-type(2){font-size:10px;top:50px} .ContactForm textarea:valid ~ b:nth-of-type(3),.ContactForm textarea:focus ~ b:nth-of-type(3){font-size:10px;top:105px} body .ContactForm input[type='text']:valid + i + b, body .ContactForm textarea:valid + i + b{color:$(keycolor)} .ContactForm input[type='button']{outline:0;border:0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:$(keycolor);font-family:inherit;font-weight:700;font-size:18px;padding:10px 20px;float:$endSide;cursor:pointer;color:$(grad.color)} .ContactForm input[type='button']:hover{padding:10px 30px} body .ContactForm input[type='text']:valid+i, body .ContactForm textarea:valid+i{color:$(keycolor)} aside .contact-state{float:$startSide;color:$(aside.text)} footer .contact-state{float:$startSide;color:$(footer.text)} .contact-state img{float:$startSide;line-height:90px;margin-$endSide:10px} .contact-state p{line-height:11px} body .ContactForm input[type='text']:valid, body .ContactForm textarea:valid{border-bottom:2px solid $(keycolor)} /* ------ Feed ------ */ .Feed li{list-style:square;margin-$startSide:20px;padding-bottom:5px;margin-top:5px;border-bottom:1px solid} .Feed li:hover{color:$(keycolor);border-color:$(keycolor)} aside .Feed li{color:$(aside.text);border-color:$(aside.line)} footer .Feed li{color:$(footer.text);border-color:$(footer.line)} .Feed .item-title a{font-weight:700;display:block} aside .Feed .item-title a{color:$(aside.link)} footer .Feed .item-title a{color:$(footer.link)} .Feed .item-title a:hover{color:$(keycolor)} aside .Feed .item-date{color:$(aside.text)} footer .Feed .item-date{color:$(aside.text)} aside .Feed .item-author{color:$(footer.text)} footer .Feed .item-author{color:$(footer.text)} /* ------ Profile ------ */ .Profile .widget-content{overflow:hidden} .Profile .profile-img{float:$startSide;width:72px;height:72px;margin-$endSide:15px} .Profile a.profile-link.g-profile{display:block;font-weight:700;font-size:18px;margin-bottom:5px} aside .Profile a.profile-link.g-profile{color:$(aside.link)} footer .Profile a.profile-link.g-profile{color:$(footer.link)} .profile-textblock{font-size:12px;line-height:18px} aside .Profile .widget-content.individual a.profile-link:not(.g-profile){font-size:10px;color:$(aside.text);float:$endSide} footer .Profile .widget-content.individual a.profile-link:not(.g-profile){font-size:10px;color:$(footer.text);float:$endSide} .Profile .widget-content.individual dl.profile-datablock{margin:0} .Profile .team-member .profile-img{width:50px;height:50px} .Profile .widget-content.team li{clear:both;margin-bottom:10px;display:block;overflow:hidden;padding-bottom:10px;border-bottom:1px solid} aside .Profile .widget-content.team li{border-color:$(aside.line)} footer .Profile .widget-content.team li{border-color:$(footer.line)} .Profile .widget-content.team li:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none} /*================= 🔹 Pages (Common) ===================*/ /* ------ More Posts ------ */ .more-posts{text-align:center} .more-posts a{display:inline-block;background-color:$(step.color);padding:7px 15px;color:$(grad.color);font-weight:bold;border-radius: 2px;} .more-posts a:hover{background-color:$(keycolor);padding:7px 20px} /*================= 🔹 Homepage ===================*/ /* ------ Common ------ */ .home-cate{margin-bottom:$(main.margin);clear:both} .home-cate .widget-content{padding:$(main.padding);border:1px solid $(main.line);overflow:hidden} .cate-link{margin:0;font-size:16px;overflow:hidden;max-height:45px} .cate-link a{color:$(main.link);line-height:1.3em} .cate-link a:hover{color:$(keycolor)} .cate-snippet{color:$(main.text);line-height:1.7em;margin:5px 0} .home-cate .details{margin-top:5px;line-height:1em} .home-cate .Item{overflow:hidden} .details > *{display:inline-block;vertical-align:top;font-size:11px} .details > * i{color:$(keycolor);margin-$endSide:5px} .details > *:first-child{margin-$endSide:10px} .details a:hover{text-decoration:underline;color:$(keycolor)} .details > *{color:$(main.text)} aside .details > *{color:$(aside.text)} #footer .details > *{color:$(footer.text)} .img-wrap:before{content:"\f0f6";font-size:20px;position:absolute;top:50%;$startSide:50%;margin-$startSide:-25px;margin-top:-25px;font-family:fontawesome;color:$(grad.color);line-height:51px;width:50px;height:50px;text-align:center;z-index:1;-webkit-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0} .img-wrap:after{content:"";-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:20px;border:4px solid $(grad.color);position:absolute;top:50%;$startSide:50%;margin-$startSide:-25px;margin-top:-25px;width:50px;height:50px;-webkit-transform:scale(1.5);-ms-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);opacity:0} .img-wrap:hover:before,.img-wrap:hover:after{-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1} /* ------ Sections ------ */ .two-cols .section{width:-webkit-calc((100% - 15px)/3);width:-moz-calc((100% - 15px)/3);width:calc((100% - 15px)/3);float:$startSide} .two-cols .section.wide-$startSide{width:-webkit-calc((100% - 15px) / 3 * 2);width:-moz-calc((100% - 15px) / 3 * 2);width:calc((100% - 15px) / 3 * 2);margin-$endSide:15px} .two-cols .section.wide-$endSide{width:-webkit-calc(((100% - 15px) / 3) * 2);width:-moz-calc(((100% - 15px) / 3) * 2);width:calc(((100% - 15px) / 3) * 2);margin-$startSide:15px} .two-cols.no-wide .section{width:-webkit-calc((100% - 15px) / 2);width:-moz-calc((100% - 15px) / 2);width:calc((100% - 15px) / 2)} .two-cols.no-wide .section:first-child{margin-$endSide:15px} .three-cols .section{width:-webkit-calc((100% - 30px)/3);width:-moz-calc((100% - 30px)/3);width:calc((100% - 30px)/3);float:$startSide} .three-cols .section:nth-of-type(2){margin-$endSide:15px;margin-$startSide:14px} .cate .section.not(.no-items){margin-bottom:$(main.margin)} /* ------ Recent Posts Widget ------ */ .index-posts .status a{float:$endSide;margin:0} .index-posts .img-wrap{float:$startSide;width:300px;height:180px;margin-$endSide:15px} .index-posts h2{margin:0 0 5px 0} .index-posts .post-outer{padding-bottom:20px;border-bottom:1px solid $(main.line);margin-bottom:20px;overflow:hidden} .status-msg-body{border:1px solid $(main.line);margin-bottom:20px;padding:$(main.padding);color:$(main.text)} .status-msg-body a{color:$(keycolor);margin-$endSide:10px} .status-msg-body b{color:$(main.color)} .status-msg-body a:hover{text-decoration:underline} .index-posts .PLHolder{opacity:0.5;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} /*================= 🔹 Post Page ===================*/ .item-page header{margin-bottom:$(main.margin)} .post-body{font-size:15px;color:$(main.text);line-height:2em} .separator a{color:$(main.link)} .separator a:hover{color:$(keycolor);text-decoration:underline} .post-body h3,.post-body h2,.post-body h4{background-color:$(main.line);padding:10px 20px;color:$(main.title);display:block;margin:5px 0 15px;border-bottom:1px solid $(main.line)} .post-body br{content:'';margin:15px;display:block} .post-body iframe{max-width:100%} .CSS_LIGHTBOX{z-index:999999!important} .post-body a{color:$(keycolor);text-decoration:underline} .post-body a:hover{color:$(step.color)} /* ------ Ads ------ */ .Top-Ad,.Bottom-Ad{text-align:center;clear:both} .Top-Ad{margin-bottom:20px} .Bottom-Ad{margin-top:20px} .Middle-Ad.fixedAd{float:$endSide;margin-$startSide:20px;text-align:center} .Middle-Ad:not(.fixedAd){margin-bottom:20px;clear:both;text-align:center} /* ------ Full Width ------ */ .fullwidth-topic{padding:$(main.padding);margin-top:35px;border:1px solid $(main.line)} /* ------ Post Title ------ */ .topic-title{margin:0;padding:20px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;position:relative;-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.2);box-shadow:0 3px 5px 0 rgba(0,0,0,0.2);font-size:22px;color:#fff;text-align:center;line-height:1.3em;text-shadow:1px 1px 2px rgba(0,0,0,0.5)} /* ------ Post Tools ------ */ article .topic-tools{display:inline-block;vertical-align:top;padding:5px 15px;background-color:$(menu.back);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px} /* ------ Zoom ------ */ .zooming{text-align:center;width:110px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .zooming b{color:$(menu.text);margin:0 2px;display:inline-block;vertical-align:top;font-size:12px} .zooming i{color:$(step.color);border:2px solid $(keycolor);width:20px;display:inline-block;text-align:center;height:20px;-webkit-border-radius:100px;border-radius:100px;vertical-align:top;padding-top:3px;font-size:11px;cursor:pointer} .zooming i:hover{color:$(keycolor);border:2px solid $(keycolor)} .zooming i.disb{color:$(menu.text);border:2px solid $(menu.text);cursor:not-allowed} /* ------ Post Details ------ */ .topic-details{margin:0 5%;font-size:0;width:-webkit-calc(80% - 105px);width:calc(80% - 105px)} .topic-details > *{margin-$endSide:10px;color:$(menu.text);display:inline-block;vertical-align:top;margin-$endSide:15px;font-size:10px} .topic-details i{margin-$endSide:5px;color:$(keycolor)} .topic-details a:hover{color:$(keycolor);text-decoration:underline} .topic-details .categ{position:relative;margin-$endSide:0} .topic-details .categ a:first-of-type{position:relative} .topic-details .categ a{display:inline-block;vertical-align:middle;margin-$endSide:5px} .rtl .topic-details .categ a:first-of-type:after{content:"\f100"} .ltr .topic-details .categ a:first-of-type:after{content:"\f101"} .topic-details .categ a:first-of-type:after{line-height:12px;content:"\f100";font-family:FontAwesome;font-size:12px;color:$(menu.text);display:inline-block;vertical-align:middle;margin-$startSide:5px;text-decoration:none} .topic-details .categ a:last-of-type{margin-$endSide:0} .topic{color:$(main.color);padding:$(main.padding);margin:15px auto 0;overflow:hidden;text-align:justify;line-height:2.2;border:1px solid $(main.line);margin-bottom:$(main.margin)} /* ------ Post Blockquote ------ */ .post-body blockquote{width:90%;clear:both;-webkit-print-color-adjust:exact;padding:10px 30px;margin:15px auto;line-height:2;text-indent:15px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);border-radius:5px;position:relative} [dir='rtl'] .post-body blockquote:before,[dir='ltr'] .post-body blockquote:after{content:"\f10e";} [dir='ltr'] .post-body blockquote:before,[dir='rtl'] .post-body blockquote:after{content:"\f10d";} .post-body blockquote:before{top:0;$startSide:-4px} .post-body blockquote:before,blockquote:after{font-family:FontAwesome;font-size:20px;color:$(main.back);position:absolute} .post-body blockquote:after{bottom:0;$endSide:15px} /* ------ Post Elements ------ */ .post-body ol{list-style-type:decimal} .post-body ul{list-style-type:disc;margin-$startSide:40px} .post-body li{padding-$startSide:10px} .post-body img{width:auto;height:auto;display:inline;max-width:100%} .separator a{display:block} /* ------ Post Pagination ----- */ .post-pages{position:relative;clear:both;overflow:hidden;margin-top:15px} .post-pages:before{content:"";background-color:$(main.line);height:5px;position:absolute;width:100%;top:15px} a.next-page,a.prev-page{z-index:1;background-color:$(main.back);position:relative;border:2px solid $(keycolor);border-radius:100px;color:$(keycolor)} a.next-page:hover,a.prev-page:hover{border:2px solid $(step.color);color:$(step.color)} a.next-page:hover:before,a.prev-page:hover:before{background-color:$(step.color)} .rtl a.prev-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:$startSide;padding:5px 10px 5px 15px} .ltr a.prev-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:$startSide;padding:5px 10px 5px 15px} .rtl a.next-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:$endSide;padding:5px 15px 5px 10px} .ltr a.next-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:$endSide;padding:5px 15px 5px 10px} a.next-page:before,a.prev-page:before{font-family:fontawesome;background-color:$(keycolor);width:21px;height:21px;border-radius:100px;text-align:center;color:$(grad.color);font-size:16px} .rtl a.next-page:before{content:"\f104"} .rtl a.prev-page:before{content:"\f105"} .ltr a.next-page:before{content:"\f105"} .ltr a.prev-page:before{content:"\f104"} a.next-page:before{float:$endSide;margin-$startSide:10px} a.prev-page:before{float:$startSide;margin-$endSide:10px} /* ------ Edit Post Button ------ */ .edit-post a:before{content:"\f040";font-family:fontawesome;display:inline-block;font-weight:normal;margin-$endSide:10px} .edit-post a{display:block;width:150px;text-align:center;padding:10px 0;border-radius:100px;font-weight:bold;background-color:$(step.color);margin:20px auto 0;color:$(main.back)} .edit-post a:hover{width:170px;background-color:$(keycolor)} /* ------ Post Share ------ */ .topic-share .social{display:block;width:100%;margin-$startSide:0;padding-top:$(main.margin);border-top:1px solid $(main.line);text-align:center;position:static;top:auto;$startSide:auto;z-index:1;font-size:0;margin-top:$(main.margin)} .topic-share .social li{display:inline-block;vertical-align:top;min-width:120px;margin:0 5px 5px 0;padding:0} .topic-share .social li a:hover{-webkit-box-shadow:0 90px 75px 1px rgba(255,255,255,0.0) inset,0 3px 5px -2px rgba(0,0,0,0.3);box-shadow:0 90px 75px 1px rgba(255,255,255,0.0) inset,0 3px 5px -2px rgba(0,0,0,0.3);-webkit-animation:Share .2s ease-in-out;animation:Share .2s ease-in-out} @-webkit-keyframes Share{ 50%{-webkit-transform:scaleX(0.9);transform:scaleX(0.9)} 100%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)} } @keyframes Share{ 50%{-webkit-transform:scaleX(0.9);transform:scaleX(0.9)} 100%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)} } .topic-share .social li a{display:block;padding:5px 6px;font-size:13px;font-family:inherit;color:#FFF;-webkit-box-shadow:0 90px 75px 1px rgba(255,255,255,0.1) inset;box-shadow:0 90px 75px 1px rgba(255,255,255,0.1) inset;border-radius:100px;text-align:$startSide;height:40px;overflow:hidden} .topic-share .social li a:before{font-size:16px;font-family:fontawesome;display:inline-block;vertical-align:-2px;margin-$endSide:8px;background-color:rgba(0,0,0,0.2);width:30px;height:30px;text-align:center;border-radius:100px;padding-top:8px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;float:$startSide} .topic-share .social li a:hover b{margin-top:2px} .topic-share .social li a b{float:$startSide;margin-$endSide:5px;margin-top:8px;-webkit-transition-delay:.2s;transition-delay:.2s} .topic-share .social li a:hover span{margin-top:-11px} .topic-share .social li a span{font-size:10px;color:rgba(255,255,255,0.5);display:block;clear:both;float:$startSide;margin-$startSide:38px;margin-top:6px;-webkit-transition-delay:.2s;transition-delay:.2s} .topic-share .social li a:hover:before{background-color:#FFF;-webkit-animation:Share2 .2s ease-in-out;animation:Share2 .2s ease-in-out} @-webkit-keyframes Share2{ 50%{-webkit-transform:scale(0.8);transform:scale(0.8)} 100%{-webkit-transform:scale(1.3);transform:scale(1.3)} } @keyframes Share2{ 50%{-webkit-transform:scale(0.8);transform:scale(0.8)} 100%{-webkit-transform:scale(1.3);transform:scale(1.3)} } .topic-share .social li a.fa-envelope:before{font-size:14px} .topic-share .social li a.fa-facebook {background-color:#3b5998} .topic-share .social li a.fa-twitter {background-color:#1da1f2} .topic-share .social li a.fa-pinterest-p {background-color:#cc2127} .topic-share .social li a.fa-google-plus {background-color:#dd4b39} .topic-share .social li a.fa-phone {background-color:#189d0e} .topic-share .social li a.fa-envelope {background-color:#7954ad} .topic-share .social li a.fa-print {background-color:#555555} .topic-share .social li a.fa-facebook:hover:before {color:#3b5998} .topic-share .social li a.fa-twitter:hover:before {color:#1da1f2} .topic-share .social li a.fa-pinterest-p:hover:before {color:#cc2127} .topic-share .social li a.fa-google-plus:hover:before {color:#dd4b39} .topic-share .social li a.fa-phone:hover:before {color:#189d0e} .topic-share .social li a.fa-envelope:hover:before {color:#7954ad} .topic-share .social li a.fa-print:hover:before {color:#555555} /* ------ Post Reactions ------ */ .reaction-buttons {border-top:1px solid $(main.line);display:block;margin:$(main.margin) 0 0;padding-top:$(main.margin)} .reactions-label{display:inline-block;vertical-align:top;font-weight:bold;color:$(main.text)} iframe.reactions-iframe{height:20px;display:inline-block;vertical-align:sub} /* ------ Topic Author ------ */ .topic-author{margin-top:$(main.margin);width:100%;margin-$endSide:0;padding:$(main.padding);overflow:hidden;border:1px solid $(main.line);position:relative} .topic-author .author-img{float:$startSide;width:72px;height:72px;margin-$endSide:10px;border-radius:5px;overflow:hidden} .topic-author .author-img img{width:100%} .topic-author h4{display:inline-block;margin:0;font-size:15px;background:$(keycolor);color:#FFF;padding:3px 15px;border-radius:2px;margin-bottom:5px} .author-about{font-size:11px;color:$(main.text);text-align:justify;float:$startSide;width:calc(100% - 100px)} /* ------ Topic Comments ------ */ .topic-comments{margin-top:$(main.margin)} #comment-editor{margin-top:20px} .comments-tabs .comments-info{margin-bottom:15px;overflow:hidden;font-size:12px} .comments-tabs .comments-count{float:$startSide;padding:5px 0;font-size:14px;position:relative;color:$(main.text)} .comments-tabs .go-respond{float:$startSide;padding:5px 15px;margin:0 25px;background-color:$(main.line);color:$(main.text)} .comments-tabs .comments-show{float:$endSide} .comments-tabs .comments-show a{color:$(main.text);background-color:$(main.line);cursor:pointer;display:inline-block;padding-top:5px;padding-$startSide:25px;padding-bottom:5px;padding-$endSide:15px;position:relative} .comments-tabs .comments-show .active:before{content:"\f00c";font-family:FontAwesome;position:absolute;top:6px;$startSide:7px} .comments-tabs .comments-show a:hover,.comments-tabs .comments-show .active{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} .comment-block{overflow:hidden} .comments-list{overflow:hidden;border:1px solid $(main.line)} .comments-list ol{margin:0;padding:0;list-style:none} .comments-list .avatar-image-container{float:$startSide;width:72px;height:72px;margin-$endSide:15px;border-radius:3px} .comments-list .avatar-image-container img{width:100%;height:100%;display:block} .comments-list .comment-replies .avatar-image-container{width:40px;height:40px} .comments-list .comment-content{line-height:1.5em;margin:0;color:$(main.text);font-size:14px;text-align:$startSide} .comments-list cite.user{font-style:normal;display:inline-block;margin:0 0 5px;font-size:13px;position:relative;font-weight:700;background-color:$(main.text);color:$(main.line);padding:0 15px} .comments-list cite.user.blog-author{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} li.comment{position:relative} .comments-list ol > li.comment{padding:15px 0;margin:0 15px;overflow:hidden;border-top:1px solid $(main.line)} .comments-list ol > li:first-of-type{border-top:none} .comments-list .comment-replies{float:$startSide;width:100%;padding-$startSide:90px} .comments-list .comment-replies li.comment{border-top:1px solid $(main.line);margin-top:15px;padding-top:15px} .loadmore{float:$endSide;background-color:$(main.line);margin:0 15px 15px;padding:5px 15px;color:$(main.text)} .thread-toggle,.continue,.comment-replies:empty,.loadmore.loaded{display:none!important} .comment-content a{color:$(keycolor);text-decoration:underline} .comment-content a:hover{color:$(step.color)} .comment-actions{position:absolute;$endSide:0;top:15px} .comment-actions > a,.comment-actions span{float:$endSide;color:$(main.link);padding:3px 10px;background-color:$(main.line);font-size:11px;position:relative;cursor:pointer;border-radius:100px} .comment-actions>*:last-child{margin-$endSide:10px} .comment-actions > :hover{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} .comment-actions>:before{font:normal normal normal 14px FontAwesome;display:inline-block;vertical-align:-2px;margin-$endSide:5px} .comment-actions>a:before{content:"\f112"} .comment-actions>span:before{content:"\f014"} #comments-respond{padding:$(main.padding);margin-top:25px;border:1px solid $(main.line)} .datetime.secondary-text{display:block;margin-top:-5px;margin-$endSide:15px;font-size:10.2px;color:$(main.text)} .datetime.secondary-text:before{content:"\f273";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px} #comments-respond h4{margin:0;color:$(main.link)} #comments-respond h4:before{content:"\f086";font-family:fontawesome;font-weight:400;color:$(step.color);margin-$endSide:10px;font-size:26px;display:inline-block;vertical-align:text-bottom} #comments-respond p{margin:0 0 5px;color:$(main.text);padding-$startSide:35px} /*================= 🔹 Error Page ===================*/ .error_page .side-$startSide{float:none;width:100%;margin-bottom:$(main.margin)} .ErrorSection{border:1px solid $(main.line);padding:20px;text-align:center} .ErrorSection h2{color:$(main.color);margin:38px 0 50px;font-size:64px} .ErrorSection span{display:block} .ErrorSection span i{font-size:110px;color:$(keycolor)} .ErrorSection p{color:$(main.text);margin:20px 0 0;font-size:18px;font-weight:700;text-align:center} /*================= 🔹 Shortcodes ===================*/ /* ------ Messages ------ */ .post-body i.msgs{display:block;padding-bottom:15px;padding-top:15px;padding-$startSide:50px;padding-$endSide:50px;font-style:normal;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-weight:bold;line-height:1.5em;position:relative;border-width:1px;border-style:solid;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .post-body i.msgs:before{font-family:fontawesome;width:30px;height:30px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;margin-$endSide:10px;color:#FFF;font-weight:normal;font-size:22px;line-height:30px;position:absolute;$startSide:10px;top:-webkit-calc(50% - 15px);top:-moz-calc(50% - 15px);top:calc(50% - 15px)} .post-body i.msgs.info:before{content:"\f129";background-color:#68c9ff} .post-body i.msgs.success:before{content:"\f00c";background-color:#46ea77} .post-body i.msgs.error:before{content:"\f00d";background-color:#f58282} .post-body i.msgs.warning:before{content:"\f12a";background-color:#d6c137} .post-body i.msgs.gift:before{content:"\f06b";background-color:#c775c3} .post-body i.msgs.info{border-color:#68c9ff;color:#68c9ff;background-color:#e4f5ff} .post-body i.msgs.success{border-color:#46ea77;color:#46ea77;background-color:#e4fff5} .post-body i.msgs.error{border-color:#f58282;color:#f58282;background-color:#ffe4e4} .post-body i.msgs.warning{border-color:#d6c137;color:#d6c137;background-color:#fff8e4} .post-body i.msgs.gift{border-color:#c775c3;color:#c775c3;background-color:#ffe4f9} /* ------ Buttons ------ */ .post-body a.sq-button{text-decoration:none;line-height:1.5em;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));color:$(grad.color);font-weight:bold;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} a.sq-button.sm{padding:2px 15px} a.sq-button.md{padding:5px 15px;font-size:16px} a.sq-button.lg{padding:5px 15px;font-size:20px} a.sq-button.xl{padding:10px 30px;font-size:22px} .post-body a.sq-button:hover{-webkit-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);-moz-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)} /* ------ Dev Code ------ */ .post-body pre.sq-code{direction:ltr;text-align:left!important;width:100%;display:block;font-size:0;line-height:30px;max-height:228px;overflow:auto} .code-sn{display:inline-block;width:4%;color:$(grad.color);font-weight:bold;text-align:center;background-color:$(keycolor);font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .code-sn span{display:block} .code-sn span:nth-of-type(odd){background-color:rgba(255,255,255,0.1)} pre.sq-source{margin:0;display:inline-block;vertical-align:top;background-color:$(main.line);color:$(main.link);width:96%;font-size:12px} pre.sq-source code{display:block;padding:0 10px} .sq-source code:nth-of-type(odd){background-color:rgba(0,0,0,0.05)} /* ------ Contact Form ------ */ .post-body .ContactForm input[type='text'],.post-body .ContactForm textarea{border-bottom:2px solid $(main.line);color:$(main.color)} .post-body .ContactForm i{color:$(main.text)} .post-body .ContactForm b{position:absolute;$startSide:30px;color:$(main.text)} .post-body .contact-state{float:$startSide;color:$(main.text)} /*================= 🔹 Responsive ===================*/ @media screen and (max-width:1050px) { #Header1,#HTML302{float:none;width:100%;text-align:center;margin:0 auto;min-height:auto} div#Header1{margin-bottom:$(main.margin)} } @media screen and (min-width:992px) { body{background:$(body.background)} } @media screen and (max-width:992px) { a.res-home{display:block} #menu-bar .menu-bar ul li>a.home{display:none} .menu-bar-res{display:block} #menu-bar .menu-bar > ul{display:none;position:absolute;left:0;top:58px;background-color:#222222;width:200px;padding:20px;z-index:2;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);box-shadow:0 0 10px rgba(0,0,0,0.5)} #menu-bar .menu-bar .drop-menu-st ul{display:block;background-color:rgba(0,0,0,0.2);position:relative;top:0;-webkit-box-shadow:none;box-shadow:none;width:auto} #menu-bar .menu-bar .drop-menu-st ul li a{font-size:12px} #menu-bar .menu-bar ul li>a{display:block;padding:10px;font-weight:700;text-align:right;border-bottom:1px dotted rgba(255,255,255,0.2)} #menu-bar .menu-bar .drop-menu-st:after{display:none} #menu-bar .menu-bar ul li{float:none} .side-$startSide{width:-webkit-calc(100% - 250px - 2%);width:-moz-calc(100% - 250px - 2%);width:calc(100% - 250px - 2%);float:$startSide} aside{float:$endSide;width:250px} } @media screen and (min-width:861px) and (max-width:992px) { .social-counter li{margin:0 5px!important;float:none;display:inline-block;vertical-align:top} .social-counter{text-align:center} } @media screen and (min-width:641px) and (max-width:992px) { .wide-sec .sided-sections.three-cols .section:first-of-type{float:none;width:100%;clear:both;width:100%} .wide-sec .sided-sections.three-cols .section:nth-of-type(2){margin:0 0 0 15px} .wide-sec .sided-sections.three-cols .section:nth-of-type(n+2){width:-webkit-calc((100% - 15px)/2);width:-moz-calc((100% - 15px)/2);width:calc((100% - 15px)/2)} .wide-sec .sided-sections.two-cols .section{margin:0 0 0 15px;width:-webkit-calc((100% - 15px)/2);width:-moz-calc((100% - 15px)/2);width:calc((100% - 15px)/2)} .wide-sec .sided-sections.two-cols .section:last-of-type{margin:0} } @media screen and (max-width:860px) { header #top-bar #LinkList301{max-width:70%;margin-$startSide:40px} nav.social{position:absolute;$startSide:40px;top:0} header #top-bar #PageList301{position:absolute;$startSide:0;overflow:visible} header #top-bar .menu{display:none} header #top-bar .menu-res{display:block} header #top-bar #HTML301{width:250px} main.side-$startSide,aside{width:100%;float:none} #sidebar-section .widget{width:49%;float:$startSide} #sidebar-section .widget:nth-of-type(odd){margin-$endSide:2%} #footer-sections .f-sec:nth-of-type(odd){margin-$endSide:2%} #footer-sections .f-sec{width:49%;margin-$endSide:0;margin-bottom:$(main.margin)} .topic-tools.zooming{display:block;margin:0 auto} .topic-tools{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px} .topic-details{width:95%;margin:0 2.5%;padding:35px $(main.padding) 10px;margin-top:-3px} } @media screen and (max-width:640px) { .topic-title{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} body .sided-sections .section{float:none!important;width:100%!important;margin-$endSide:0!important;margin-$startSide:0!important} #sidebar-section .widget{width:100%;float:none} #footer #footer-sections .f-sec{width:100%;margin-$endSide:0} .index-posts .img-wrap{width:180px;height:180px;margin-$endSide:15px} .blog-author-card{margin-$startSide:0} .topic-author .social{position:relative;$endSide:0;top:0;text-align:$endSide} #LinkList304{float:none;clear:both;margin:0 auto;text-align:center} #HTML303{float:none;clear:both;text-align:center;margin-bottom:10px} .premium{width:98%} .comments-list .comment-replies{padding-$startSide:0} .comments-list .comment-content{margin-top:40px;clear:both} .comments-list .comment-replies .comment-content{margin-top:20px} .comment-actions{$endSide:auto;$startSide:85px;top:60px} .comment-replies .comment-actions{$endSide:0;top:15px;$startSide:auto} } @media screen and (max-width:480px) { header #top-bar #HTML301{min-width:auto;width:200px;position:absolute;$endSide:$(main.padding);z-index:5} .index-posts .post-outer .img-wrap{float:none;width:100%;height:50vw;margin-bottom:15px} .post-outer h2.post-title{display:block;width:100%} .topic-nav-cont a.next,.topic-nav-cont a.prev{float:none;width:100%;border:none;display:block} .topic-nav .topic-img{display:none!important} .topic-author{text-align:center} .topic-author .author-img{display:block;margin:0 auto 10px;float:none} .topic-author .social{text-align:center} .separator a{margin:0 auto!important} } @media screen and (max-width:360px) { header #top-bar #HTML301{width:150px} } @media print { .main-container>header,.intro,footer,aside,.topic-share,.topic-author,.topic-nav,.topic-related,div[id^='HTML30'],.zooming,.main-container:before,.main-container:after,article .topic-tools,.Top-Ad,.Bottom-Ad,.Middle-Ad,.item-control.blog-admin{display:none} .side-$startSide{width:100%!important;float:none} .middle-content,.main-wrap{margin:0 auto!important} .main-container{max-width:100%;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} .topic-details{margin:0 5%;width:90%} .topic-title{color:#000;border-bottom:1px solid #DDD;background:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;text-shadow:none} .post-body{color:#222!important} } ]]> div.add_widget{margin-top:0;padding:7px 15px;border:none;border-bottom:2px solid #c7c7c7} body#layout div.section>div.add_widget:hover{border-bottom:2px solid #e87375} body#layout .add-icon{background-color:#d8d8d8;border-radius:2px} body#layout div.section>div.add_widget:hover .add-icon{background-color:#e87375} body#layout div.section>div.widget{margin-top:0;margin-bottom:10px} body#layout .section .widget a.editlink{border:0;padding:3px 15px;color:#b190bf!important;background:#562d67;text-decoration:none;border-radius:3px;height:20px;font:700 11px/18px Tahoma} body#layout .rtl .section .widget a.editlink{right:auto;left:10px;} body#layout .ltr .section .widget a.editlink{left:auto;right:10px;} body#layout .section .widget a.editlink:hover{background:#922c2d;color:#dadada!important} body#layout .visibility .editlink.icon{margin-top:15px} body#layout .add_widget{border:1px dashed rgba(0,0,0,0.3);margin-bottom:5px;margin-top:0} body#layout .add_widget:hover{border:1px dashed rgba(0,0,0,0.5)} body#layout .section .add_widget a{color:#757575;font-weight:700;text-decoration:none!important} body#layout.rtl .section .add_widget a{margin-right:40px;margin-left:0;} body#layout.ltr .section .add_widget a{margin-left:40px;margin-right:0;} body#layout div.widget-content{padding:10px 15px} body#layout .draggable-widget div.widget-wrap2{background-color:#e87375} body#layout .dr_active:before{content:'\افلت هُنا';font-size:30px;padding-top:25px;display:block;font-weight:700} body#layout .dr_active{height:50px!important;background-color:transparent;border:1px dashed #5558ea;color:#5e1056;margin-bottom:30px;top:20px;border-radius:100px} body#layout .widget.locked-widget:before{content:'\002638';font-size:14px;position:absolute;z-index:2;top:0;background-color:#562d67;width:17px;height:15px;color:#b190b6;line-height:1em;padding-top:5px;border-radius:0 0 20px 20px} body#layout .rtl .widget.locked-widget:before{left:10px} body#layout .ltr .widget.locked-widget:before{right:10px} body#layout .widget .visibility .layout-widget-state{margin-top:12px;background-image:url(https://4.bp.blogspot.com/-4ewGLNY2bfg/WmSZTIyIIfI/AAAAAAAAABg/hkOX-BjuVVUjfRomeZxjQtyVzTSEKa_WgCLcBGAs/s1600/eyes.png);opacity:1!important} body#layout .rtl .widget .visibility .layout-widget-state{float:right;} body#layout .ltr .widget .visibility .layout-widget-state{float:left;} .layout-widget-state.visible{background-position:center -1px!important} .layout-widget-state.not-visible{background-position:center -23px!important} /* ============= * Heads Title * ============= */ body#layout header:before,body#layout .intro:before,body#layout .sided-sections:before,body#layout aside:before,body#layout #RecentPosts:before,body#layout #Auth-Sec:before,body#layout footer:before{content:'';display:block;height:45px;background:#271e3a url(https://3.bp.blogspot.com/-lBhkNA-C7fk/WmSZM9WycNI/AAAAAAAAAAg/DxeNRhwfx8IIV8gg3CkKqcISm07mgH7hQCLcBGAs/s1600/LyN.png) no-repeat;margin-bottom:10px} body#layout header:before{background-position:center -9px} body#layout .intro:before{background-position:center -78px} body#layout .sided-sections:before{background-position:center -152px} body#layout aside:before{background-position:center -228px} body#layout #RecentPosts:before{background-position:center -308px} body#layout #Auth-Sec:before{background-position:center -398px} body#layout footer:before{background-position:center -486px} body#layout .opt-before:before{display:none} /* ============= * Header * ============= */ body#layout #Tempnec{background-color:transparent;border:none;margin:0;padding:0} body#layout #Tempnec .widget{display:none} body#layout .widget#LinkList400,body#layout .widget#HTML400{display:block} body#layout #top-bar #HTML301{display:none} body#layout header div.dropregion{display:none!important} body#layout #top-bar .widget, body#layout #head-sec .widget{display:inline-block;width:49.5%;vertical-align:top} body#layout .rtl #head-sec #Header1, body#layout .rtl #top-bar #LinkList301{margin-left:1%} body#layout .ltr #head-sec #Header1, body#layout .ltr #top-bar #LinkList301{margin-right:1%} /* ============= * Main * ============= */ body#layout .sided-sections,body#layout .sided-sections{font-size:0} body#layout .top-content .sided-sections .section,body#layout .bottom-content .sided-sections .section{display:inline-block;vertical-align:top;width:32.33333333333%} body#layout #section2, body#layout #section5, body#layout #section14{margin-right:1.5%;margin-left:1.5%}body#layout .middle-content .sided-sections .section{display:inline-block;vertical-align:top;width:49%} body#layout .rtl .middle-content .sided-sections .section:first-of-type{margin-left:2%} body#layout .ltr .middle-content .sided-sections .section:last-of-type{margin-left:2%} body#layout .intro{margin-bottom:10px} body#layout #section9{margin-bottom:10px} body#layout .middle-content{margin-bottom:10px} body#layout .Blog .widget-content{height:100px} body#layout div#RecentPosts .widget:last-of-type{margin-bottom:0} body#layout .rtl main, body#layout .rtl aside{float:right;} body#layout .ltr main, body#layout .ltr aside{float:left;} body#layout .rtl main{width:60%;border-left:2px solid #d8d8d8;} body#layout .ltr main{width:60%;border-right:2px solid #d8d8d8;} body#layout .rtl main{padding-left:1%} body#layout .ltr main{padding-right:1%} body#layout aside{width:37.5%;} body#layout .rtl aside{margin-right:1%} body#layout .ltr aside{margin-left:1%} /* ============= * footer * ============= */ body#layout #footer-sections{font-size:0} body#layout #footer-sections .section{width:24%;display:inline-block;vertical-align:top} body#layout .rtl #footer-sections .section{margin-left:1.333%} body#layout .ltr #footer-sections .section{margin-right:1.333%} body#layout .rtl #footer-sections div#sec4{margin-left:0} body#layout .ltr #footer-sections div#sec4{margin-right:0} body#layout #HTML303{display:none} ]]>

20 طريقة لتسريع موقعك الإلكتروني وزيادة نسبة التحويل

 

زيادة سرعة الموقع

هل تعتقد أن تسريع موقع الويب الخاص بك ليس مهمًا؟

هذا خطأ فادح يرتكبه الكثير من مسؤولي مواقع الويب.

 التأخير لثانية واحدة في وقت تحميل الصفحة  النتائج:

  • نقص مشاهدة للصفحة بنسبة 11%
  •  انخفاض في رضا العملاء بنسبة 16٪
  •  خسارة في التحويلات ان كنت من اصحاب المتاجر الإلكترونية بنسبة 

سيكون لموقعك الذي يستغرق بضع ثوان إضافية للتحميل تأثير سلبي على قدرتك على جذب الزوار وتحقيق المبيعات.

هذا يعني أن امتلاك موقع سريع أمر ضروري - ليس فقط للترتيب الجيد في محرك البحث Google ، ولكن للحصول على ارباح مرتفعة.

كيف يؤثر تحسين سرعة الموقع على التحويلات

المواقع البطيئة تقتل التحويلات . ولا يمكن الحصول على ماتريد من موقعك الإلكتروني.

في الواقع ، يتوقع 47٪ من المستهلكين تحميل مواقع الويب في ثانيتين أو أقل. و 40٪ منهم سوف يغادرون الصفحة التي تستغرق ثلاث ثواني أو أكثر.

إذا استغرق تحميل موقعك أكثر من ثلاث ثواني ، فستفقد ما يقرب من نصف زوار موقعك قبل وصولهم وهذا امر مريب نوعا ما. و هو ضربة قاضية بالنسبة لتحويلاتك المحتملة.

وبالنسبة للزوار الذين يقررون البقاء ، فإن وقت تحميل صفحاتك البطيئ يمكن أن يمنعهم من العودة اليك في المستقبل. في أحد الاستطلاعات ، قال 79٪ من العملاء  إنهم لن يعودوا إلى موقع ذي أداء ضعيف.

تسريع موقع الويب الخاص بك

في نفس الاستطلاع ، قال 52٪ من الزوار أن التحميل السريع للصفحة مهم للحفاظ عليهم في موقعك ، وقال 44٪ إنهم يخبرون أصدقائهم بتجارب الموقع السيئة.

اكتشف هذا الاستطلاع أيضًا أن التأخير لمدة ثانية واحدة يمكن أن يقلل من رضا العملاء بحوالي 16٪.

أحد أفضل الأمثلة على ذلك هو تحسين Walmart في التحويلات والأرباح بعد زيادة سرعة موقعهم.

خلال تحليلهم الأولي ، وجدوا أن الزوار الذين أجروا التحويل قد تلقوا صفحات تم تحميلها أسرع مرتين من الزوار الذين لم يجروا تحويلاً.

سرعة موقع وول مارت

أظهر هذا أنه كلما زادت سرعة الصفحة ، زاد احتمال إقدام الزائر على الشراء.

في نهاية تحسين سرعة موقعم الإلكتروني ، أبلغت وول مارت عن النتائج التالية:

  • مقابل كل ثانية واحدة من تحسين سرعة الموقع ، شهدوا زيادة في التحويلات تصل إلى 2٪.
  • مقابل كل 100 ملي ثانية من التحسين ، حققوا زيادة في الإيرادات الإضافية بنسبة تصل إلى 1٪.

في دراسة أخرى ، أظهرت العلاقة بين أوقات التحميل ومعدلات التحويل انخفاضًا بنسبة 25٪ في معدلات التحويل  مع ثانية واحدة إضافية من وقت التحميل.

تحميل وقت التحويلات

من الواضح أن بذل الجهد لزيادة سرعة موقعك - ​​حتى ولو بمقدار ثانية واحدة - يمكن أن يكون له تأثير كبير على التحويلات.

كيف تعرف ما الذي يقتل تحويلاتك

كيف تؤثر سرعة موقع الويب الخاص بك على الرؤية

الآن بعد أن أخذ Google السرعة في الاعتبار عند ترتيب المواقع ، يمكن أن تؤثر أوقات التحميل أيضًا على مدى سهولة عثور المستخدمين عليك في النتائج الأولى.

اعتبارًا من ديسمبر 2017 ، بدأ محرك البحث في ترتيب جميع نتائج البحث بناءً على إصدارات الصفحات على الأجهزة المحمولة.

فاق عدد عمليات البحث على الأجهزة المحمولة عدد عمليات البحث على سطح المكتب  لأول مرة في عام 2015 ، ويستمر نصيبها من البحث الإجمالي في النمو فقط.

هذا يعني أنه من مصلحة Google توفير نتائج البحث لمستخدمي الأجهزة المحمولة. وهنا جوجل يريد توجيه مستخدميه إلى مواقع يتم تحميلها بسرعة وعلى شكل جيد لأجهزتهم.

نتيجة لذلك ، ستلعب تجربة مستخدم الهاتف المحمول الآن دورًا رئيسيًا في تصنيفات البحث - حتى في نتائج بحث سطح المكتب.

وهذا عكس طريقة عمل الفهرس تمامًا.

لطالما كانت تجربة المستخدم عاملاً مهمًا في التصنيف ، حيث كان يأخذ في عين الاعتبار تجربة سطح المكتب فقط. لذلك ، حتى إذا قدم أحد المواقع تجربة جوّال سيئة ، فلا يزال لديه فرصة في الترتيب في الصفحة الأولى على جوجل.

لكن لم يعد هذا هو الحال الآن.

 يتم فهرسة الصفحات وترتيبها بناءً على التجربة التي تقدمها لمستخدمي الأجهزة المحمولة.

تسريع موقع الويب الخاص بك

لذلك إذا كنت ترغب في الحفاظ على (أو تحسين) تصنيفاتك وظهورك ، فمن الضروري معرفة كيفية تقليل وقت تحميل موقعك. يجب أن يكون لديك موقع يوفر تجربة مستخدم سريعة وسهلة - على أي متصفح أو حجم شاشة وهنا نقصد ان يكون موقعك متوافق مع جميع الأجهزة والمتصفحات.

لماذا موقع الويب الخاص بي بطيء؟

لقد أجريت اختبارًا لسرعة الموقع ووجدت أن وقت التحميل بطيء جدًا. (إذا كنت لا تعرف كيفية إجراء اختبار سرعة الموقع ، فسأشرح لاحقًا في هذه المقالة).

قد يكون هناك عدد من الأسباب وراء تأخر وقت تحميل موقعك. يمكن أن يكون أي شيء من وقت تحميل الخادم إلى حجم الصورة إلى عدد عمليات إعادة التوجيه لديك.

هذا يعني أن هناك مجموعة كاملة من الخطوات التي يمكنك اتخاذها لتحسين سرعة الصفحة. سنتطرق الى 20 منها. ولكن قبل البدء في استكشاف الأخطاء وإصلاحها لتحسين أداء موقعك، يجب أن يكون لديك هدف تطمح اليه ومعرفة سرعة موقعك الآن وماذا تريدها ان تصبح.

دعنا نلقي نظرة على ما نعتبره وقت تحميل جيد ، لنمنحك شيئًا لتصوره.

ما هو وقت تحميل الصفحة الجيد؟

قبل أن تبدأ العمل على سرعة موقعك ، من الجيد تحديد هدف تريد الوصول اليه.

قد يكون ذلك صعبًا إذا لم تكن متأكدًا من سرعة الصفحة المقبولة.

وفقًا لـ Google ، فإن أفضل وقت لتحميل موقعك هو ثلاثة ثوان. لسوء الحظ ، وفقًا لنتائج الفحص الخاصة بجوجل الأخيرة ، فإن معظم المواقع لا تحقق ذلك.

في تحليل 900000 صفحة لمواقع مختلفة تغطي 126 دولة ، عن طريق الجوال  وجدت Google أن 70٪ من الصفحات التي تم تحليلها استغرقت ما يقرب من سبع ثوانٍ لعرض المحتوى المرئي من الصفحة.

من بين جميع المجالات التي شملتها جوجل في تحليلها، لم يكن لدى أي منها متوسط ​​تحميل يقترب من سرعة موصى بها والمقدرة بثلاثة ثوانٍ.

متوسط ​​سرعة الصناعة

يبلغ متوسط ​​الوقت المستغرق لتحميل صفحة للجوّال بالكامل 22 ثانية ، ولكن يتم التخلي عن 53٪ من الزيارات إذا استغرق تحميل موقع ويب للجوّال أكثر من ثلاث ثوانٍ. وانت استنتج بنفسك حجم الكارثة.

بالإضافة إلى ذلك ، نظرًا لأن وقت تحميل الصفحة ينتقل من ثانية إلى عشر ثوانٍ ، يزداد احتمال مغادرة مستخدم الهاتف المحمول بنسبة 123٪.

احتمالية الارتداد

هذا يعني أن مالكي المواقع بشكل عام لديهم الكثير من العمل للقيام به لجعل مواقعهم تبدو سريعة في عيون Google.

ولكن على الجانب الإيجابي ، فهذا يعني أيضًا أنك إذا بذلت جهدًا للوصول بسرعة موقعك إلى الآفاق ، فأنت متقدم على العديد من المواقع من حيث تجربة المستخدم.

أثناء قيامك بتحسين موقعك ، يمكنك استخدام توصيات ومعايير Google لتحديد أهدافك وقياس أدائك.

بعد كل شيء - كأكبر محرك بحث في العالم ، يمكن أن يكون لـ Google تأثير كبير على نجاحك. وذلك باستخدام المعايير على النحو الخاص .

كيفية تسريع موقع الويب الخاص بك في 2022

هناك الكثير من العوامل التي تؤثر على المدة التي تستغرقها صفحات موقعك في التحميل، لذلك هناك العديد من الخطوات المختلفة التي يمكنك اتخاذها لزيادة سرعة موقعك وتحسين تجربة المستخدم .

في هذه المقالة ، سنستعرض أكثر من 20 نصيحة وأفضل الطرق التي يمكنك استخدامها لتقليل أوقات التحميل وتحسين أداء موقعك.

وإذا كان هذا الرقم يبدو كبيرا - فلا تقلق. وقسم العمل الى عدة ايام 

في الواقع ، إذا كنت قد عملت على تحسين سرعة موقعك في الماضي ، فقد يكون موقعك متوافقًا بالفعل مع بعض هذه الطرق.

 لنبدأ.

1. قلل طلبات HTTP

وفقًا لـ Yahoo ،  يتم اضاعة 80 ٪ من وقت تحميل صفحة الويب في تنزيل أجزاء مختلفة من الصفحة ، مثل الصور و الأنماط والنصوص.

لذا فكلما زاد عدد المكونات الموجودة على الصفحة ، زاد الوقت الذي تستغرقه الصفحة في التحميل.

تتمثل الخطوة الأولى لتقليل طلباتك في معرفة عدد طلبات موقعك حاليًا لاستخدامه كمعيار.

إذا كنت تستخدم Google Chrome ، فيمكنك استخدام أدوات المطور بالمتصفح لمعرفة عدد طلبات HTTP التي يقدمها موقعك.

انقر بزر الماوس الأيمن فوق الصفحة التي تريد تحليلها ، وانقر فوق "فحص او INSPECTER" ، ثم انقر فوق علامة التبويب "الشبكة". (إذا كنت لا ترى علامة التبويب "الشبكة" ، فقد تحتاج إلى توسيع الشريط الجانبي لأدوات المطور عن طريق سحب الحد الأيسر إلى اليمين.)

تسريع موقع الويب الخاص بك

يعرض عمود "الاسم" جميع الملفات على الصفحة ، ويعرض عمود "الحجم" حجم كل ملف ، ويعرض عمود "الوقت" المدة التي يستغرقها تحميل كل ملف.

في الزاوية اليسرى السفلية ، سترى أيضًا إجمالي عدد الطلبات التي يقدمها الموقع.

سيؤدي تقليل هذا العدد من الطلبات إلى تسريع موقعك والنظر في ملفاتك ومعرفة ما إذا كان أي منها غير ضروري.

قد لا تلاحظ أي شيء على الفور ، ولكن من المحتمل أن يكون بعضها مرشحًا رئيسيًا لتسريع التحميل - وهو ما سنصل إليه في الخطوات التالية.

2. تصغير ودمج الملفات

الآن بعد أن عرفت عدد الطلبات التي يقدمها موقعك ، يمكنك العمل على تقليل هذا العدد. أفضل مكان للبدء هو ملفات HTML و CSS و JavaScript.

هذه ملفات مهمة للغاية ، لأنها تحدد مظهر موقعك.

كما أنها تضيف إلى عدد الطلبات التي يقدمها موقعك في كل مرة يزورها المستخدم.

يمكنك تقليل هذا الرقم عن طريق "تصغير" ودمج ملفاتك. هذا يقلل من حجم كل ملف ، وكذلك العدد الإجمالي للملفات.

هذا مهم بشكل خاص إذا كنت تستخدم منشئ مواقع الويب النموذجي. هذه تجعل من السهل إنشاء موقع ويب ، لكنها في بعض الأحيان تخلق رمزًا فوضويًا يمكن أن يبطئ موقعك إلى حد كبير.

يتضمن تصغير الملف إزالة التنسيق غير الضروري والمسافة البيضاء والتعليمات البرمجية.

نظرًا لأن كل جزء غير ضروري من التعليمات البرمجية يضيف إلى حجم صفحتك ، فمن المهم التخلص من المسافات الزائدة وفواصل الأسطر والمسافات البادئة. هذا يضمن أن تكون صفحاتك خفيفة قدر الإمكان.

دمج الملفات هو بالضبط ما يبدو عليه الأمر. إذا كان موقعك يشغل عدة ملفات CSS وجافا سكريبت ، فيمكنك دمجها في ملف واحد.

هناك عدة طرق لتصغير الملفات ودمجها ، وإذا كان موقعك يعمل على WordPress ، فإن المكونات الإضافية مثل WP Rocket  تجعل العملية بسيطة إلى حد ما.

إذا كان لديك هذا المكون الإضافي مثبتًا ، فانتقل إلى علامة التبويب "الملفات الثابتة" وتحقق من الملفات التي تريد تصغيرها ودمجها.

تسريع موقع الويب الخاص بك تصغير

يمكن أن يشمل ذلك ملفات HTML و CSS وجافا سكريبت بالإضافة إلى خطوط Google.

ثم اضغط على "حفظ التغييرات" لإكمال العملية. يمكنك إعادة تحميل صفحتك وإلقاء نظرة على أدوات المطور مرة أخرى لمعرفة التأثير الذي أحدثته تغييراتك.

عندما يتعلق الأمر بموقعك على الأنترنت ، فإن الحجم الأصغر هو الأفضل. كلما قل عدد العناصر في الصفحة ، قل عدد طلبات HTTP التي سيحتاجها المتصفح لتقديم الصفحة - وكلما زادت سرعة تحميلها.

3. استخدم التحميل غير المتزامن لملفات CSS و JavaScript

بمجرد تصغير بعض ملفاتك ودمجها ، يمكنك أيضًا تحسين طريقة تحميلها على صفحاتك.

يمكن تحميل البرامج النصية مثل CSS و JavaScript بطريقتين مختلفتين: بشكل متزامن أو غير متزامن.

إذا تم تحميل البرامج النصية الخاصة بك بشكل متزامن ، فسيتم تحميلها واحدة تلو الأخرى ، بالترتيب الذي تظهر به على الصفحة. إذا تم تحميل البرامج النصية الخاصة بك بشكل غير متزامن ، من ناحية أخرى ، فسيتم تحميل بعضها في وقت واحد.

يمكن أن يؤدي تحميل الملفات بشكل غير متزامن إلى تسريع صفحاتك لأنه عندما يقوم المستعرض بتحميل صفحة ، فإنه ينتقل من أعلى إلى أسفل.

إذا وصل إلى ملف CSS أو JavaScript غير متزامن ، فسيتوقف عن التحميل حتى يتم تحميل هذا الملف المحدد بالكامل. إذا كان هذا الملف نفسه غير متزامن ، يمكن للمتصفح متابعة تحميل العناصر الأخرى على الصفحة في نفس الوقت.

باستخدام نفس علامة التبويب "Static Files" في المكون الإضافي WP Rocket ، تحقق من الخيارات الموجودة بجوار "Render-blocking CSS / JS."

تسريع حجب موقع الويب الخاص بك

انقر على "حفظ التغييرات" ، ثم اختبر موقعك للتأكد من تحميل كل شيء بشكل صحيح.

4. تأجيل تحميل JavaScript

يعني تأجيل الملف منعه من التحميل إلى ما بعد تحميل العناصر الأخرى. إذا قمت بتأجيل الملفات الكبيرة ، مثل JavaScript ، فإنك تضمن إمكانية تحميل باقي المحتوى الخاص بك دون تأخير.

إذا كان لديك موقع WordPress ، فيمكنك استخدام المكون الإضافي WP Rocket المذكور أعلاه لتمكين تحميل JavaScript المؤجل بسهولة. ما عليك سوى تحديد المربع بجوار "تحميل ملفات JS مؤجلة" ، وأنت انتهية من العمل .

إذا كان لديك موقع HTML مثل بلوجر ، فستحتاج إلى إجراء استدعاء لملف جافا سكريبت خارجي قبل العلامة </body> مباشرة ، والتي تبدو كالتالي:

تسريع موقع الويب الخاص بك js

5. تقليل الوقت التحميل بالنسبة للبايت الأول

بالإضافة إلى مقدار الوقت الذي يستغرقه تحميل صفحتك بالكامل ، ستحتاج أيضًا إلى إلقاء نظرة على مقدار الوقت المستغرق لبدء التحميل.

وقت تحميل البايت الأول ، أو TTFB ، هو مقدار الوقت الذي يجب على المتصفح أن ينتظره قبل الحصول على البايت الأول من بيانات الخادم. توصي Google باستخدام TTFB أقل من 200 ملي ثانية .

على عكس الكثير من عوامل الأداء التي يركز عليها معظم مالكي المواقع ، فإن هذا مصدر قلق من جانب الخادم.

عندما يزور مستخدم موقعك الإلكروني ، يرسل متصفحه طلب HTTP إلى الخادم الذي يستضيفه. هناك ثلاث خطوات يجب أن تحدث بين هذا الطلب الأولي والبايت الأول من البيانات:

  1. بحث DNS
  2. معالجة الخادم
  3. الإستجابة

يمكنك معرفة المدة التي تستغرقها هذه العملية لموقعك باستخدام أدوات مطوري Chrome أو أداة خارجية.

إذا كنت تستخدم أدوات المطور ، فمن المهم أن تتذكر أن وقت الاستجابة يمكن أن يتأثر باتصالك بالإنترنت. لذلك كلما كان اتصالك أبطأ ، ستظهر استجابة الخادم بشكل أبطأ.

للوصول إلى هذه المعلومات في أدوات المطور ، انقر فوق علامة التبويب "الشبكة" ومرر الماوس فوق العنصر العلوي.

تسريع موقع الويب الخاص بك ttfb chrome

يمكنك أيضًا استخدام أي عدد من أدوات الجهات الخارجية المجانية مثل WebPageTest  لاختبار موقعك من مركز بيانات.

تسريع اختبار موقع الويب الخاص بك

إذا كان TTFB أقل من 200 مللي ثانية ، فأنت في حالة جيدة.

إذا لم يكن الأمر كذلك ، فقد يكون هناك عدد قليل من المشكلات المختلفة في الجذر.

بشكل عام ، تحدث معظم مشكلات TTFB البطيئة  بسبب مشكلات الشبكة وإنشاء المحتوى الديناميكي وتكوين خادم الويب وحركة المرور.

أسباب ttfb

من بين هذه العوامل الأربعة ، يمكنك التحكم في عاملين: إنشاء المحتوى الديناميكي وتكوين الخادم.

بخلاف الصفحات الثابتة ، يحتاج الخادم إلى "إنشاء" ملف ديناميكي قبل الاستجابة.

ديناميكية ثابتة

إذا كان لديك موقع WordPress ، فمن المرجح أن تكون صفحاتك ديناميكية. هذا يعني أنهم بحاجة إلى التفاعل مع قاعدة بيانات ليتم "بناؤها" باستخدام PHP قبل تسليمها.

يمكنك تقليل الوقت الذي يستغرقه ذلك عن طريق تمكين التخزين المؤقت - والذي سنصل إليه في الأسطر القادمة.

6. تقليل وقت استجابة الخادم

أحد أكبر العوامل في سرعة تحميل صفحتك هو مقدار الوقت الذي يستغرقه بحث DNS.

DNS ، أو نظام اسم المجال ، هو خادم يحتوي على قاعدة بيانات لعناوين IP وأسماء المضيف المرتبطة بها. عندما يكتب المستخدم عنوان URL في متصفحه ، فإن خادم DNS هو ما يترجم عنوان URL هذا إلى عنوان IP الذي يشير إلى موقعه على الإنترنت.

إن بحث DNS هو عملية العثور على سجل DNS محدد. يمكنك التفكير في الأمر على أن جهاز الكمبيوتر الخاص بك يبحث عن رقم في دفتر الهاتف.

على سبيل المثال ، لنفترض أنك تريد زيارة عنوان URL ubnt.com. 

سيقوم موفر خدمة الإنترنت بإجراء بحث DNS للعثور على عنوان IP المرتبط بعنوان URL هذا.

تسريع نظام أسماء النطاقات موقع الويب الخاص بك

سيحصل على عنوان IP مثل 52.40.57.158.443 ، والذي يخبره بمكان العثور على الموقع الذي تبحث عنه. تمنع هذه الخطوة المستخدمين من الحاجة إلى حفظ سلاسل طويلة من الأرقام للوصول إلى المعلومات عبر الإنترنت.

يعتمد مقدار الوقت الذي تستغرقه هذه الخطوة على مدى سرعة مزود DNS الخاص بك. إذا لم يكن الأمر كذلك ، فقد حان الوقت للتبديل إلى مزود DNS أسرع.

يمكنك التحقق من تقرير مقارنة سرعة DNS هذا ، والذي يتم تحديثه شهريًا ، للحصول على فكرة عن مكان تكدس مزود الخدمة الخاص بك ، ومعرفة أي من المزودين يقدمون سرعات أعلى.

تسريع مزود موقع الويب الخاص بك

إذا كنت تستخدم DNS بطيئًا ، فهذا يزيد من الوقت الذي تستغرقه المتصفحات لتحديد موقع موقعك. يمكن أن يؤدي التبديل إلى مزود DNS الأسرع إلى تسريع العملية.

7. اختر الاستضافة المناسبة لاحتياجاتك

يختار معظم مالكي المواقع الجدد أرخص خيار ممكن للاستضافة. على الرغم من أن هذا غالبًا ما يكون كافيًا في البداية ، إلا أنك ستحتاج على الأرجح إلى الترقية بمجرد أن تبدأ في الحصول على المزيد من الزيارات . لا تبخل على مضيفك ، احصل على واحد يمكنك الوثوق به.

عند النظر إلى الاستضافة ، لديك ثلاثة خيارات مختلفة:

  • الاستضافة المشتركة
  • استضافة VPS
  • خادم مخصص

الاستضافة المشتركة هي الخيار الأرخص ويمكنك غالبًا الحصول عليها مقابل خمسة دولارات شهريًا. على الرغم من أنه أمر جيد بالنسبة للمواقع ذات حركة المرور المنخفضة ، إلا أن الاستضافة المشتركة تكافح لمواكبة طفرات المرور والمواقع ذات الحجم الكبير. ومن الممكن أن يتأثر موقعك بارتفاع حركة المرور من المواقع الأخرى التي تستخدم نفس الخادم مثلك.

باستخدام الاستضافة المشتركة ، يمكنك مشاركة موارد معينة مثل وحدة المعالجة المركزية ومساحة القرص وذاكرة الوصول العشوائي مع مواقع أخرى مستضافة على نفس الخادم.

باستخدام استضافة VPS ، لا تزال تشارك خادمًا مع المواقع الأخرى ، ولكن لديك أجزاء مخصصة من موارد الخادم. هذا خيار جيد . لانه يحمي موقعك تسريع موقع الويب الخاص بك المشترك مقابل استضافة vps

باستخدام خادم مخصص ، لديك مساحة أكبر بكثير - ولكن لديك أيضًا المزيد من العمل للقيام به فيما يتعلق بالتكوين والإعداد الفني.

vps مخصص

إذا كنت بحاجة إلى مساحة كبيرة وتريد التحكم الكامل في استضافتك ، فهذا هو أفضل حل لك.

لكنه الخيار الأغلى ثمناً بطبيعة الحال.

إذا كانت  حركة المرور الخاصة بك عالية وتأدي إلى إبطاء أوقات استجابة الخادم ، فقد حان الوقت للتبديل من الاستضافة المشتركة إلى VPS ، أو من VPS إلى خادم مخصص.

8. قم بضغط ملفاتك

من مصلحتك أن تحصل على ملفات في أصغر حجم ممكن لها دون التضحية بالجودة. كلما كانت ملفاتك أصغر ، زادت سرعة تحميلها - وستكون أوقات التحميل الإجمالية أقل.

غالبًا ما يصل حجم الصفحات التي تحتوي على الكثير من الصور والمحتويات الأخرى إلى أكثر من 100 كيلوبايت. نتيجة لذلك ، فهي ضخمة وبطيئة في التنزيل.

يمكنك تسريع أوقات تحميل الصفحة عن طريق ضغطها.

للتعرف على الكيفية التي يمكن أن يؤدي بها الضغط إلى تسريع موقعك ، يمكنك استخدام GIDNetwork  لمعرفة الملفات المضغوطة والغير مضغوطة.

ما عليك سوى إدخال عنوان URL الخاص بك والنقر على "تحقق". إذا لم تكن الصفحة التي ادخلتها مضغوطة ، فسترى شيئًا مثل هذا:

اختبار gid

يخبرك هذا بالحجم غير المضغوط لصفحتك ، والذي يمكنك استخدامه لاحقًا كمعيار لقياس نتائج الضغط.

أسفل ذلك ، سترى تحليلاً لمدى إمكانية تقليل حجم الصفحة من حيث الحجم والنسبة المئوية باستخدام أداة مثل Gzip (والتي سنصل إليها في الخطوة التالية).

سيناريو gid

يتضمن هذا الضغط ملفات HTML و CSS و JavaScript ونص عادي وملفات XML.

9. آدات الضغط 

كلما كانت ملفاتك أصغر ، زادت سرعة تحميل صفحاتك. يعد ضغط الملفات أحد أسهل الطرق لتقليل أوقات التحميل ، واليوم ، يعتبر تمكين الضغط باستخدام Gzip  ممارسة جد فعالة.

Gzip هو تنسيق ملف وتطبيق برمجي يحدد بشكل أساسي سلاسل من التعليمات البرمجية المماثلة في ملفاتك النصية ، ثم يستبدلها مؤقتًا لجعل الملفات أصغر.

يعمل هذا بشكل جيد مع CSS و HTML ، لأن هذه الملفات عادةً ما تحتوي على تعليمات برمجية متكررة ومسافات بيضاء.

يمكن لمعظم خوادم الويب ضغط الملفات بتنسيق Gzip قبل إرسالها للتنزيل ، إما عن طريق الاتصال بوحدة تابعة لجهة خارجية أو باستخدام إجراءات مضمنة. وفقًا لـ Yahoo ، يمكن أن يقلل هذا من وقت التنزيل بنحو 70٪ .

ونظرًا لأن 90٪ من حركة مرور الإنترنت اليوم تنتقل عبر المتصفحات التي تدعم Gzip ، فهو خيار رائع لتسريع موقعك.

إذا لم تكن متأكدًا من تمكين Gzip في موقعك ، فيمكنك استخدام checkgzipcompression.com  لمعرفة ذلك. ما عليك سوى إدخال عنوان URL لموقعك ، وإذا قمت بالضغط عن طريق Gzip ، فسترى شيئًا مثل هذا:

تحقق من gzip

إذا لم يكن لديك Gzip ممكّنًا ، فستحتاج إلى إصلاح هذا في أقرب وقت ممكن.

إذا كان موقعك يعمل على WordPress ، فإن كلاً من إضافات WP Rocket و W3 Total Cache تدعم تمكين Gzip.

في W3 Total Cache ، كل ما عليك فعله هو تحديد المربع بجوار "تمكين ضغط HTTP (gzip)".

w3 gzip

ومع ذلك ، إذا كان لديك موقع HTML ثابت ، فستحتاج إلى تمكين Gzip في ملف htaccess الخاص بك. يعتمد الرمز الدقيق الذي تحتاجه على الخادم الخاص بك ، ولكن إذا كان موقعك يعمل على بلوجر  ، على سبيل المثال ، فسيبدو كما يلي:

gzip اباتشي


10. تمكين التخزين المؤقت للمتصفح

عند زيارة أحد مواقع الويب ، يتم تخزين العناصر الموجودة على الصفحة التي تزورها على محرك الأقراص الثابتة في ذاكرة تخزين مؤقت أو تخزين غير مؤقت.

هذا يعني أنه في المرة التالية التي تزور فيها الموقع ، يمكن لمتصفحك تحميل الصفحة دون الحاجة إلى إرسال طلب HTTP آخر إلى الخادم.

إليك كيف يشرح Tenni Theurer ، الذي كان يعمل سابقًا في Yahoo:

في المرة الأولى التي يأتي فيها شخص ما إلى موقع الويب الخاص بك ، يجب عليه تنزيل مستند HTML و الأنماط وملفات جافا سكريبت والصور قبل التمكن من استخدام صفحتك. قد يكون ذلك ما يصل إلى 30 مكونًا و 2.4 ثانية.

الصورة الملصقة 0 3

بمجرد تحميل الصفحة وتخزين المكونات المختلفة في ذاكرة التخزين المؤقت للمستخدم ، لا يلزم تنزيل سوى عدد قليل من المكونات للزيارات اللاحقة.

في اختبار Theurer ، كان هذا مجرد ثلاثة مكونات و 0.9 ثانية ، مما أدى إلى تقليل وقت التحميل بمقدار ثانيتين تقريبًا.

الصورة الملصقة 0 13

يقول Theurer أن 40-60٪ من زوار موقعك يوميًا يأتون بذاكرة تخزين مؤقت فارغة ، لذلك من المهم أن تجعل صفحتك سريعة لهؤلاء الزائرين لأول مرة. لكن تمكين التخزين المؤقت يمكن أن يختصر قدرًا كبيرًا من الوقت من عودة الزوار ويوفر تجربة مستخدم أفضل.

تعتمد طريقة إعداد التخزين المؤقت على ما إذا كنت تقوم بتشغيل موقعك باستخدام WordPress أو HTML ثابت.

قم بزيادة سرعة موقع الويب الخاص بك في WordPress باستخدام W3 Total Cache

إذا قمت بتشغيل موقع WordPress ، فيمكنك استخدام مكون إضافي مثل W3 Total Cache  لتمكين التخزين المؤقت بسهولة.

بمجرد تثبيته ، انتقل إلى "ذاكرة التخزين المؤقت للصفحة" ضمن "الإعدادات العامة" وحدد المربع بجوار "تمكين".

w3 صفحة مخبأ

يجب أن تمنحك هذه الخطوة البسيطة من تلقاء نفسها دفعة في أداء الموقع - ولكن هناك المزيد الذي يمكنك القيام به لتحسين نتائجك باستخدام المكون الإضافي.

يتيح لك تمكين التخزين المؤقت للمتصفح تخزين نسخة مخبأة من موقعك في متصفح الزائر. هذا يعني أنه عندما يعود المستخدم إلى موقعك ، سيتم تحميل موقعط بشكل أسرع.

يمكنك تمكين هذا الخيار بالانتقال إلى الإعدادات العامة> ذاكرة التخزين المؤقت للمتصفح وتحديد  "تمكين".

مخبأ المتصفح

إذا كنت تستخدم خادم VPS أو خادمًا مخصصًا ، فيمكنك أيضًا تمكين التخزين المؤقت لتسريع العناصر الديناميكية على موقعك.

هذه الميزة موجودة أيضًا ضمن الإعدادات العامة.

كائن مخبأ

إذا كنت تستخدم خادمًا مشتركًا ، فمن الأفضل ترك هذا الخيار معطلاً. التخزين المؤقت للكائن هو عملية كثيفة الموارد ويمكن أن يؤدي في النهاية إلى إبطاء موقعك - ​​وهو عكس ما تريد تحقيقه باستخدام المكون الإضافي.

بمجرد تكوين الإعدادات الخاصة بك ، من المفترض أن ترى تحسينات في أوقات التحميل على الفور. تدعي W3 Total Cache أن مستخدميها قد شهدوا تحسينات 10x في نتائج Google PageSpeed ​​، وما يصل إلى 80٪ في توفير عرض النطاق الترددي بعد تكوين المكون الإضافي بالكامل.

إذا كان لديك موقع HTML ثابت ، فيمكنك تمكين التخزين المؤقت في ملف htaccess الخاص بك.

يمكنك إضافة سطور من التعليمات البرمجية التي تخبر المتصفحات بما يجب تخزينه في ذاكرة التخزين المؤقت ومدة تخزينه ، والتي ستبدو كما يلي:

تسريع موقع الويب الخاص بك في التخزين المؤقت htaccess

يتيح لك هذا تعيين مقدار الوقت الذي تريد أن يتم فيه تخزين كل نوع من الملفات في ذاكرة التخزين المؤقت للزائر.

بشكل عام ، يجب أن تتمتع الموارد الثابتة بذاكرة تخزين مؤقت لمدة أسبوع على الأقل. يجب أن تتمتع موارد الجهات الخارجية ، مثل الإعلانات أو الأدوات ، بذاكرة تخزين مؤقت لمدة يوم واحد على الأقل.

بالنسبة لجميع الموارد القابلة للتخزين المؤقت مثل ملفات JavaScript و CSS وملفات الصور وملفات الوسائط وملفات PDF ، قم بتعيين التخزين المؤقت بين أسبوع واحد وسنة واحدة على الأقل.

11. تقليل أحجام الصور

يمكن أن تلعب الصور دورًا رئيسيًا في سرعة موقعك. غالبًا ما تكون ذات احجام كبيرة جدًا ، مما قد يؤدي إلى إبطاء وقت تحميل الصفحة.

لكن إزالتها تمامًا ليس خيارًا يصب في صالحك.

ضع في اعتبارك : متوسط ​​تحويلات مواقع التجارة الإلكترونية يحوم حول 1الى3 ٪ من الصور

ولكن يمكن أن يرتفع هذا الرقم بنسبة تصل إلى 5 بالمائة لبعض المواقع ، مثل NatoMounts  - التي ترى متوسط ​​معدل تحويل حوالي خمسة بالمائة ، مع ما يقرب من 85 بالمائة من هذه التحويلات على الجوّال.

من أفضل الطرق للحصول على معدل تحويل مرتفع يصل لهذا المستوى تضمين الكثير من صور المنتج المفيدة. في أحد الاستطلاعات ، قال 66٪ من المستهلكين  أنهم يريدون رؤية ثلاث صور للمنتج على الأقل قبل الشراء.

هذا يعني أنه إذا كنت ترغب في العمل على موقع تجارة إلكترونية ناجح ، فإن الصور ضرورية للغاية.

هذا يعني أيضًا أن ضغط الصور أمر بالغ الأهمية  - وهذا مهم سواء كان موقعك يتضمن متجرًا للتجارة الإلكترونية أم لا.

يمكنك معرفة حجم تأثير الصور على أي صفحة من صفحاتك باستخدام أداة مثل Pingdom . قم بإجراء اختبار سرعة الصفحة ، ثم انظر إلى "الطلبات حسب نوع المحتوى".

في هذا المثال ، يمكنك أن ترى أن الصور تشكل أكثر من 40٪ من محتوى الصفحة .

النسبة المئوية للصورة

هنا نسنتنتج ان حجمها له تأثير كبير على مدى الوقت الذي تستغرقه الصفحة للتحميل.

في الواقع ، في إحدى الدراسات ، أدى تغيير حجم 22 ميجابايت من الصور إلى 300 كيلوبايت إلى تقليل وقت التفاعل بنسبة 70٪ ، أو مقدار الوقت الذي يحتاجه المستخدم للانتظار قبل أن يتمكن من التفاعل مع الموقع.

تأثير ضغط الصورة

من أسهل الطرق لتقليل أحجام ملفات الصور اقتصاص الصور إلى الحجم الصحيح. على سبيل المثال ، إذا كنت تريد أن تظهر الصورة بعرض 570 بيكسل ، فقم بتغيير حجم الصورة إلى هذا العرض.

لا تقم فقط بتحميل صورة بعرض 2000 بكسل واضبط العرض بالحجم الذي تريده. يتطلب هذا أن تقوم صفحتك بتحميل الصورة كاملة ، ثم ضبطها على الحجم المناسب ، مما يؤدي إلى إبطاء صفحتك.

إذا كنت تستخدم العرض لجعل الصور تظهر أصغر حجمًا على موقعك ، فيجب أن يكون تغيير حجم تلك الصور أولوية. إنها طريقة سهلة لتقليل الحجم الإجمالي لكل صفحة ويمكن أن يكون لها تأثير كبير على سرعة موقعك.

بعد ذلك ، يمكنك ضغط الصور الخاصة بك باستخدام بعض الأدوات المختلفة.

إذا كان موقعك يعمل على WordPress ، فإن WP Smush  يعد خيارًا رائعًا.

حدد المربع بجوار "مسح صوري تلقائيًا عند التحميل" ، وسيتم ضغط جميع صورك الجديدة تلقائيا.

يمكنك أيضًا استخدام هذا المكون الإضافي لتغيير حجم جميع الملفات الجديدة التي تحملها تلقائيًا. عيّن الحد الأقصى للعرض والارتفاع ، وسيتم "مسح" أي صور تتجاوزهما.

تسريع موقع الويب الخاص بك wp smush

إذا كنت لا تستخدم WordPress ، فيمكنك استخدام أداة غير تابعة لـ WordPress مثل Compressor.io.

قبل إضافة صورة إلى موقعك ، قم بتحميلها في هذه الأداة وحدد ما إذا كنت تريد ضغطًا مع فقدان البيانات أم لا.

ضاغط io

(إذا لم تكن متأكدًا من الأفضل ، فاستمر في القراءة - سنصل إلى ذلك في الاسطر القادمة.)

نتائج ضاغط io

بعد حفظ ملف الصورة الجديد ، يمكنك تحميله على موقعك.

بعد ذلك ، ستحتاج أيضًا إلى التأكد من أنك تستخدم أنواع الملفات المناسبة لكل صورة. قد يبدو هذا مصدر قلق بسيط ، لكن أنواع الملفات التي تستخدمها يمكن أن تؤثر على حجم كل ملف.

لديك بعض الخيارات المختلفة والأكثر شيوعًا هي JPG و PNG و GIF .

أنواع ملفات الصور

يعد JPG بشكل عام أفضل خيار لك للصور. يستخدم ضغطًا مع فقدان البيانات ، مما يعني أن بعض بيانات الصورة تُفقد عند حفظها بهذا التنسيق.

لا يمكن اكتشاف فقدان البيانات هذا للمشاهدين في الصور ، ولكنه ينتج عنه حجم ملف أصغر بالنسبة لمختلف أنواع ملفات الصور الأخرى.

لذلك إذا كنت تقوم بتحميل صفحات بها الكثير من الصور ، فتأكد من أنها بصيغة JPG كلها، يمكن أن تقلل بشكل كبير من أوقات التحميل ، دون التأثير على مظهرها على الإطلاق.

من ناحية أخرى ، تستخدم ملفات PNG الضغط بدون فقدان البيانات. هذا يعني أنه عند حفظ صورة بتنسيق PNG ، فلن تفقد أي بيانات ، ويكون حجم الملف الناتج أكبر من JPG.

إذا كنت بحاجة إلى خطوط واضحة وتفاصيل واضحة ، فإن PNG هي السبيل لذلك. وهو الخيار الأفضل للشعارات ولقطات الشاشة والرسم الخطي والرسومات التفصيلية الأخرى.

أخيرًا ، يجب استخدام ملفات GIF فقط للرسومات الصغيرة أو البسيطة التي يقل حجمها عن 10 × 10 بيكسل ، ولوحة الألوان المكونة من 3 ألوان أو أقل ، وللصور المتحركة.

بمجرد حصولك على أحجام وتنسيقات الصور الخاصة بك بشكل صحيح ، يمكنك التأكد من أن الكود الذي تستخدمه لتنفيذها صحيح أيضًا. على وجه الخصوص ، تأكد من تجنب أكواد src للصورة الفارغة.

في HTML ، تتضمن التعليمات البرمجية الخاصة بالصورة ما يلي:

<img src = ””>

عندما لا يكون هناك مصدر بين علامات الاقتباس ، يقوم المتصفح بتقديم طلب إلى دليل الصفحة أو إلى الصفحة الفعلية نفسها. هذا يمكن أن يضيف حركة مرور غير ضرورية إلى الخوادم الخاصة بك.

لحسن الحظ ، هذا حل سهل. قم إما بإضافة مسار ملف الصورة التي تريد تضمينها ، أو إزالة العلامات الإضافية تمامًا.

12. استخدم CDN

بالإضافة إلى الخادم الذي يستضيف موقعك ، يمكنك أيضًا استخدام شبكات خوادم أخرى لتقليل أوقات التحميل للزائرين.

عندما يكون موقعك مستضافًا على خادم واحد ، يرسل كل مستخدم يزوره طلبات إلى نفس الخادم.

هذا يعني أنه عندما يواجه موقعك مستويات عالية من حركة المرور ، فإن الوقت المستغرق لمعالجة كل طلب يزداد ، مما يؤدي إلى إبطاء أوقات التحميل لكل منهم.

عندما تفكر في أن حركات المرور المرتفعة تقدم عادةً الكثير من امكانية النمو لعملك ، فهذا بعيد كل البعد عن الصحة.

باستخدام CDN ، يمكنك تخزين موقعك مؤقتًا على شبكة عالمية من الخوادم. عندما يطلب مستعرض المستخدم ملفات من موقعك ، يتم توجيه هذا الطلب إلى أقرب خادم.

على سبيل المثال ، لنفترض أن خادمك الأصلي موجود في كاليفورنيا ، ولكنه يستخدم CDN لاستضافة الملفات عالميًا. قد تبدو شبكتك كما يلي:

خريطة cdn

إذا قام مستخدم من جنوب إفريقيا بزيارة موقعك ، فيمكن لمتصفحه تنزيل الملفات من خادم قريب.

المحتوى الذي يستقبله المستخدم متطابق ، ولكن يمكن تحميله بشكل أسرع بكثير مما لو كان المتصفح يقدم طلبات إلى خادم كان بعيدًا جغرافيًا. يؤدي ذلك إلى التخلص من تأخيرات التحميل ومشكلات زمن الوصول التي يواجهها المستخدمون بعيدًا عن خوادم الاستضافة في بعض الأحيان.

في إحدى التجارب ، أبلغت VentureHarbor عن انخفاض في وقت التحميل يتراوح بين 20-51٪  - لمدة 20 دقيقة من العمل.

ventureharbor cdn

تختلف التحسينات الدقيقة بين الصفحات ، حيث تستفيد الصفحات التي تحتوي على الكثير من الصور الكبيرة من CDN.

إذا كنت تريد البدء في استخدام CDN ، فإن أفضل خياراتك هي MaxCDN  و Cloudflare .

MaxCDN عبارة عن CDN كامل ، مما يعني أنه  يقدم خدمات CDN فقط . لديهم المزيد من مراكز البيانات ويركزون فقط على تحسين أوقات التحميل.

من ناحية أخرى ، تجمع Cloudflare بين خدمة CDN وميزات الأمان والتحسين.

يعتمد الخيار الذي تختاره على ما إذا كنت تريد هذه الميزات الإضافية ، أو تريد فقط التركيز على تحسين السرعة.

وفي كلتا الحالتين ،  تعد عملية سريعة إلى حد ما.

إذا ذهبت الى MaxCDN ، اتبع الخطوات

الصورة الملصقة 0 2

بعد ذلك ، انقر على "إنشاء منطقة سحب".

تسريع مناطق سحب موقع الويب الخاص بك

هنا ، ستحتاج إلى إدخال عنوان URL الأصلي للخادم الخاص بك ، بالإضافة إلى اسم وتسمية منطقة السحب الخاصة بك.

الصورة الملصقة 0 4

بعد النقر فوق إنشاء ، سترى عنوان URL لشبكة CDN الخاصة بك ، مثل cdn.yourdomain.netdna-cdn.com. انسخ هذا في المفكرة ، أو في مكان آخر يسهل الوصول إليه. (ستحتاجه في غضون بضع دقائق.)

بعد ذلك ، ستحتاج إلى إنشاء "منطقة محتوى" بالنقر فوق الزر "إدارة" بجوار منطقة السحب الخاصة بك. انقر فوق "إعدادات" وأدخل عدة نطاقات فرعية في حقول "المجالات المخصصة".

يجب أن تكون هذه عادةً cdn.yourdomain.com و cdn1.yourdomain.com و cdn1.yourdomain.com و cdn3.yourdomain.com وما إلى ذلك.

الصورة الملصقة 0 11

(يعد تنسيق التسمية هذا ممارسة قياسية وسيكون من الأسهل تذكره إذا واجهت مشكلات أو احتجت إلى استشارة مطور.)

يمكنك إضافة ما يصل إلى سبعة نطاقات مخصصة ، ثم النقر على "تحديث".

بعد ذلك ، ستحتاج إلى إضافة CDN الجديد إلى موقعك من خلال محرر DNS الخاص بموفر الاستضافة. يختلف الموقع الدقيق باختلاف المزود ، ولكن في معظم الحالات ، يمكنك العثور على محرر DNS ضمن قائمة "المجالات".

في Bluehost ، تسمى هذه القائمة "محرر المنطقة". إذا كنت تستخدم Bluehost ، فستبدو الحقول التي تحتاجها بهذا الشكل.

تسريع موقع الويب الخاص بك Bluehost cname

أدخل عنوان URL الذي قدمته MaxCDN (تم نسخه ولصقه من المفكرة) ، واضبط النوع على "CNAME" ، وأحد نطاقات CDN المخصصة التي أنشأتها (مثل cdn.yourdomain.com).

ثم كرر هذه العملية لجميع المجالات الفرعية الخاصة بك.

انتهينا!

وإذا كنت تريد استخدام Cloudflare ، فستكون العملية أبسط .

انقر فوق زر "التسجيل" في صفحتهم الرئيسية ، ثم قم بإنشاء حساب. أدخل المجال الخاص بك وانقر فوق "بدء الفحص".

الصورة الملصقة 0 8

يستغرق هذا الأمر حوالي دقيقة واحدة ، وستستغرق جميع سجلات DNS الخاصة بك ، بما في ذلك أي نطاقات فرعية. يمكنك تحديد أي منها تريد تمكينه.

تسريع سجلات نظام أسماء النطاقات لموقع الويب الخاص بك

حدد الخطة التي تريدها ، ثم انقر على "معالجة ومتابعة".

بعد ذلك ، سترى خوادم أسماء Cloudflare لمجالك. بعد ذلك ، ستحتاج إلى تحديث خوادم الأسماء لنطاقك.

ستحتاج إلى القيام بذلك من خلال مسجل المجال الخاص بك. قم بتسجيل الدخول إلى المسجل الخاص بك وانتقل إلى سجلات خادم الأسماء الخاصة بك.

هذا يختلف لكل مسجل. باستخدام Bluehost ، على سبيل المثال ، يمكنك العثور عليه من خلال الانتقال إلى "Domain Manager" ، ثم النقر فوق علامة التبويب "Name Server".

اسم Bluehost

بعد ذلك ، قم بتبديل تفضيلاتك إلى "Use Custom Nameservers" وانسخ والصق خادم الأسماء الذي توفره Cloudflare.

احفظ التغييرات ، ثم ارجع إلى لوحة معلومات Cloudflare للتحقق من أنك قمت بتثبيت CDN الخاص بك بشكل صحيح. انقر فوق علامة التبويب "نظرة عامة" ، وإذا كان CDN الخاص بك قيد التشغيل ، فسترى رمز الحالة "نشط".

الصورة الملصقة 0 9

إذا كان الأمر كذلك ، فإن CDN الخاص بك يعمل!

الخطوة الأخيرة التي تريد اتخاذها هي التحقق من أن سجلات SSL الخاصة بك في مكانها الصحيح. انقر فوق علامة التبويب "تشفير" للتحقق من أن سجلات SSL في مكانها الصحيح. يجب أن تشاهد واحدًا لمجال الجذر الخاص بك ، وسجل نطاق فرعي واحد.

إذا لم تشاهد هذه السجلات حتى الآن ، فقد يستغرق ظهورها 24 ساعة.

ولكن بمجرد القيام بذلك ، فإن شبكة CDN الخاصة بك تخدم الإصدار الآمن من موقعك - ​​تمامًا مثل خادمك الأصلي.

13. استخدام منصات الاستضافة الخارجية

بالإضافة إلى استضافة ملفات موقعك على CDN ، يمكنك أيضًا استخدام منصات استضافة خارجية لبعض ملفاتك الكبيرة.

مفيد جدا لمقاطع الفيديو.

على سبيل المثال ، لنفترض أنك تريد إضافة فيديو تعليمي إلى موقعك. يمكنك إنشاء ملف الفيديو وتحريره وتصديره.

ماذا الآن؟

قد تكون فكرتك الأولى هي تحميل الفيديو مباشرة إلى موقعك عبر محرر FTP أو WordPress.

لا تفعل هذا.

عندما تستضيف مقاطع فيديو على الخادم الخاص بك ، فإنها تشغل مساحة كبيرة. يمكن أن تشغل ملفات الفيديو أكثر من 100 ميغا بايت بسهولة.

إذا كنت تستخدم خادمًا مشتركًا ، فلديك مساحة محدودة. يمكن أن تجعلك مقاطع الفيديو تتجاوز هذا الحد بسرعة.

في بعض الحالات ، قد تنتهك ملفات الفيديو الكبيرة شروط الاستخدام المقبول الخاصة بك ، والتي يمكن أن تنتهي بإغلاق حساب الاستضافة الخاص بك تمامًا.

وحتى إذا كان بإمكانك تحميل مقاطع فيديو كبيرة إلى مزود الاستضافة ، فمن المحتمل أن توفر تجربة مستخدم سيئة.

إذا حاول عدة مستخدمين مشاهدة مقطع فيديو على موقعك في نفس الوقت ، فسيحتاج خادمك إلى تسليم هذا الملف الضخم إليهم جميعًا. إذا كان الخادم الخاص بك يحتوي على قدر محدود من النطاق الترددي ، فقد يؤدي ذلك إلى تأخيرات وتوقف مؤقت في التشغيل.

إذا حاولت في أي وقت مشاهدة مقطع فيديو وتوقف بضع ثوانٍ للتحميل ، فأنت تعلم كيف يكون هذا الأمر محبطًا.

لا تفعل ذلك لزوارك.

بدلاً من ذلك ، اضف مقطع الفيديو الخاص بك على جهة خارجية مثل YouTube أو Vimeo أو Wistia .

بعد ذلك ، قم بتضمين الفيديو على موقعك.

توفر هذه العملية مساحة ، وتؤدي إلى أوقات تحميل أسرع ، كما أنها سهلة للغاية.

أصعب جزء فيها هو اختيار المصة التي تريد استخدامها.

موقع يوتيوب

عندما يفكر معظم الناس في الفيديو عبر الإنترنت ، فإنهم يفكرون في موقع YouTube. إنه أحد أكثر المواقع شهرة في العالم ، مع قاعدة مستخدمين تزيد عن 1.5 مليون شخص  يشاهدون ما يقارب 5 مليارات مقطع فيديو يوميًا.

هذا يعني أن لديها عدد مستخدمين أكثر من أي منصة اخرى بإستثناء facebook.

مستخدمي YouTube شهريًا

كما أنه مجاني تمامًا للاستخدام.

أكبر ميزة لموقع YouTube هي أنه يمكن أن يساعدك في الوصول إلى جمهور أكبر. إذا كنت ترغب في استخدام الفيديو لزيادة الوعي بعلامتك التجارية وإرسال حركة المرور إلى موقعك ، فهو خيار رائع.

إذا كنت ترغب فقط في تضمين مقاطع الفيديو على موقعك ، ولا تهتم بشهرتها ، فقد لا يكون اليوتيوب مهمًا.

يتمثل الجانب السلبي الملحوظ في YouTube في أنه يحتوي على حد مدته 15 دقيقة لمعظم مقاطع الفيديو. إذا كنت ترغب في تحميل محتوى أطول ، فستحتاج إلى تقديم طلب لزيادة الحد - لذلك إذا كان هذا شيئًا ستفعله بشكل منتظم ، فقد لا يكون الخيار الأفضل لك.

Vimeo 

بعد YouTube ، يعد Vimeo ثاني أكبر منصة لاستضافة الفيديو مع 715 مليون مشاهدة شهريًا .

لذا في حين أنه لا يزال بإمكانه عرض مقاطع الفيديو الخاصة بك أمام جمهور جديد ، فإن جمهورك المحتمل أصغر مما سيكون عليه في YouTube.

على الجانب الإيجابي ، يبدو مشغل الفيديو أفضل من مشغل YouTube.

مشغل vimeo

من المهم أن نلاحظ ، مع ذلك ، أن Vimeo لديه حدود تحميل للمحتوى.

بينما تسمح لك العضوية الأساسية بتحميل 500 ميجابايت أسبوعيًا ، وما يصل إلى إجمالي 5 جيجابايت ، تتراوح خططهم الثلاثة المدفوعة من 7 دولارات إلى 50 دولارًا في الشهر ، مع سعة تخزين تتراوح من 250 جيجابايت إلى 5 تيرابايت.

Wistia

يختلف Wistia قليلاً عن YouTube و Vimeo من حيث أنه مصمم مع وضع التسويق في الاعتبار.

لا يتصفح المستخدمون بشكل عام موقع Wista بحثًا عن المحتوى - لذلك إذا كنت تريد البحث عن مقاطع الفيديو الخاصة بك والعثور عليها ، فهذا ليس الخيار المناسب لك.

ولكن إذا كنت تركز على استخدام الفيديو كأداة تسويق ، فقد يكون بالضبط ما تحتاجه.

تقدم المنصة تحليلات شاملة ، بما في ذلك من أين يأتي الزائرون ، ومن أين ينقرون ، وإلى أي مدى يتوقفون عن مشاهدة مقطع الفيديو الخاص بك.

يتيح لك أيضًا تضمين العبارات التي تحث المستخدم على اتخاذ إجراء مباشرة في مقاطع الفيديو الخاصة بك ، وحتى مطالبتهم بالتسجيل في قائمة بريدك الإلكتروني قبل المشاهدة.

بالإضافة إلى ذلك ، فإن مشغل الفيديو الخاص بـ Wistia قابل للتخصيص ، لذا يمكنك إضفاء طابع مميز على مقاطع الفيديو الخاصة بك عن طريق تغيير زر التشغيل وعناصر التحكم الأخرى إلى ألوان علامتك التجارية.

wistia

يمكنك أيضًا تخصيص إعدادات التشغيل التلقائي ، وتحميل الإعدادات والتعليقات التوضيحية وخيارات المشاركة ، وتسهيل تخطي المستخدمين إلى نقاط معينة في الفيديو عن طريق إضافة فصول.

وإذا كنت تستخدم HubSpot أو Marketo ، فيمكن دمجها بالكامل مع كلا النظامين الأساسيين.

أكبر عيب لـ Wistia هو أن خطتها المجانية تتضمن ثلاثة مقاطع فيديو فقط.

والخطط المدفوعة تكلفك 99 دولارًا شهريًا.

بمجرد اختيار نظام الفيديو الأساسي الخاص بك وتحميل مقطع فيديو ، فإن إضافته إلى موقعك تكون سهلة.

حدد "تضمين" وانسخ كود HTML الذي يوفره نظامك الأساسي.

تضمين youtube

ثم انسخ الرمز والصقه في الصفحة التي تريد ظهوره فيها.

بالنسبة إلى مواقع HTML ، ما عليك سوى إضافته إلى التعليمات البرمجية الخاصة بك في الموقع الذي تريده أن يظهر على الصفحة.

بالنسبة إلى WordPress ، قم بالتبديل إلى محرر النصوص وافعل الشيء نفسه.

فيما يلي مثال لمقطع فيديو Wistia مضمن في منشور مدونة WordPress:

14. تحسين CSS

يحتوي CSS على متطلبات النمط لصفحتك. بشكل عام ، يصل موقع الويب الخاص بك إلى هذه المعلومات بإحدى الطريقتين: في ملف خارجي ، يتم تحميله قبل عرض صفحتك ، أو مضمنًا ، مما يعني أنه موجود في مستند HTML نفسه.

يتم تحميل CSS الخارجي في رأس HTML الخاص بك برمز يبدو كالتالي:

<! - Your styles ->

<link rel = ”stylesheet” type = ”text / css” media = ”all” href = http: //yourURL/style.css />

مضمنة CSS متداخلة في HTML لصفحتك ويبدو كالتالي:

تسريع موقع الويب الخاص بك css

كقاعدة عامة ، تجنب تضمين CSS في كود HTML (كما هو الحال في divs أو العناوين الخاصة بك) كما هو الحال في CSS المضمن في الصورة أعلاه. ستحصل على رمز أكثر وضوحًا إذا وضعت كل CSS في الأنماط الخارجية.

هذا يقلل من حجم التعليمات البرمجية الخاصة بك ويؤدي إلى عدد أقل من عمليات تكرار التعليمات البرمجية.

عند إعداد الأنماط الخاصة بك ، من الأفضل أيضًا استخدام أنماط CSS خارجية واحدة فقط ، نظرًا لأن الأنماط الإضافية تزيد من طلبات HTTP.

إذا لم تكن متأكدًا من كيفية إعداد CSS حاليًا ، فيمكنك استخدام أداة توصيل CSS هذه  لمعرفة ذلك. أدخل عنوان URL الخاص بك ، وسترى تقريرًا بجميع ملفات CSS الخارجية.

تسليم المغلق

قم بالتمرير لأسفل ، وسترى أيضًا مكان وجود هذا الملف الخارجي ، بالإضافة إلى أي CSS مضمن على الصفحة والحجم الإجمالي لملفات CSS الخاصة بك.

تسريع تسليم موقع الويب الخاص بك css 2

إذا كان لديك أكثر من ملف CSS خارجي ، فسيضيف كل ملف إلى وقت تحميل صفحتك. في بعض الحالات ، هذا أمر لا مفر منه - ولكن في معظم الحالات ، من الأفضل الجمع بينهما.

لحسن الحظ ، هذه عملية بسيطة ، ويمكن عادةً إنجازها بدون أي شيء أكثر من النسخ واللصق.

ما عليك سوى نسخ محتويات كل ملف CSS لديك ، ولصقه في ملف CSS رئيسي واحد .

الجمع بين المغلق

بعد ذلك ، حدِّث HTML للإشارة إلى هذا الملف الجديد ، وأزل جميع مراجع الملفات القديمة.

الآن ، تحتاج متصفحات زوارك فقط إلى تنزيل ملف CSS واحد بدلاً من عدة ملفات ، مما يقلل من العدد الإجمالي للطلبات ويقلل من وقت تحميل الصفحة.

الجمع بين المغلق قبل وبعد

بمجرد القيام بذلك ، يمكنك استخدام PageSpeed ​​Insights  للتأكد من عدم وجود أية مشكلات في CSS.

إذا كان لديك أي موارد نصية للحظر ، فسترى هذه الموارد ضمن "اقتراحات التحسين".

عرض سرعة الصفحات

إذا كنت تستخدم بالفعل مكونًا إضافيًا مثل WP Rocket ، فلا ينبغي أن تكون هذه مشكلة. إذا كنت لا تزال تواجه مشكلات تتعلق بحظر العرض ، فتحقق مرة أخرى من إعدادات المكون الإضافي أو اتبع توصيات Google  لتحسين تسليم CSS.

15. إعطاء الأولوية لمحتوى الجزء المرئي من الصفحة (التحميل البطيء)

بعد أن أوصيت للتو باستخدام أنماط CSS واحدة فقط وبدون CSS مضمنة ، هناك تحذير واحد تحتاج إلى مراعاته.

يمكنك تحسين تجربة المستخدم من خلال تحميل قسم الجزء المرئي من الصفحة (أعلى الصفحة) بشكل أسرع - حتى إذا استغرق تحميل باقي الصفحة بضع ثوانٍ.

يسمى هذا التحميل البطيء. وهو مفيد بشكل خاص للصفحات التي تحتوي على الكثير من المحتوى أسفل الجزء المرئي من الصفحة.

على سبيل المثال ، لنفترض أنك تكتب مقال في  مدونة يتضمن 20 صورة. عادة ، يحتاج متصفح المستخدم إلى تنزيل كل تلك الصور قبل عرض أي شيء على الصفحة.

مع التحميل البطيء ، يمكنه تحميل المحتوى ضمن العرض أولاً ، ثم تحميل كل تلك الصور بعد ذلك.

بهذه الطريقة ، لا يتعين على المستخدم الانتظار للوصول إلى الصفحة ، وسيتم تحميل الصور عند عرضها.

يمكن أن يؤدي ذلك إلى تقليل أوقات التحميل بشكل كبير على المقالات التي تحتوي على عدد كبير من الصور.

وإذا قمت بإنشاء موقعك على WordPress ، فسيكون تمكينه سهلاً مثل تثبيت مكون إضافي. هناك الكثير من الخيارات التي يمكنك استخدامها  لبدء استخدام التحميل البطيء على موقعك.

تحميل بطيىء

Lazy Load  هو مكون إضافي بسيط للغاية يستخدم jQuery.sonar لتحميل الصور فقط عندما تكون مرئية في متصفح المستخدم.

كل ما عليك فعله هو تثبيته وتنشيطه بعد ذلك ، سيكتشف المكون الإضافي تلقائيًا عندما تكون الصورة مرئية للمستخدم ، ثم يقوم بتحميلها.

تسريع التحميل البطيء لموقع الويب الخاص بك

لا توجد إعدادات أو خيارات تخصيص يمكن التعديل عليها 

في كلتا الحالتين: إذا كنت تبحث عن حل سريع وبسيط ، فهذا هو الحل.

تحميل BJ Lazy Load

يعد BJ Lazy Load مكونًا إضافيًا  بسيطًا نسبيًا ، ولكنه يوفر بعض الخيارات الإضافية للتخصيص.

أولاً ، يمكنك تحديد أي محتوى على موقعك تريد تحميله ببطء. يمكن أن يشمل ذلك المحتوى والصور المصغرة و gravatars والصور و iframes.

تحميل bj كسول

يمكنك أيضًا تعيين صورة عنصر نائب قياسي للمحتوى الذي لم يتم تحميله بعد ، وتخطي الصور بفئات معينة.

لذلك ، على سبيل المثال ، إذا كنت لا تريد تحميل صورة معينة ببطء ، فيمكنك ترميزها بشيء مثل:

<img src = ”image.jpg” class = ”no-lazy”>

يمكنك أيضًا تعيين حد لمدى قرب عنصر ما من شاشة المشاهد قبل التحميل. يمنحك هذا مزيدًا من التحكم في سرعة ووظيفة كيفية تحميل صفحتك.

تحميل كسول bj 2

البرنامج المساعد متوافق أيضًا مع التمرير اللانهائي.

إذا كنت تبحث عن مكون إضافي سهل الاستخدام ، ولكنه يوفر تحكمًا أكبر قليلاً من Lazy Load ، فهذا خيار رائع.

WP Rocket

إذا كنت تستخدم WP Rocket بالفعل ، فيمكنك أيضًا استخدام المكون الإضافي  enable lazy loading. .

افتح إعدادات WP Rocket الخاصة بك ، ثم انقر فوق علامة التبويب "Basic". في قسم LazyLoad ، حدد المربع بجوار "تمكين للصور".

wprocket lazyload

بمجرد تمكين هذه الميزة ، هناك بعض خيارات التخصيص التي يمكنك استخدامها.

على سبيل المثال ، إذا كنت لا تريد استخدام التحميل البطيء على منشور أو صفحة معينة ، فيمكنك ببساطة تعطيله لتلك الصفحة.

ما عليك سوى فتح الصفحة ، ثم التمرير لأسفل إلى مربع "خيارات ذاكرة التخزين المؤقت" في الشريط الجانبي الأيمن. بعد ذلك ، قم بإلغاء تحديد المربع بجوار "LazyLoad for Images" ، واحفظ التغييرات.

تعطيل التحميل البطيء لنشر صفحة معينة

يمكنك أيضًا استخدام مقتطفات من التعليمات البرمجية لتعطيل التحميل البطيء لأنواع معينة من الصفحات ، مثل صفحتك الرئيسية أو صفحة المدونة.

على سبيل المثال ، قد يبدو تعطيل التحميل البطيء لصفحتك الرئيسية كما يلي:

تعطيل المنزل الكسول

يمكنك نسخ هذه المقتطفات ولصقها  بـ   tutorial on lazy load settings.

إذا كنت ترغب في تعطيل التحميل البطيء لصور معينة ، فيمكنك القيام بذلك باستخدام السمة "data-no-lazy".

ما عليك سوى إضافتها إلى رمز صورتك ، وسيتم تحميل تلك الصورة بشكل طبيعي.

البيانات لا كسول

أخيرًا ، يمكنك تمكين التلاشي ساري المفعول لجعل تحميل صورك أكثر سلاسة.

عندما تظهر الصور كلها مرة واحدة ، يمكن أن توفر تجربة متناقضة للزوار. يمكنك جعلها تظهر بشكل تدريجي عن طريق إضافة مقتطف إلى ملف CSS الخاص بك.

تتلاشى تأثير wp

يمكنك أيضًا العثور على هذا المقتطف في البرنامج التعليمي للتحميل البطيء لـ WP Rocket .

16. قلل عدد المكونات الإضافية التي تستخدمها على موقعك

 يمكن للمكونات الإضافية أن تفعل الكثير لتحسين موقع WordPress الخاص بك. يمكنك استخدامها لإضافة وظائف مخصصة وتنظيف التعليمات البرمجية وتحسين تجربة المستخدم والمزيد.

كما أنها تلغي الحاجة إلى التعديل بالكثير من الأكواد ، مما يجعل تجربة المستخدم سهلة للغاية عند العمل على موقعك.

بالإضافة إلى ذلك ، فهي سهلة التثبيت للغاية.

هذا يجعل من السهل الاستمرار في إضافة المكونات الإضافية وتثبيتها ، دون التفكير في الجانب السلبي المحتمل.

لسوء الحظ ، قد يؤدي تثبيت عدد كبير جدًا من المكونات الإضافية إلى حدوث بعض المشكلات.

يمكنهم إبطاء موقعك ، وخلق مشكلات أمنية ، وحتى التسبب في حدوث أعطال وصعوبات فنية أخرى.

بالإضافة إلى ذلك ، قد تكون مواكبة الصيانة والتحديثات مملة عندما يكون لديك الكثير.

وحتى إذا لم يكن لديك الكثير من المكونات الإضافية ، فمن الجيد تقييم المكونات التي قمت بتثبيتها بشكل منتظم. أي شيء قديم أو غير فعال أو تم تكوينه بشكل غير صحيح يمكن أن يكون له تأثير سلبي على سرعة موقعك.

يمكن أن يؤدي إلغاء تنشيط وحذف أي شيء غير ضروري إلى تحسين سرعتك الإجمالية وتسهيل الصيانة على المدى الطويل.

هناك عدة طرق مختلفة يمكنك من خلالها تقييم المكونات الإضافية على موقعك والتخلص من أي مكون يبطئ سرعة موقعك.

اختبر الإضافات الخاصة بك

عندما تتطلع إلى تحسين سرعة الموقع ، فهناك طريقتان مختلفتان لتحديد المكونات الإضافية التي تؤثر عليه.

الأول هو تعطيل المكونات الإضافية بشكل انتقائي ، ثم قياس أداء موقعك. قد تكون هذه عملية شاقة إذا كان لديك الكثير من المكونات الإضافية ، ولكنها ستظهر لك الفرق الذي يحدثه كل واحد.

أولاً ، قم بإجراء اختبار سرعة مع تمكين جميع المكونات الإضافية الخاصة بك. يمكنك القيام بذلك باستخدام أدوات مثل GTmetrix أو Pingdom أو أي أداة سرعة موقع أخرى تفضلها.

gtmetrix

بعد ذلك ، قم بالتجربة عن طريق إلغاء تنشيط المكونات الإضافية الخاصة بك واحدة تلو الأخرى وإعادة اختبار سرعتك.

قم بتدوين أوقات تحميل صفحتك بعد كل اختبار ، والمكونات الإضافية التي قمت بإلغاء تنشيطها لتحقيق سرعات أعلى.

إذا كان لديك الكثير من المكونات الإضافية ، فقد تستغرق هذه العملية بعض الوقت.

لحسن الحظ ، هناك بديل: تثبيت مكون إضافي آخر.

 Plugin Performance Profiler  يعد خيارًا قويًا لتحديد المكونات الإضافية التي تسبب مشكلات على موقعك. بالإضافة إلى ذلك ، فهو أسرع وأسهل بكثير من إلغاء تنشيط المكونات الإضافية يدويًا بشكل فردي وإجراء اختبارات سرعة الموقع (ويمكنك دائمًا إلغاء تنشيطه بمجرد الانتهاء من استخدامه).

بمجرد تثبيت المكون الإضافي ، انتقل إلى صفحة الإعدادات الخاصة بك وقم بإجراء فحص للموقع.

سيستغرق ذلك بضع دقائق ، ثم يعرض لك تقريرًا مع توزيع تفصيلي لكيفية أداء كل مكون إضافي على موقعك.

تسريع ملف تعريف أداء البرنامج المساعد لموقع الويب الخاص بك

يخبرك وقت تحميل المكون الإضافي في الجزء العلوي من التقرير بوقت التحميل التراكمي لجميع المكونات الإضافية على موقعك ، بالإضافة إلى النسبة المئوية لإجمالي وقت التحميل الذي تشكله.

يمكنك أيضًا الاطلاع على مخطط زمني مفصل مع معلومات حول كل مكون إضافي وموضوعك والجوهر لكل صفحة. سيساعدك هذا في تحديد المشكلة بالضبط في الصفحات بطيئة التحميل.

الجدول الزمني للأداء

أخيرًا ، يمكنك الاحتفاظ بسجل لمسح الأداء الخاص بك مباشرةً في المكون الإضافي. بهذه الطريقة ، إذا واجهت مشكلات في المستقبل ، سيكون لديك معيار ونقطة بداية جيدة لتحديد المشكلات.

سجل البرنامج المساعد

إذا وجدت أي مكونات إضافية أثناء التقييم تؤدي إلى إبطاء موقعك وليست ضرورية ، فما عليك سوى إلغاء تنشيطها وحذفها.

أحد المكاسب السهلة التي يمكنك البحث عنها هنا هو المكون الإضافي لنموذج الاتصال الخاص بك ، إذا كان لديك واحد. يقوم العديد من مالكي المواقع بتثبيت مكون إضافي لنموذج الاتصال لأنهم يعتقدون أنه الطريقة الوحيدة لإضافة نموذج إلى موقعهم.

ولكن اليوم ، تأتي العديد من السمات مع وظيفة نموذج الاتصال المضمنة.

إذا لاحظت أن المكون الإضافي لنموذج الاتصال الخاص بك يبطئ موقعك ، تحقق جيدًا لمعرفة ما إذا كانت هذه الميزة تأتي مع قالبك. إذا كان الأمر كذلك ، فقم بتحديث النماذج الخاصة بك وحذف المكون الإضافي.

تحديد التداخلات في الوظائف

في معظم الحالات ، تخدم المكونات الإضافية التي قمت بتثبيتها على موقعك غرضًا واضحًا. لذلك حتى إذا كان الحجم الهائل يبطئ موقعك ، فقد لا يكون حذفها خيارًا.

لحسن الحظ ، هناك العديد من المكونات الإضافية التي يمكنها تحقيق أكثر من هدف واحد ، ويمكن أن يساعدك العثور عليها في التخلص من المكونات الإضافية التي تخدم غرضًا واحدًا فقط.

على سبيل المثال ، تعد المكونات الإضافية WP Rocket و WP Total Cache في هذه الصفحة مفيدة للغاية لتحسين سرعة الموقع وكلاهما خياران رائعان.

ولكن بالنظر إلى أنها تخدم العديد من الأغراض نفسها ، فأنت على الأرجح لست بحاجة إلى كليهما. إذا كان كلاهما مثبتًا على موقعك ، فيمكنك تقييم الميزات التي تستخدمها في كل منهما ومعرفة ما إذا كان بإمكان أي منهما فعل كل ما تحتاجه.

بعد ذلك ، قم بتمكين كل هذه الميزات في المكون الإضافي الذي اخترت التمسك به ، وقم بإلغاء تنشيط الآخر.

إذا كان لديك الكثير من المكونات الإضافية المثبتة ، فقد تنبهر بعدد الإضافات  التي يمكن إزالتها بسهولة عن طريق الإعتماد على اضافة واحدة أكثر قوة.

تخلص من المكونات الإضافية للمهام التي يمكنك القيام بها يدويًا

اعتمادًا على مستوى خبرتك ، يمكنك أيضًا تقليل كمية المكونات الإضافية عن طريق القيام بمهام معينة يدويًا.

على سبيل المثال ، يستخدم العديد من مالكي المواقع مكونًا إضافيًا لإضافة شفرة تتبع Google Analytics إلى رأسهم. وعلى الرغم من أن هذا يجعل العملية سهلة للغاية بالنسبة للمستخدمين الذين لا يشعرون بالراحة في تحرير التعليمات البرمجية ، إلا أنها ليست ضرورية.

إذا كان لديك  المكون الإضافي Insert Headers and Footers (أو ما شابه) مثبتًا لتعديل أجزاء أخرى من علامة الرأس ، فيمكنك نسخ رمز Google Analytics من لوحة تحكم المسؤول ، ثم لصقه .

احفظ التغييرات ، وسيتم تثبيت شفرة التتبع الخاصة بك.

إذا لم يكن لديك مكون إضافي مثبت لتحرير الرؤوس والتذييلات ، فيمكنك إضافته يدويًا إلى العنوان الخاص بك من خلال FTP الخاص بموقعك.

بالطبع ، هذا خيار أكثر تقدمًا وفكرة جيدة فقط . ولكن بمجرد لصق شفرتك وإعادة تحميل الملف ، ستكون جاهزًا لاستخدام Google Analytics - دون الحاجة إلى مكون إضافي على الإطلاق.

مكون إضافي أساسي آخر ربما تكون قد قمت بتثبيته هو مكون إضافي للخط. تم تصميم هذه المكونات الإضافية لتسهيل تغيير خطوط موقعك - فيمكنك إزالتها ببضعة أسطر من تعلم البرمجية.

انتقل إلى Google Fonts  وحدد الخط الذي تريد استخدامه على موقعك. سترى شفرات HTML و CSS لهذا الخط.

تسريع خطوط جوجل موقع الويب الخاص بك

أضف كود HTML إلى العنوان الخاص بك ، و CSS إلى أنماط CSS الخاصة بموقعك حيثما تريد استخدام الخط الذي اخترته.

يمكنك القيام بذلك مع العديد من الخطوط كما تريد أيضًا. حتى تتمكن من تخصيص كيفية ظهور كل النص على موقعك بالكامل ، بدون مكون إضافي واحد.

17. تقليل عمليات إعادة التوجيه

غالبًا ما تكون عمليات إعادة التوجيه ضرورية عند نقل الصفحات وحذفها ، وهي أفضل طريقة للتخلص من المشكلات المتعلقة بالروابط المعطلة.

لكن وجود الكثير منها يمكن أن يؤدي إلى إنشاء طلبات HTTP إضافية ، مما قد يؤثر سلبًا على السرعة ، خاصة على الأجهزة المحمولة.

هذا يعني أنه من الأفضل تقليلها إلى الحد الأدنى. في الواقع ، تقول Google  أنه من الناحية المثالية ، فإن مالكي المواقع سيتخلصون منها تمامًا.

لسوء الحظ ، هذا غير واقعي بالنسبة لمعظم مالكي المواقع الذين أزالوا المحتوى الخاص بهم أو أعادوا هيكلته.

لا يزال هناك مجال للتحسين في معظم الحالات.

يمكنك البدء باستخدام Screaming Frog  للتعرف بسرعة على جميع عمليات إعادة التوجيه الموجودة حاليًا على موقعك.

قم بإجراء فحص للموقع ، ثم قم بالفرز حسب عمود "كود الحالة" لمشاهدة جميع عمليات إعادة التوجيه على موقعك.

تسريع موقع الويب الخاص بك يصرخ الضفدع

يمكنك البحث في عمليات إعادة التوجيه هذه لمعرفة ما تحققه ، والتأكد من أنها تخدم غرضًا ضروريًا.

يمكنك أيضًا استغلال هذه الفرصة لتحديد سلاسل عمليات إعادة التوجيه ، أو عمليات إعادة التوجيه التي تشير إلى صفحات أخرى تمت إعادة توجيهها. يؤدي هذا إلى إنشاء طلبات إضافية غير ضرورية ، مما قد يؤدي إلى إبطاء أوقات التحميل.

إذا وجدت أي سلاسل إعادة توجيه ، فيمكنك تحرير ملف htaccess الخاص بك  لتوجيه جميع الصفحات التي تمت إعادة توجيهها مباشرةً إلى أحدث الإصدارات من تلك الصفحة.

18. تقليل النصوص الخارجية

كما ذكرنا أعلاه ، كلما قل عدد الطلبات التي يقدمها موقعك إلى خادمك ، زادت سرعة تحميل الصفحة.

على الرغم من أن ملفات CSS و JavaScript غالبًا ما تكون السبب الرئيسي للنصوص الخارجية الإضافية ، إلا أنها ليست الوحيدة - ويمكن أن يكون التخلص من أي ملفات أخرى له تأثير على سرعة موقعك أيضًا.

يمكنك تحديد جميع البرامج النصية الخارجية التي تضيف الطلبات عن طريق إعادة فتح علامة تبويب الشبكة في أدوات المطور في Chrome.

نصوص خارجية

على سبيل المثال ، إذا كنت تستخدم Gravatar لتعليقات المدونة ، فقد تلاحظ أن تحميل صور المستخدم يضيف قدرًا كبيرًا من وقت التحميل.

أو ، إذا تم دمج موقعك مع Twitter لمشاركة المنشورات بسهولة ، فقد يؤدي ذلك أيضًا إلى زيادة عدد طلبات HTTP التي يقدمها موقعك.

بالطبع ، تستحق بعض هذه الميزات الإضافية الملي ثانية التي تضيفها إلى أوقات التحميل الخاصة بك. في هذه الحالة ، يمكنك تركها كما هي.

ولكن إذا كانت تستحق زيادة سرعة صفحتك ، فقم بإلغاء تثبيتها أو إزالتها.

ستساعدك معرفة الميزات التي تزيد وقت التحميل على فهم سرعة موقعك بشكل أفضل. يمكن أن تساعدك أيضًا في اتخاذ قرارات مدروسة بشأن الميزات التي تختار إضافتها إلى موقعك في المستقبل.

19. راقب سرعتك بمرور الوقت

أثناء عملك على تحسين سرعة موقعك ، من الجيد مراقبة كيفية تغيره بمرور الوقت. يعد هذا أمرًا مهمًا حتى بعد تحقيق وقت تحميل مقبول للصفحة.

كما ترى في هذه المقالة ، هناك الكثير من العوامل التي تؤثر على سرعة موقعك - ​​لذلك يمكن أن تتغير السرعة في أي وقت.

يمكن أن تساعدك مراقبة أوقات التحميل الخاصة بك على أساس منتظم في اكتشاف أي مشكلات في وقت مبكر ، والحفاظ على موقعك في حالة جيدة.

كيفية عمل اختبار سرعة الموقع

هناك العديد من الأدوات التي يمكنك القيام بها لتحقيق ذلك. يعد اختبار سرعة موقع الويب الخاص بـ Pingdom أحد أفضل الأشياء لمراقبة الأداء العام للموقع .

ما عليك سوى إدخال عنوان URL الخاص بك ، ثم تحديد المكان الذي تريد اختبار موقعك منه. إذا لم يكن لديك موقع مفضل ، فيمكنك تركه على الوضع الافتراضي - ولكن إذا كنت قلقًا بشأن المستخدمين البعيدين جغرافيًا عن خوادمك ، فهذا يتيح لك اختبار موقعك من مواقع مختلفة.

تسريع موقع الويب الخاص بك pingdom

بعد ذلك ، سترى ملخصًا لوقت تحميل صفحتك وأدائها ، بما في ذلك حجم الصفحة وعدد الطلبات وكيفية تكديسها مع المواقع الأخرى التي تم اختبارها.

ملخص pingdom

تمنحك هذه المعلومات نظرة سريعة على صحة سرعة موقعك ، ويعد تتبعها بمرور الوقت طريقة سهلة لمراقبة التحسينات أو الانخفاضات في الأداء.

أدناه ، سترى قائمة من الاقتراحات لتحسين أداء موقعك. إذا لم تكن راضيًا عن وقت التحميل ، فسيساعدك هذا في تحديد المشكلات التي تسبب ذلك.

تسريع رؤى أداء pingdom لموقع الويب الخاص بك

يتم تضمين جميع هذه المعلومات في الإصدار المجاني من الأداة.

يوفر الإصدار المدفوع أيضًا تقارير سرعة الصفحة ، والتي توضح سرعة موقعك بمرور الوقت. يمكن أن يساعدك هذا في تحديد الاتجاهات ، والوقت الدقيق الذي يبدأ فيه موقعك في مواجهة المشكلات - مما يسهل الوصول إلى جذر أي مشاكل.

تقرير سرعة صفحة pingdom

يتضمن الإصدار المدفوع أيضًا التنبيهات ومراقبة الجهوزية ، والتي تراقب موقعك وتنبهك تلقائيًا بالمشكلات.

يتضمن ذلك تطبيقًا للجوّال ، والذي سيُعلمك بأخطاء الخادم ووقت التعطل والمشكلات الخطيرة الأخرى. تعمل هذه الميزات على تسهيل اكتشاف المشكلات فور حدوثها والتأكد من أن موقعك يتم تحميله دائمًا بسرعة ويعمل بشكل جيد.

20. مراقبة سرعة الصفحة على المحمول

بالإضافة إلى مراقبة أوقات التحميل على سطح المكتب ، ستحتاج إلى إيلاء اهتمام خاص لمدى جودة تحميل موقعك على الأجهزة المحمولة.

كما ذكرنا أعلاه ، تؤثر تجربة مستخدم الهاتف المحمول الآن على جميع تصنيفات موقعك.

بالإضافة إلى ذلك ، من مصلحتك القصوى توفير موقع سريع وسهل الاستخدام لمستخدمي الأجهزة المحمولة.

يمكنك البدء باستخدام أداة Test My Site من Google لتدقيق سرعة صفحتك الخاصة. للبدء ، فقط أدخل عنوان URL الخاص بك.

تسريع سرعة اختبار موقع الويب الخاص بك على الهاتف المحمول

أولاً ، ستظهر لك نتائجك متوسط ​​وقت تحميل موقعك على شبكة الجيل الثالث ، بالإضافة إلى كيفية تحسين ذلك مع أفضل الطرق الموصى بها.

كما يوضح لك عدد الزائرين المقدرين المفقودين بسبب أوقات التحميل. إذا كان لديك أوقات تحميل بطيئة.

اختبار جوجل للجوال

بعد ذلك ، تقدم Google مقارنة لإظهار مكانك مقابل المواقع الأخرى في مجال عملك.

نظرًا لأن العديد من هذه المواقع خاصة بمنافسيك ، فستحتاج إلى العمل من أجل أن تكون أفضل من منافسيك.

تسريع مقارنة صناعة الجوال لموقع الويب الخاص بك

إذا لم تكن سرعة موقعك قريبة من الثلاثة ثواني ، فيجب عليك اتباع الخطوات ال 20 التي تحدثنا عنها سابقا.

استنتاج

يعد الحصول على أوقات تحميل سريعة لصفحتك مهمة صعبة ، ولكن سيكون لها تأثير إيجابي كبير على الأداء العام لموقعك.

من المهم أيضًا أن تتذكر أنه على الرغم من أن جميع النصائح الواردة في هذه الصفحة يمكن أن تساعدك في تحقيق زيادة سرعة موقعك ، إلا أنك لست بحاجة إلى تنفيذها جميعًا اليوم.

اقض بعض الوقت في البحث في نتائج اختبار سرعة موقعك وابحث عن المشكلات التي لها أكبر تأثير على أوقات التحميل. ركز على تلك العوامل عالية التأثير واتخذ الخطوات اللازمة لتحسينها.

استهداف الزوار ذوي النوايا العالية باستخدام CRO

يمكنك ايضا البحث عن طرق سهلة في حين أن بعض النصائح التي قدمناها قد تتطلب مساعدة من مطور ، ويمكن تنفيذ البعض منها في أقل من ساعة.

وعلى الرغم من أن بعضها قد يبدو بسيطًا ، إلا أن الخطوات الصغيرة لتقليل وقت التحميل يمكن أن تحدث فرقًا ،انقاص ثانية واحدة في سرعة تحميل الصفحة تعني نجاحك 

نتمنى ان يكون المقال مفيدا اي سؤال ضعه في التعليقات 

وانتظر منا الرد 

تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة