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.
Related
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
I have a web page which loads almost 70-80 images on the web page. I already have implemented lazy loading. Should I keep these images on local server or on some image site like picasa and reference it from there ? or is there any better option ? What would be the best way to load these many images without loosing performance and efficiency ?
Please suggest.
One more question - is it good idea to add css animation effect to those images ?
There are a number of things you can do.
Use a tool like smushit - www.smushit.com to optimise images and reduce loading times.
Make sure that you are not resizing large images by setting incorrect widths and heights.
Call images from a subdomain on your server.
Combine images used as backgrounds/display elements into a single image (known as a sprite), and use css to only call specific areas of the single image - this means it will only be loaded once, reducing HTTP requests.
You can get some advice on using Sprites here: http://css-tricks.com/css-sprites/
You can also get some more info on page loading times, and things you can do to optimise by using GTMetrix tools at http://gtmetrix.com/
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 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
How can we speed up the process of loading hundred's of images in as3? it seams to be taking a very long time to load 100's of images.
If you don't have the ability to change the image quality or sizes, then there isn't a lot you can do to speed up such a large load, as you are limited by connection speed and simultaneous browser connections.
You may be benefitted by using a loading manager, like Greensock's LoaderMax. LoaderMax will help make sure you are loading several assets simultaneously - check out the maxConnections parameter.
Also, I suggest not loading everything up front with one preloader. Instead, have placeholders with a spinning loader for each image that then gets replaced by the final image once loaded. This will provide a much smoother user experience and create the illusion of the overall load taking less time.
100s of requests can take quite a long time even if the total size of the images isn't prohibitively large. If you know which images you need in advance, you could embed the images in another swf which you load at runtime.
By the way, what is the reason that you need to load 100s of images right away. Is there any reason you can't load them in the background a little more slowly?
A few suggestions:
Reduce the filesize of your images (obvious but most important).
Don't run all the requests at once - queue the images and load them one at a time (most relevant to least relevant).
There were lots of good advices already. But here a re my 2 cents. One day I had to load about 1000 of really small images. It was taking too long so I used FZip AS3 library. Worked like a charm.
The question does not provide a lot of specifics, so here are some general guidelines.
If the images are large JPEGs, you might be able to sacrifice some quality and recompress the images to make them smaller.
If the images are PNGs and represent, e.g., lots of small, individual tiles for a game, you could try combining many of them into a single image and then parsing them out into images on the client side after loading the image over the network.
Implement download queue, for example simple loader
https://github.com/hydrotik/QueueLoader
Do not load images that
currently out of stage (you can load them in background)
Use texture packer if you have plenty of small images
Optimize pics
quality (i.e. size, type)
Use cache, for instance Local Shared
Object, so for next time you'll get your pics ultimately fast from
LSO.
Is there any way to get thumbnails of the images made? If so, you could use the thumbnails while the larger versions load. Load all the thumbnails first (since they'd load really fast), then load the larger versions in prioritized order.
It sounds like you don't have a lot of control over the images, though. If you don't have any control there, there's very little you can do to speed up the process besides using a loading optimizer as others have suggested.