My site is taking a long time to load. It is quite resource intensive but upon checking a waterfall of the site load I have two images that take a very long time to load.
http://www.webpagetest.org/result/170919_0K_df1a409e4603bc6459c19cc03cc19aea/2/details/#waterfall_view_step1
I have scaled the images in the WP media image editor so that they are a reasonable size but the waterfall still shows long load times on those images?
www.linestar.ca
Any insights are appreciated!
Though you resized the image in wp, that doesn't really change the file size. I downloaded your dark banner photo and it was 12.8mb. That's huge and takes a long time to load. Try and get your images around 500kb or less. It should still be pretty clear at 200kb even. It will still have decent quality at those levels. Your image size is also huge, at 1920X3000. Definitely doesn't need to be that large. Check out this link for a rough idea of sizing: Image sizing for background images
Related
I know reducing your requests to the server will help reduce load time. Placing all of your images into a sprite can really help with this. However, when is a sprite too big?
The sprite for my page is 1.7mb! I thought about splitting the sprite up into smaller sprites. That will increase server requests and would seem to be a pointless task.
My site loads too slow and I’m trying to pinpoint the slow downs.
Can anyone suggest how should I handle one big sprite? should I break it into multiple files or is there any other suggestion to improve the page load time.
The best size is 4096 x 4096 What is the maximum sprite sheet size I can use for android devices?
So long as you are using fewer pixels than that, you should be fine. The only logical reason to break up your sprite images smaller than that is if you want to give the user an image to look at while they wait for the others to load. (Or if there are some images you know some users will never see on their visit.) But it will increase the loading time overall.
As for file size, add compression to your personal taste. If your hatred of the loading time and your hatred of the compression artefacts are equal, you have found the right balance.
I'd like to know how to increase the page upload time by compressing the images on my site, including the exit pop up gif?
Loading time is about 5 seconds.
It was built by WP.
How to fix this issue?
Please, tell me the way.
Thanks.
Your image files are likely too large. This is probably because your images have a very high resolution and/or are too large.
If you only need an image to be, say 400 x 500 pixels and your actual image is 1600 x 2000 pixels, you have an unnecessarily large image that will slow down your load time. You can reduce image size right in WordPress using their image editor.
You can also use tools like Photoshop to compress images so that they are smaller files and more web-friendly. Use Photoshop's "save for web" feature and reduce the image quality.
More detailed answers here.
I'm really confused with this one as it seems impossible to do.
When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:
Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).
The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.
I'm using jquery unveil and using the retina function on it too could that be the problem?
Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.
Really confused, any help would be appreciated.
Thanks
There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.
Images are optimized for different platforms (Desktop and Mobile)
Images are optimized for physical size.
Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.
Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.
You can deal with this on few ways:
Media Query (note that you have to use background image in this case)
Srssets
JS
Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)
Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!
I've tried to decrease the size/quality of my background picture, but still it loads rather slowly.
I often visit sites that have much higher quality backgrounds that load instantly
my site: http://staging.tabler.io/
How can I speed it up?
Your image is 1.1 MB so, contrary to the filename, it's not optimized. Save it as a smaller file and/or optimize it with an app.
Also remember that the browser will cache the image.
I know you can reduce page load time by using CSS sprite. As this will reduce round trip, etc.
Is their any numerical value or performance test that by using CSS sprite how much average page loading time you can save. I know this will depend on the site. I am interested to know about a general data for e commerce site like Amazon.com
Besides, if you use async image loading like JAIL how much time you could save. I know u can't load everything asynchronously.
Having a large sprite, versus a small image, the large sprite isn't that much bigger in file size than the small image, assuming you line your images in the sprite horizontally like your supposed to.
Most browsers will do about 6 simultaneous downloads at once. So a general rule of thumb is, if you have more than 6 icons, or theme graphics, it should be sprited. If you have photos or illustrations, they should not be sprited.
Improper usage of sprites will lead to overload server. Sprites are used to reduce the number of server requests, but large srpites of jpg format can be bad.
It is like balance either all smaller images of less size or a sprite that i of smaller size that covers more images
http://coding.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
The page loading can reduce upto 10X factor when they are use
optimally!!
Hope this helps