Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Web Optimization

    Uploaded by

    Maulik Jain
    1. The document discusses various techniques to make images more responsive on websites, including image binding, compression, and changing formats. It provides examples of how response time improved from 19.87 seconds to 16.89 seconds after compressing images. 2. DOM (Document Object Model) allows manipulating elements on a webpage using JavaScript. Manipulating the DOM can impact website performance. An example is provided of adding click events to colored boxes. 3. AJAX (Asynchronous JavaScript and XML) is a technique to send and retrieve data from a server asynchronously in the background without interfering with the display and behavior of the existing page. Using AJAX improves performance by reducing page rendering time.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Web Optimization

    Uploaded by

    Maulik Jain
    6 views5 pages
    1. The document discusses various techniques to make images more responsive on websites, including image binding, compression, and changing formats. It provides examples of how response time improved from 19.87 seconds to 16.89 seconds after compressing images. 2. DOM (Document Object Model) allows manipulating elements on a webpage using JavaScript. Manipulating the DOM can impact website performance. An example is provided of adding click events to colored boxes. 3. AJAX (Asynchronous JavaScript and XML) is a technique to send and retrieve data from a server asynchronously in the background without interfering with the display and behavior of the existing page. Using AJAX improves performance by reducing page rendering time.

    Original Description:

    Optimisation

    Original Title

    WebOptimization

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    1. The document discusses various techniques to make images more responsive on websites, including image binding, compression, and changing formats. It provides examples of how response time improved from 19.87 seconds to 16.89 seconds after compressing images. 2. DOM (Document Object Model) allows manipulating elements on a webpage using JavaScript. Manipulating the DOM can impact website performance. An example is provided of adding click events to colored boxes. 3. AJAX (Asynchronous JavaScript and XML) is a technique to send and retrieve data from a server asynchronously in the background without interfering with the display and behavior of the existing page. Using AJAX improves performance by reducing page rendering time.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    6 views5 pages

    Web Optimization

    Uploaded by

    Maulik Jain
    1. The document discusses various techniques to make images more responsive on websites, including image binding, compression, and changing formats. It provides examples of how response time improved from 19.87 seconds to 16.89 seconds after compressing images. 2. DOM (Document Object Model) allows manipulating elements on a webpage using JavaScript. Manipulating the DOM can impact website performance. An example is provided of adding click events to colored boxes. 3. AJAX (Asynchronous JavaScript and XML) is a technique to send and retrieve data from a server asynchronously in the background without interfering with the display and behavior of the existing page. Using AJAX improves performance by reducing page rendering time.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    Name: Chegu Poornagopi Chandu

    Reg No: 12106955


    Course Code: CAP785
    1.With various techniques, how will you make images
    more responsive.
    We have so many techniques to make images more responsive in that one
    of the technique is images binding.
    In this we will take more than one image and we will combine those images
    together because of that when we will use this images its may be reduce number
    of http requests.

    From the above example we can make our images more responsive
    Another thing is we can reduce our images size by compression because of that
    it may increase our page responsive time. It will help us to improve our website
    responsiveness.
    Before image compression the responsive of the website is :19.87 sec.

    After images compression the responsive ness of the website is:16.89s

    Because of decreasing responsive time it will increase the number of users and
    it will improve our rank in google analytics ranking.
    And another thing is by changing formats of images to JPEG(joint photographic
    experts group) it’s a lossy compression but it is most recommended format for
    images to implement in our website. And it is having typically many different
    colors and gradients.
    And we will use GIF(graphic interchange format) and png for logos and icons

    2. what is DOM? How can you manipulate DOM. Will it


    effect website performance.
    In website development, DOM stands for Document Object Model. It is a
    programming interface that allows us to create, change, or remove elements
    from a website document. DOM manipulation is when you use JavaScript to
    add, remove, and modify elements of a website.
    Ex:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Color Palette</title>
    <style>
    .color {
    display: inline-block;
    width: 5em;
    height: 5em;
    margin: 5em;
    border-width: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }
    </style>
    </head>
    <body>

    <div id ="color" class="color" style="background-color: yellow;"></div>


    <div id ="color" class="color" style="background-color: red;"></div>
    <div id ="color" class="color" style="background-color: blue;"></div>
    <div id ="color" class="color" style="background-color: blueviolet;"></div>

    <script src="ex1.js"></script>
    </body>
    </html>
    const colors = document.querySelectorAll(".color");

    colors.forEach((color) => {
    color.addEventListener("click", () => {
    const colorValue = color.style.backgroundColor;
    console.log(`This color is ${colorValue}`);
    });
    });

    By using dom in our website it will increase our web performance and it will
    effect our website performance.

    3. What is AJAX? How can it improve web performance


    AJAX is stands for asynchronous javascript and xml because using this in our
    website it will not rendering the page when we click on the button. Because of
    that it will improve our website performance.
    Ex:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Document</title>
    </head>
    <body>
    <p id="demo">Ajax example</p>

    <button onclick="loaddata()">weboptimization1</button>
    <button onclick="loaddata()">weboptimization2</button>
    <button onclick="loaddata()">webopitmization3</button>
    <script>
    function loaddata()
    {
    var xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange=function()

    {
    if(this.readyState==4 && this.status==200)
    {
    document.getElementById("demo").innerHTML=this.responseText;
    }
    else if(this.readyState==4 && this.status==404)
    {
    document.getElementById("demo").innerHTML="File not found";
    }
    }
    xhttp.open('GET',"ex3.html",true);
    xhttp.send();

    </script>
    </body>
    </html>

    Because using ajax in our website it will reducing the rendering time in our
    website because of that it will reduce our website performance. usually we use
    AJAX to send data asynchronously to the server and display the result that we
    get from the server without making the users wait (or less time to wait in
    practical) for data.

    You might also like