Scribd
Upload
17 views

Web Optimization

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.

Uploaded by

Maulik Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Web Optimization

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.

Uploaded by

Maulik Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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