I have this client that wants me to make him only with HTML and CSS all in this 2 files three table designs.Tables that are different in content and in number of rows. So that he in the future to be able to easily change the table displayed or the design of the table regarding the background-color, table borders, Font Awesome images, etc. ...
So, I think that the best solution it would be to create the structure in html and design them separately in 3 different CSS files. Rather then to design them in the same file and use 3 classes (for every element that needs to be shown or hidden)
My questions is in the fact that I write aprox. 300 lines of HTML code for this 3 tables and every time the browser reads my page will be showing only one table, 100 (just to say).... How this will affect my loading time of the page. Considering that this table will not be the only element to be displayed, maybe there will be images, videos....
Thanks!
The short answer is yes, it will affect loading time.
It affects load time because it will add to the overall size of the document and affect the download time for the html and css file.
That being said, 300 lines of code may not make a significant difference in your load times as much as adding images / videos. Probably best to build it and do your own testing to see if it's worth splitting into 3 sets of files.
Related
If I have to show one image many times on my HTML page, which is better from the point of view of site performance, many image tags with the same src URL, or many elements with the same background image defined in CSS? The first way, the browser should cache the image the first time it requests it, but there are still many requests to deal with. The second way, it seems to me there is just one request, when the CSS is parsed. Am I right in thinking that is more efficient?
Even in the case of CSS, the multiple background-image rules would still involve the browser making one web request & then caching the image. Exactly the same mechanics would be in place. The fact that the images are referenced in CSS rather than in HTML doesn't allow the browser to magically 'know' it already has the image without even checking the cache.
The primary difference between your two scenarios is that if you reference all the images in CSS, the CSS itself could be cached, which would represent a minor performance improvement, and your HTML files will be smaller. The improvement may or may not be substantial - it depends on many other factors such as how many image references we're actually talking about, whether your HTML files themselves are cacheable, how many page-views your users make on average, and so on.
All said, the CSS background-image is likely to be marginally better, but not for the reason you state. Whether you're talking HTML or CSS, you're still looking at one request followed by a bunch of cache-hits.
While making a webpage I've noticed a huge decrease in performance(client side) when I've added more rows to a table. Each row in my table consists of the same 4-5 different 32x32 icons (links to actions) and about 100 characters. When there were 10 rows, the webpage run fluently - scrolling and jQuery animations were smooth. Now that my table has 100+ rows (pagination is not an option), the animations are really slow and rough.
Is there a way to optimize not the images themselves, but the code, to raise performance?
Right now I have images in tags. Will it make any difference if I will change them to with background-image? Will the browser be less loaded?
If images are the problem, it is likely because the client is trying to re-download the images for each row, which is very inefficient even though the images are small. You can test if this is true with a tool such as Fiddler by checking if you get a whole bunch of the same requests every time you reload the page.
If this is the problem, look into CSS sprites. With this method, you can deliver 1 image to the client, and this one image will be used to render all of your icons on all your rows.
im making a memberlist for my website, we got 500+ members and want them on 1 page. we used tables before but this makes many dom elements and firefox says it gets slow.
is there a way to make a list with 3/4 colums with css to avoid the nr. of dom elementst?
greets. stefan
In cases like this, the best way to display 500 elements is with Javascript. Having 500 records as JSON is not that big of a memory hog, totally acceptable. You'd have to make a dynamically updating table that takes the records from memory and displays only 40 rows at a time. You could also implement search etc in JS to make it more user friendly.
I'm using several PNG images (via CSS) into a site's template, xhtml and CSS,.
I've kept the pngs as small as possible, and optimised as possible, but when testing it in any browser (Safari, Firefox, IEs) it takes at least 2 seconds to render.
Unfortunately I can't share the code here, but I can say that I've removed all javascript and my html code is fairly small (about 250 lines and no tables) and validates correctly.
I would like to know if the PNGs are the "guilty" part as this is my first site done almost exclusively with pngs (instead of gifs + jpegs) (I won't support IE6 so no need for hacks).
No, they do not take time to render (unless you have a really slow computer). What does take time, is the retrieving of a lot of small files. When you query a web-server for a small file, the time retrieving the file itself does not take long. But to setup the connection etc. etc. adds up.
So, what you should do, is to make what is called a "sprite". Combine all the small images to one large and "cut" them with CSS. How it is done and what it is exactly is explained here:
http://css-tricks.com/css-sprites/
and here
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
If you have many images (doesn't have to be PNGs), then download times will be impacted. By default browsers have a limited number of threads to download content with (IIRC FF has 4), so the more images you have, the longer things will take.
Additionally, if you don't specify dimensions on your images, the browser can only correctly layout the page when an image arrives. It will need to reflow the layout for every such image, which is both expensive and time consuming.
In short, ensure you don't have too many images to download and that the HTML markup has the right dimensions for them.
One workaround for having many images is to use CSS sprites.
Check this link. Read under the "Optimize Images" tab.
Best Practices for Speeding Up Your Web Site
Speed up Images Load Time
I hope this was the thing you needed.
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
My questions:
Is this a good idea?
If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images?
Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
Why?
Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
You can add other UI or layout images to your sprite
Optimize the resulting PNG:
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
When not to use sprites:
When part of the images in the sprite change frequently
In this specific case: when the majority of users would need less than the (about) 10% of the images
I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.
Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.