I built a website that is currently live at this link Arema Insurance Agency
The issue is it takes too long to load the png images I have on there. Most of the body of the website was designed in adobe illustrator and imported as a png. The size of the homepage png is 4.4 MB and ( width="1892" height="3082" ) in my html.
Is there a way I can optimize the speed?
There are lots of options here.
Optimise the images. Run them through an online compressor like Squoosh.
Cache the website. How to do this is highly dependent on how the site is set up. Considering the site is made up of just three images (incredibly bad-practice by the way), I'd guess your setup probably isn't equipped for this.
Get better hosting. It shouldn't take 20 seconds to load a 4.4mb webpage, I suspect your hosting service is terrible. Sticking to the big players such as CrazyDomains or HostGator is your best bet.
There's plenty of other ways detailed on Google, but start with these as they are the easiest and most likely to have an effect on a site like this.
You can use developer tools from your browser and check the network section of that(similar to where you check console.log statement)
In Chrome to open network tab ctrl+shift+i and then network. It will open this up
As far as I inspected your HomePageOfficial_AIA.png is taking more time to load. So you can optimize the image accordingly or check your hosting support for the same
https://i.stack.imgur.com/1cxR7.png
Related
The thumbnails on my photos page take a long time to load, then if you scroll down the page and back up, they have somehow vanished and need to reload. I'm using an old version of chrome on Windows XP, so I'm sure that's half my problem, BUT, it still does this on my cell (galaxy S5). I'm a novice coder so please go easy on me lol. Here is the link to my website and the photos page:
http://www.mikemicalizzicontracting.com/photos.html
I can't really help you about your precise questions, as we don't have your code, but I am in a good mood so I'll just give you some tips to make your website quicker.
Some tips for optimize your images :
1) Resize your images
For now your images are displayed in 207 * 154, which is small, but you download them in their original size. You should resize them so the size of the image (in bits) would be much lower.
You can do that with a lot of online tools, or write a simple script for that in bash for instance. I think you will find a pre-made solution for the script very easily, or just have to download imagick (I am not sure of the name). This solution by scrip also depends on your distribution (wether you are usinc OSX, Windows, Linux..)
2) Cache your images first
It is always painful for the user to wait for images to display. So what you need to do is use browser cache (if you are novice you wil have some trouble but it will be worth it) to store the images data and then display them from this cache.
So the strategy is :
If there is the image in cache, just display it from there
If there isn't, download it from your server
once it is loaded, put it in cache; then display it from there.
3) (More advanced) Preload the images
If your home page is very easy to display (not a lot if images, not that much script to run etc), you can start download some images in the client and just store them in the cache.
This task should always be a second-hand task, it means it should not slow your user navigation. So depending on what the user is doing, you may will have to pause the request and start it again.
If the user go on the photo page when an image is currently downloading for cache, you don't need to start it all over again, just continue.
This last tip can be long to develop, but this is a good thing to do when you want to display very good quality images or just plenty of them.
If I just add 20 images or so, the site takes too long to load.
How can I make my site load as quickly as Google images and look
more or less like it but with at most 20 images (similar size
as Google images are)? Is it possible?
Here is an example page that takes too long to load:
http://dougingramnursery.com/whats-new/
The images are definitely larger than google images, google images shows you thumbnails then when you click it it shows you the larger image.
To create a thumbnail you can scale it down with any image editor.
First of all you might want to show us some code if you have some, we could help optimize it a bit. Then make sure you place your scripts when possible at the bottom of the body. Also compress the images using an image compressor along with using .htaccess to leverage browser caching. Which will practically remember those pictures when the users visits the page again, which will speed things up. Try to combine multiple CSS and JS files together or compress them using a tool such as Smaller if you have a Mac. If you're using Amazon S3 for hosting your images it should usually be pretty fast. But if its on your site then it might be a bit slower. SSL also slows down the time a bit. Your best bet would be to take a speed test and figure out whats causing the lag. Here's a few websites that will help with that.
Pingdom Website Speed Test
PageSpeed Insights
GTMetrix
I suggest you use Yahoo's SmushIt service to optimize your photos > http://www.smushit.com/ysmush.it/. After optimizing your photos re-upload them to the site, this should improve load time. Let me know if this helps.
Jesse
I have a website where it is taking too long to load, I believe the issue is the images loading in the sidebar. However I have come across another website that has the same feature as this website and that seems to load fast.
I am using wordpress and someone mentioned to me it could be something to do with caching, but I am not too familiar with this.
I was wondering if anyone has any ideas on how I can speed up the load time?
You need to 1st make sure your images are optimized for the web:
You can do it with the smush.it plugin: http://wordpress.org/plugins/wp-smushit/
or in photoshop by saving for web.
Also, consider using image sprites where appropriate - An image sprite is a collection of images put into a single image.
As for slow page loading in Wordpress install these plug-ins:
optimize-db plugin: http://wordpress.org/plugins/optimize-db/
w3-total-cache plugin: http://wordpress.org/plugins/w3-total-cache/
There are many factors to speed up wordpress. JFelton explained it well and you should try them but do try Autoptimize which increases good speed as well. Though if your issue is only images I would suggest getting a good hosting and a good CDN.
I am trying to load heavy ong images in website. I have tried to use photoshop -> posterize method to reduce the file size of heavy pngs followed by some online tools to reduce the png file size without major compromizing the filesize of an image.
I have als tried pre-loading images, but still they are taking a considerable amount of time to load.
Can anyone please suggest me some way to reduce the loading time of png images on website, so they that they load quick?
Many thanks in advance!
Even if you follow all/some of the the previous advice, a nice addon to your workflow is passing all your PNGs through PNGoptimizer.
It's a simple drag and drop program which strips unnecessary information out of your PNGs. Depending of the type of image, the size saving varies between 5-10% and more than 70%.
Try preloading using XHR and some server tricks.
Or use the webp format.
Your problem must be elsewhere.
At most, 79kb x 5 is less than 1/2 a MB. This would only be a slow load on a slow connection.
I suggest you install YSlow ( http://developer.yahoo.com/yslow/ ). It analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
There is a nice JS script to ease the preloading of images: https://github.com/jussi-kalliokoski/html5Preloader.js
Be also aware, that proper caching is a MUST for heavy sites. Google has a nice introduction for this purpose: https://developers.google.com/speed/docs/best-practices/caching
To avoid flashing images on your site, load low-res images with fast loading time, stretch them to the full size and replace them when the high-res images were loaded. To improve optics you could also place a grid over the low-res image.
This has a pretty neat appearance for the visitor and reduces wait time.
Depending on what server you have, I use image gen for all my .net sites.
http://our.umbraco.org/projects/website-utilities/imagegen
<img src="/ImageGen.ashx?image=/images/an-image.png&width=50&height=50" width="50" height="56" alt="">
Photoshop's Posterize will not help you; PNG's don't use a palette (Unless you choose PNG-8). You can use File->Export for Web to export a smaller PNG (or a gif). If your image contains alpha information, it will be lost if you export for web though. PNG-8 and PNG-24 both have index-transparency.
#ShrutiJakhete you can use lazy load Jquery with your HTML5. The images outside the view port will not be visible until you scroll down the page. Thus it'll reduce the loading time. Check this out http://www.appelsiini.net/projects/lazyload
I've been working on a website, and we've managed to reduce the total content for a page load from 13.7MiB's to 2.4, but the page still takes forever to load.
It's a joomla site (ick), and it has a lot of redundant DOM elements (2000+ for the home page), and make 60+ HttpRequest's per page load, counting all the css, js, and image requests. Unlike drupal, joomla won't merge them all on the fly, and they have to be kept separate or else the joomla components will go nuts.
What can I do to improve load time?
Things I've done:
Added colors to dom elements that have large images as their background so the color is loaded, then the image
Reduced excessively large images to much smaller file sizes
Reduced DOM elements to ~2000, from ~5000
Loading CSS at the start of the page, and javascript at the end
Not totally possible, joomla injects it's own javascript and css and it does it at the header, always.
Minified most javascript
Setup caching and gziping on server
Uncached size 2.4MB, cached is ~300KB, but even with so many dom elements, the page takes a good bit of time to render.
What more can I do to improve the load time?
Check out this article.
http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/
If the link gets removed or lost the tools mentioned are:
YSlow (by Yahoo)
Google's Page speed
AOLs web page test
Smush.it (Image compression tool)
It sounds like you've done a great job of working around the real problem: those giant graphics. You can probably squeeze some more efficiency out of caching, minifying, etc., but there has to be a way to reduce the size of the images. I worked with a team of some of the pickiest designers on Earth and they never required uncompressed JPEGs. Do you mean images cut out of Photoshop and saved on full quality (10)? If so, the real solution (and I appreciate that you may not be able to accomplish this) is to have a hard conversation where you explain to the design company, "You are not your users." If the purpose of the site is to only impress other visual designers with the fidelity of your imagery, maybe it's ok. If the purpose of the site is to be a portfolio that gains your company work, they need to re-asses who their audience is and what the audience wants. Which, I'm guessing, is not 2 minute load times.
Have you enabled HTTP Compression (gzip) on your web servers? That will reduce the transfer size of all text-based files by 60-90%. And your page will load 6-10x faster.
Search StackOverflow or Google for how to enable it. (It varies per server software: Apache, IIS, etc).
Are all the DOM elements necessary? If they are, is it possible to hide them as the page loads? Essentially, you would have your important need-to-be-there dom elements render with the page, and then when the document is loaded, you could unhide the rest of the elements as necessary
$('.hidden').removeClass('hidden')
Evidently, there are plugins for compressing and combining JS/CSS files:
http://extensions.joomla.org/extensions/site-management/site-performance
http://extensions.joomla.org/extensions/site-management/site-performance/7350
I would say you can't do anything. You're close to the absolute limit.
Once you get to a critical point, you'll have to compare the amount of effort you'd need to input into further compressing the site against the effort of throwing the most bandwidth expensive components out the window. For example, you might spend 20 hours further compressing your site by 1%. You might also spend 40 hours on throwing the Joomla theme away and starting again saving 50%. (though probably not).
I hope you find an easy answer. I feel your pain as I am struggling to finish a Drupal project than has been massacred by a designer who hasn't implemented his own code in years and has become institutionalized in a cubicle somewhere near a tuna salad sandwich.