WebPage Loading & Rendering – How fast it that?

Hello There…

For the past few days, I was speed testing how fast my website loads and researching on how can I improve it. During this research, I came across many different ways and different techniques to improve a web page to load faster and render with a  very minimal memory footprint, from coding standpoint to server configuration.

Here are the metrics of my website’s performance, studied and tested with…

  1. Google Developers Page Speed Performance toolgoogledevelopersperformanceinsights
  2. Pingdom Website Speed Testpingdomspeedtest
  3. GTmetrix Performance Toolgtmetrixperformance

 

Notice that each test tool provides different performance test results. All the results are approximated based on their test strategy. However, there may be many other test tools to test out the website’s speed, but the important point to note is, these tools lets us know what went wrong and what can be done to improve it.

Here are some of things I had to do for improving..

Within HTML, JS & CSS files

  1. Minifying HTML, Javascript’s and CSS.
  2. Using ‘async’ and ‘defer’ (sometimes together where ever required) while loading javascript files.
  3. Inlining small CSS and scripting small JS within main document to minimize requests.
  4. Placing CSS in the document head.
  5. Sizing Content to Viewport.
  6. Serving Scaled images (If images are small sized, use data-uri’s instead)

      Within .htaccess file. (This file exists on the domain root folder)

  1. Leverage Browser Caching by specifying a “Cache-Control” to all Files Matching html, js, css, etc…
  2. Specifying a “Vary: Accept-Encoding header” to advise public proxies to store both compressed and uncompressed version of the resource.
  3. Specifying a ETag Header to validate Cache for all resources ending with file names.
  4. Ensuring landing page redirects are avoided (enabled by default)
  5. Ensuring gzip compression (enabled by default)
  6. Ensuring Keep-Alive is enabled (enabled by default in http.conf. If shared host, then we would have to set it manually in .htaccess)

Having done that, I do had some unanswered questions during this research.

  1. How to leverage browser caching andE-Tag (Cache Validator) to certain resources that do not end with file name in .htaccess file?Example for Resource URL’s:
    http://fonts.googleapis.com/css?family=Lato:400,700
    https://maps.googleapis.com/maps/vt?pb=!…

    The above resource URL’s DO NOT END with any file names.

  2. Since these resources are not cached by some proxy caching servers. How to remove query string and encode the parameters into the URL for resources having “?” (see resource URLs example from Q.1 above).
  3. How to prioritize visible content for rendering “above-fold-content” (as suggested in the Google developers page test tool), when your page is just one single page template?

Here are the resources that I was going through this research process..

 

Happy Learning 🙂

Advertisements

H5 – Are you about to add an image to your Web Application ? Think about self encoded data-uri’s.

There are 2 ways to add an image to your html page.

1) Add it inline using your tag within html file
2) Add it using CSS

Everyone knows how to do it the both ways, but the best way to do is by using base64 encoder and adding the content data uri to the image.

I use a simply encoder utility tool from WebSemantics @ http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

The above utility tool does not allow images with large sizes, and here is another tool which does the same..

http://www.askapache.com/online-tools/base64-image-converter/

However, there are many tools that are available in the market. You can also have your own base64 algorithm to encode the images for security purposes (like avoiding “HOT LINKING“).

Given the input image, this tool gives you a base64 encoded data, which you would want to use it to attach it to html or css.

 

Difference between Block vs Inline vs Block-Inline elements.

Block Elements Inline Elements Inline-Block Elements
Block level elements normally start and end with a new line, when displayed in a browser. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. Inline elements are normally displayed without line breaks. An inline element has no line break before or after it, and it tolerates HTML elements next to it. An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
respects all paddings left & right margins and padding, but not top & bottom allow other elements to sit to their left and right.
force a line break after the block element cannot have a width and height set respect top & bottom margins and padding
p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
A combination of block and inline is an example of inline-block with style=”display: inline-block”
From a rendering point of view,
<div> == <span style=”display: block”>
From a rendering point of view,
<span> == <div style=”display: inline”>
From a rendering point of view,
<div> == <div style=”display: inline-block”>

See more @ http://dustwell.com/div-span-inline-block.html