April 13, 2015

282 Views

How to Improve your Web Experience, Speed and Performance

Today’s world is dominated by mobility and all smartphone users want sites to be loaded in the minimal time. No one wants to wait for loading data and images. In technology’s race, as a UI developer, I personally feel that some crucial points must be kept in mind before writing code. Web optimization plays a key role in web development.

What is Website Optimization? A technique used to describe the procedures to optimize the speed at which your website loads in a Web browser. This type of optimization generally involves editing your website to optimize scripts, HTML, or CSS code for faster loading. It also reduces the number of components, such as images, scripts, or videos that are required to render the webpage.

The key points for website optimization are as follows:

  1. Minimize HTTP Requests: The speed of website optimization depends upon the volume of HTTP requests going to the server side.

    Higher number of HTTP requests = Slower Website

    Less number of HTTP Requests = Website will load faster

    To minimize HTTP requests, follow the points below:

    • Use less images
    • Use CSS instead of images whenever possible
    • Merge multiple style sheets (CSS) into one CSS.
    • Reduce the number of scripts (JavaScript, JQuery) and place these scripts at the bottom of the page
  1. Optimized HTML Code: Always use optimized HTML code in programming. In order to achieve this, follow the points below:
    • Avoid table structures
    • Avoid unnecessary DIV elements
    • For repetitive structures use UL and LI
  2. Optimized CSS: It is the backbone of websites. For optimized CSS code, follow the points below:
    1. Use shorthand coding; for e.g.

      p {
          padding-top: 15px;
          padding-right: 20px;
          padding-bottom: 15px;
          padding-left: 20px;
      }

      Instead of this we can write

      p {    padding: 15px 20px;}

      Similarly, for a second example

      p {font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana, sans-serif}

       Instead of this we can write

      P {font: bold italic small-caps 1em/1.5em verdana,sans-serif}.

      There are many css short-hand coding tricks which decrease the number of lines of CSS.

      Note: Avoid inline css eg <p style=”color:red;”>inline css</p>

  1. Sprite

An image sprite is a combination of multiple images put into a single image. A web page with lots of images takes longer to load and generates multiple server requests (HTTP Requests). Using image sprites will reduce the number of server requests and save bandwidth. We can combine many images into one and use it by calling its background position. Like (background: url('img_navsprites.gif') -47px 0;)

  1. Call of JS

<script type="text/javascript" src="scriptName.js"></script>

Reduce the number of scripts (javascript, Jquery) and place them at the bottom of the page. This helps to increase optimization.

  1. Use of image smasher

Always use an image smasher tool to compress the size of images. These tools compress images to almost half their original size, without affecting their quality.

  1. SEO Semantic Code

In a website, content is king. Always use fresh content and avoid duplication. The HTML5 specification is developed especially for creating well-optimized sites; it helps make indexing fast and reliable. These HTML5 SEO tags are also used by search bots while crawling and indexing. For example, the search crawler will first check the information in <article> tag as most important and will name it with the title from <header> block. It will then go to the next pages from <nav> block.

  1. W3C validated Code

W3C stands for the World Wide Web Consortium, which is the recognized standards organization for the World Wide Web. These standards are used to help guide web developers and browsers in developing code that lives up to certain universal standards. In a nutshell, they write the rule-book that helps define our code and whether it is well or poorly written.

The W3C provides a tool to validate our websites, which can be found at: http://validator.w3.org

  1. Use of YSlow

YSlow gives a speed rating to your site. YSlow analyzes web pages (front-end code) and assesses why they are slow, based on Yahoo's rules for high performance web sites.

      Why use YSlow?

  • YSlow provides suggestions for improving web page speed and performance
  • It displays useful statistics about the page
  • It also provides tools for performance analysis, including Smush.it™ and JSLint
  1. Google Page Speed Tools

    To improve web page speed and performance, I always prefer Google Page Speed Tools.

References