I'm trying many problems with the time loading of my web page:
www.alvaromillan.es.
I've tried to minify the js and the images but the problem is, as you can see, that my web site is only this page so every image and js is on this document...
The loading time is really high and even the smooth scrolling movement lasts a lot and the first time you use it it doesn´t go fine...
Please may any of you help me??
I took a quick look at the page just using the chrome developer tools and while there are probably several things you can do which YSlow would suggest, I think the biggest gain would come from optimizing and spriting your images. 131 of the 156 requests on your page are for images. Thats alot of images and many are fairly small. Also alot of the images seem quite large in bytes for their size. Here is what I would do:
Combine the images using several sprite sheets about 50k-100k per sheet.
Use the PNG format.
Quantize the sprite sheets to 8bit PNGs. My guess is that you will not experience perceptible quality loss by doing this. You could use spmething like pngquant to do this.
Use something like optipng to apply lossless compression on the quantized image.
I think this will yield dramatic improvements.
As skaffman suggests, do run yslow and/or google page speed test for more thorough suggestions. I also like using webpagetest.org which provides great metrics for optimizing pages.
Give the YSlow Firefox plugin a try. It will analyze the load times of your site and advise you the best course of action to take to fix it.
OK, here's some quick initial thoughts...
Flush the page after the head so that the browser can start downloading those resources sooner.
Remove the iframe
jquery appears to be loaded twice - once directly and once via google.load
Can you defer the loading of the javascript until later e.g. put it at the bottom of the page or load it asynchronously?
Rather than preloading the slideshow images - why not load them on demand when clicked on, or lazy load them after the page has finished load?
Also do you really want IE to emulate IE6???
Related
recently I made a website for my photography. htttp://www.simotamas.com
I am a newbie, so its not the best site but it works fine for me, I got only one problem, when a site is loaded on a device for the first time, the gallery loading time takes up to 1-2 seconds.
Could you guys please check if I mess up something with the code?
Or should I made the pictures even smaller?
Any way I could increase the loading performance.
I would be really thankful for any advice.
Some points you can consider
Use thumbnails for preview (low resolution) , while clicking load actual image.
Load images of only visible part first then load the images in bottom. (May affect user experience)
if you have cpu power , use any libraries like cache tools or compression tools like
https://nielse63.github.io/php-image-cache/ . benchmark it carefully.
use gzip if you are not using gzip compression for your server.
The fact your website doesn't wait for the image to load is considered a plus (look into asynchronous web page content loading for a good read) that said you should compress your images before uploading them.. tinypng.com is a nice tool for it... But if it's a photography website doing so would reduce picture quality... Try to play with Photoshop save settings to find your ideal compromise between quality and size with respect to "memory" size... Pictures are heavy.. high definition and resolution will obviously result in heavier files to download
Update: another thing you could do is actually display (smaller) thumbnail and only load the full picture on request. I.e: user clicks and image opens in new tab
It would help if you create smaller thumb versions of your images so the browser can initially load these ones for the overview and no need for scaling way to big images down while rendering the page. An image should always be downloaded in the dimension it's going to be presented.
We can't seem to be given any answers as to why our website is so slow and continues to get slower. Can anyone tell me why http://www.kaboodle.com.au is slow and what we can do to fix it?
See report: https://gtmetrix.com/reports/www.kaboodle.com.au/yc1I3YXZ
I will break it down for you:
Scale and optimize the images you have. use photoshop "save for web", jpeg mini or if you use wordpress EWWWW image optimizer. Some images are much bigger than their display ratio on website.
Addthis can sometimes slow down websites. Try moving it to load on bottom
Your most problematic loading element is the dns. check with your dns provider if they can fix it. Anyway you should use cdn like CLOUDFLARE or MAXCDN
Do all these and I think your page will load much much faster. You can get to 2.7-3.5s easily
My website for architectural visualization: http://www.greenshell3d.com
I noticed on the networking tab / incognito it takes 15 seconds or so to load the above-the-fold content. (most notably the image slideshow.)
Some of the images in the slideshow load at the very end instead of the beginning of the website load process. Now I understand the browser handles this order, but perhaps there is another way. As it stands, the bounce-rate is too high and I expect it is because of load time.
I've seen a jquery snippet on github that allows one to control the order of image loads - do you think this is a good option? I'd be glad to hear any opinions before investing the time to fix this.
Any ideas? Thanks!
You said you are interested in any opinions as well, so first some general thoughts: There is no page fold. The web that we produce content for exists in so many different screen sizes + resolutions that it’s impossible to say "The fold is below this big image!". Yes, Google changed the pagespeed insights tool to make people load stuff on top of the page first, but I think their wording there is really bad.
Now to your image loading issue:
The first thing I would recommend is to reduce the size of all the images. They seem to be around 280 - 300 kb per image and you have a few of them. Since there is a translucent overlay over them anyways you can probably get away with reducing the image quality without people noticing it (because they don’t see the image directly). Play around with the values here.
I would then look into optimizing the code for the slider to load the first image first, then the rest of the page and the other images asynchronously maybe after that. Another trick could be to increase the slide fade time from the first slide to other slides so the slider doesn’t change if the next image isn’t ready yet. You said you found a jQuery script to implement that, that’s where I’d start.
As a general guideline: the position of requests in the source code usually determines the load order of things on the page. If your images are requested by JavaScript at the end of the page, that lead to the images being loaded later than you want them to be loaded.
My website seems to take on this "squeegee" type load effect, where all of the graphics load from the top down with an ugly top to bottom wiping effect. Is there a way to make the actual way in which your website renders graphics prettier?
I'd be more interested in why your page is taking so long to load and/or render. If it takes several seconds to draw, even on a fast connection, you might want to look into why that is. Tools such as Fiddler, Firebug, IE Developer Tools, etc can help you look at what resources your page is downloading and how big each research is.
If you have massive resources on the page (such as BMP or PNG files that are several hundred K), see if you can convert them to other formats or resize them on the server to the size they render at.
If your HTML is massively complex, such as huge nested tables, you might want to look into simplifying that with more modern HTML and CSS styling.
If you do have huge, high-res bitmaps that need to be loaded, you might want to preload them with script and then render them dynamically when they finish loading.
I am trying to optimize my site to accomplish at least 90 on YSlow and PageSpeed.
I am doing pretty well. But in the following result, there are 4 images that show that take 9-10 seconds to load. If you see the detail, it actually shows that of those 10 seconds, mostluy 99% is while connecting only.
This is a magento store, and I am not sure what I should do to fix this problem because the images are not really big.
http://gtmetrix.com/reports/www.theprinterdepo.com/FyZjLbUX
Thank you
Interesting, even WebPageTest.org shows the same issues, but there's nothing obvious as to why this occuring (at least to me), but I can make some guesses:
you're calling an image from within the .css file on www.printerdepot.net to an image on www.printerdepot.com? (additional DNS lookup)? Sharding issue?
but then why does it only affect some images?
a bunch of other possibly related issues that are cascading through?
I'd suggest trialling converting them to Base64 Data URIs and updating the CSS to see if that improves the performance. See this article for more.
instead of having small images why don't you have only one image sprite? It will be much faster (http://www.w3schools.com/css/css_image_sprites.asp) and you will only need to send to the client one image