Asked 8 years ago
14 Sep 2016
Views 1364
sandip

sandip posted

How to make web pages as lightweight as possible ?

i m making a website for my client which based on e-commerce. and all web page really take long to load , i want to make it light weighted so it can load faster . so needed some tip to make it better ?
yes i need also some tip to optimize the web pages. - david  
Sep 14 '16 10:15
dilip

dilip
answered Nov 30 '-1 00:00

To make web page more lightweight,you can try something

1. less resource to load means more speedy Website.
analyze your website or web page check where more load come from and reduce it .
for analyzing you can use tool which check webpage health and tell you what is wrong with it .
suppose YSlow - you can check all css , js or images loading time. which take more and which take less and it advice you also so its helpfull to reduce the size of the page.

2. compress js and css
means minify js and css. you can do it with JSMIN or YUI COMPRESSOR , DOJO COMPRESSOR

3. try to cache the page as much as possible .

4. use Sprite image , image sprite means put all corelated image into a single image.

5. optimize Database and Database Query.
if you are using dynamic data from Database. so you can compress the query and reduce the loading time of the web page .

6.put css on the <head> part and js at the end of the web page.

7. use lazzy load for image , lazzy load help to page load first and than image will be loading.
many plugin aviliable for the lazy load for images.

8.use less or null cookie

9. on the coding part
1. user better logic which reduce the size of the code . so less processing means more speedy web page.
2. use better function which recommended by the expert. use less buffer which help to reduce processing time.
3. use less loop . or use it when it needed . each loop iteration take some specif time on based the code to run in between loop. so use it wisely.
4.if you using some api on your code , if you needed some data on regular basis than try it to save at local database so fetching time of data get reduced.
5. reduce inner server redirection
6. try to replace some slower part of the code . sometime you have library for specific task but it was coming with lots of other global programming (means programing which not useful to you site now) so try to find the replacement of the library or code yourself to reduce the size of the code.
7. Use "CRON" to do some task which not needed on each page request.
10. use Ajax when needed. i mean sometime we dont need to fetch whole webpage . Ajax help us to reduce the number of pages to load by just asking part of information instead of whole
11. make cachable to ajax as well so it take less time each fetch and Use GET method for Ajax
12. minimize HTTP request.so where not needed server processing avoid it.
Nilesh

Nilesh
answered Nov 30 '-1 00:00

1. Minified js

how to minify JavaScript on fly in php ?

2. use compress version of css and JavaScript
How to do gzip compress for javascript/css on fly in php ?

3. use sprite images
combine image more than one to one and load it once and use it for many
suppose google use one image for all image requirment

and by css trick they use part of image as per need

#logo{
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}


here four parameter define which image need to display x , y which is 0,0 and height or width which say how much portion of the whole image need to show.

Mahesh Radadiya

Mahesh Radadiya
answered Nov 30 '-1 00:00

Mostly heavy Web pages contain more and good size of images . so start to put less sized images .
.png file have good size . convert it to jpg or jpeg file .
Rasi

Rasi
answered Nov 30 '-1 00:00

Data URIs can help you to Speed Up Your Website

to speedup the website . reduce the http request needed for the entire page load
suppose a page have 23 http request

some of them are for image , css and js
you can use data URIs instead of using directly css or js or image src path .

How Data URIs speed up the website
Data URIs reduce the http request .
Data URIs load direct data to html without making http request

How to use Data URIs
USAGE::
data:[<MIME-type>][;charset=<encoding>][;base64],<data>


<img src="data:image/jpeg;base64,/9j/4AAQS ....EAAkGBhQSERIUExQ " />

instead of

<img src="data.png" /> 


same for css or js you can use it .
and reduce the http request and speed up the website



ravi

ravi
answered Feb 25 '23 00:00

Making web pages as lightweight as possible is important for improving page load times and providing a better user experience. Here are some tips for making web pages as lightweight as possible:

Optimize images : Use image compression tools to reduce the file size of images on your web pages. This can significantly reduce page load times without sacrificing image quality.

Minimize HTTP requests : Reduce the number of HTTP requests by combining multiple CSS and JavaScript files into a single file. This can help reduce page load times and improve performance.

Use caching : Implement caching mechanisms to store frequently accessed resources such as images, scripts, and stylesheets. This can reduce server requests and improve page load times.

Remove unnecessary code : Eliminate unnecessary code and comments from your HTML, CSS, and JavaScript files. This can help reduce file size and improve page load times.

Use CSS instead of images : Use CSS to create visual effects instead of images. This can reduce the number of HTTP requests and improve page load times.

Minimize external resources : Minimize the number of external resources such as fonts, icons, and scripts. Only include the resources that are essential for your web pages to function properly.

Optimize code : Optimize your HTML, CSS, and JavaScript code to reduce file size and improve performance. Use tools like minifiers and code linters to help streamline your code.

By implementing these tips, you can make your web pages as lightweight as possible, which can improve page load times and provide a better user experience.
Post Answer