I need your help.
In my web page, after page load, the image has to wait some seconds and then it is shown.
But this is not user-friendly. How can I handle this situation?
I don't want to use the loader icon because it delays the page so much.
You can do multiple things:
Load image independently so that it doesn't affect page load time.
Style a placeholder container so that everything looks good with or without an image and the layout doesn't jump around when the image is loaded.
Cache the image.
Scale image down on server. If it's uploaded by users, you can save both, the original and a scaled down version. Display the scaled down version by default and load the original only if the user clicks on it or something.
Invest in better hardware to reduce network latency :)
Also, not sure what icons you use but they shouldn't affect page load time by much. Try Font Awesome
Related
I currently have a page with about 20 or images with source data pulled from a database.
I display them at width of 100px and I have a hover function that appends an element with the full size image with a width of 250px.
I decided to use the full size version for the original image and just scale it down to 100px instead of using a thumbnail version. My thinking on this was that on this page it is very likely that the user will hover over most of the images so the page would end up having to load the full size version for most of the images anyway so why make them download the thumbnail AND full size version for each element. Also scaling from 250px to 100px didn't seem to display much if any distortion in the smaller element.
Now I am running my page through Google page speed analyzer and it really does not like me using larger than necessary images for the smaller elements. Of course it is ignoring the fact that those larger images are being used for the dynamically created popups.
In order to make my page play nice with Google's page speed tester I am giving in and using thumbnails for the smaller elements but I also want to prefetch the larger image to avoid an annoying delay when the user hovers over the element. This means I am essentially loading 2 versions of the same image just to make Google speed test not yell at me.
This seems ridiculous to me so I wanted to ask if this is really the best way to do this or is there another way to make my page play nice with Google speed test.
Thanks,
Adam
If you know what you're doing, there's no need to be a slave to the PageSpeed score.
Loading two copies of the images could make actual page speed slower. However, it depends on what you are trying to optimize for. Loading thumbnails first and then large versions could be better if you want time to full render to be fast (so the users can see the page) and then load the big images in the background to add interactivity later.
Or is it better to have fast time to interactivity, and time to full render doesn't matter that much. Then maybe having one copy of each image is better.
When i create gallery on my website, i need thumbs? Or i can use full images and resize it with css?
For example, i have gallery like that: http://otomoto.pl/renault-20-r-20-1-6-1-6-gtl-C21940610.html
If every images will be resizing with css, then browser will load the same image many times or one? Page will load faster when it will be image01thumb.png, image01normal.png, image01full.png? Or just image01full.png?
If you resize with CSS, then the client will have to download the whole image and resize it, which is not good in terms of bandwidth. You want some thumbnail-sized images so that you can send a small image to the client rather than having to send the full thing.
It depends what kind of gallery you have. Obviously when you are using thumbnails the client does not have to download the full image if he never sees the full sized one. But if you have a dynamic gallery where for instance you make an image bigger with a tween/animation on mouse over it might be preferable that the image already is loaded so the transition goes smoothly.
A website that I'm currently working on has a number of slideshows. The issue is that the page loads and then the slideshow loads a second later. How do I improve loading speeds of the images? The site is hosted on Amazon. The url is http://gatehouse75.com to see what I mean.
There are a few ways you can do this:
Optimise image sizes. For example, images used on the front banner are 1920x1610. However, most screens are not that large. Use different sizes based on view port (screen size).
Reduce image sizes by changing compression and/or using a different format.
Preload images when the users visit certain parts of the site. That way when users get to a page with a gallery the images get served from the browser cache.
Finally, you can put a "loading" notice while images load if none of the above suggestions help. This is good for usability.
Convert your jpgs to lower quality and your logo (in png) to gif in grayscale. This should save a lot of space.
Right now the home page slideshow images are scaled to 1349 X 429 for me. I am using a laptop. The actual size of the images on the server is 1920 X 610 (at least the one that I inspected). This means two things: (1)The image served is a larger filesize than need be which takes bandwidth, and (2)that the served image needs to get scaled down which takes client time.
What is the max width for this slideshow? It is a fullscreen slideshow, so I understand why the chose to use the bigger image. Though maybe you can take the original compress and resize in a way that is acceptable?
You can also consider having a loading .gif in place while the content loads.
Also, go through and minify linked files... css, js.
1. Follow image file optimization best practices.
2. Use a fast CDN combined with a smart caching strategy.
3. Put your above-the-fold image refs (especially large "hero" images) in an inline stylesheet, immediately inside the <head> tag, in the html element selector, like this:
<head>
<style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; }
</style>
This will get you the fastest time-to-visible for the images that impact perceived page speed the most.
I have a slideshow which will be displaying large 400px X 1000px images. I need to have thumbnails of each image in the slideshow, so I was wondering... will the page load faster if I simply use a second instance of the image but lower the width and height - will the page load the large image twice? Or would the page load faster if I load the HD image and a smaller thumbnail?
Generally, I would advise against using images that are larger than the intended use. I would, personally, definitely recommend serving a properly sized image. These recommendations are based less on page load time (as the difference in your case is probably negligible) and more about best practice.
A very handy php utility I've use a lot for stuff like this is timthumb
Generally it's a bad practice to create an image gallery of any kind using only full size images, lowering their dimensions when using as thumbnails. Yet if your case is a small gallery with < 30 images displayed per page, then this might do. In the other case scenario, imagine that a page has to preload all of the big images no matter if user would play the whole slideshow or not. This slows the page load time and generates unwanted data transfer. When it goes to timing, it would still be faster to generate thumbnails. A good tool for that could for instance be phpThumb which is able to generate any image size from its original and cache the output afterwards, speeding up the page load next time.
I just started using the chrome developer tools for some basic html websites and I used the audit tool.
I had two identical images, one with the height and width attribute, and one without. On the Resources section, both the latency and the download time were identical. However, the Audit showed
Specify image dimensions (1)
A width and height should be specified for all images in order to speed up page display.
Does this actually help? And are there any other ways to speed up page time?
This is only a splash page for the website I am building and as such it is only html, no css or javascript or anything. I have already compressed the images but I want to speed up load time even more. Is there a way?
Generally speaking: If you specify the image dimensions in the <img> tag, the browser will know how much space to allot for it and will proceed to render the rest of the page while simultaneously downloading the image. Otherwise, the browser will have to wait a few more milliseconds to get the size of the image from the image itself before rendering the rest of the page.
Since you have only a splash page, I doubt that there will be anything else for the browser to render, so it doesn't much matter whether you specify dimensions or not.