Al jazary icon and logo Al jazary

understand how your website run and optimized page speed - Al jazary

published 28 Jun 2016

understand how your website run and optimized page speed

Every web owner just want to run their blog in best speed performa but got less result because not understand how is truly his website page load and sent to user browser, in this article we will explain some step about how website load from server until end user browser, take a breath.

DNS response time

dns response is very important for web server load progress, when user start request our page it will send to server and waiting for server response, normally it take 10-100ms for server to return it's response, if your website dns response time more than 1000ms for couple days, you should moving to better web host. using shared hosting will affect DNS response also server response Down & Up.

Server response time

after dns has been responsed then in this step our web server will start fetching data from url and process out script in server side, for example we using php code to create dinamic content, if that code is simple than combined with server ability it would give speed process in time. but using more complex script for example looping through big data list, get content from out source, this will make process to waiting other server response andtake more time, so avoid this one. alternte mode you can use XHR request using javascript and load unimportant data asyncronous.

client side progress in HEAD

now we have all html code that sent from the server, full code retrieved is show as (souce-code) or Ctrl+U in your browser.

in this step, browser first will get data from Head and process it until done, keep in mind that browser will queue from html code -> css code - javascript code. so to avoid stuck in loading prosess and waiting less important stuff, we should write smart code in head, for example to avoid glitch display when css change, we put that css code for out themes in this section.

now question, there is template using link rel="stylesheet" also done with <style/> instead, what should we choose? then it depend on what function your css does. loading style from link will hold the process, except we did a trick like using <script async . i am suggest to use style for css theme code, we make sure that css is unchanged after page load complete.

processing content in body

after all head content load for example we have implemented css code in browser, than all data append to body of page will fit in their position, this will reduce device pleasure for rendering and using CPU, in smartphone and other low-device this will increase huge performa.

in this step also html code will waiting of outsource code to load like link to css and script data to load, there is a methode for using async script load for out source data,simple put async after script tag open like this <script async src="...... and then this will pass body to wait and continue to next process until it reach bottom of </body>

please note if you using jquery library, using async load will give error in next personal script, so we can handle this with window.load function and must write in javascript cersion because jquery is not ready known by.

example of using jquery async:

<script async src="" //jquery library
<script async src="" //your script.

then in your script that saved in another location, before using $(document).ready(function(){ or in short version we can use $(function(){ .put javascript code like this:

window.onload=function(){
    $(function(){
        //you code is here..
    });
}

Now it clear the error of jquery. also for css out source we can does trick also with jquery, first we must mark our link that preload after all html load with <link media="none" rel="...> in your jquery code write thisto change and process that css to load.

$("link").attr("media","all");

we are done here, now our website run in best performa it can does. please feel free to hit a comment if there any question or suggestion.

speedoptimize updated 28 Jun 2016

0 total comments

Add Comment

Sitemap

    templates

    htaccess

    php

    tools

    articles

    hardware

Top articles