I have a simple website created with HTML, CSS and JavaScript and it's hosted on Github pages. But on my site I have like 20 images and when I open my site on the browser it takes a while for the images to load.
How can I make my images load immediately or just faster? Is it because of Github pages host or is it because there are a lot of images on one site?
I have seen websites with more images than that and they are like preloaded or something.
Here is an image
Ways to make images load faster on page
0. Check what's slowing down your page
You can try finding what's slowing it down here: https://web.dev/measure/
1. Compress your image
You might need to compress your image if you don't need it to have so much quality. If you need quality, go to option 2. One website that does this is Kraken. This should allow the page to load faster.
2. Use a CDN
If it still does not work, use a CDN, or content delivery network, to host your images. CDN's store data in many data centers, making it to load data quicker. Try hosting your images in Cloudflare.
3. Make your images smaller
Large images can make your site load slower. So, resize them so they are a bit smaller.
I hope this helps you!
Related
I'm working on my first GatsbyJS project (and hosted on Netlify) and over the past few weeks have noticed that everything is very speedy during development, but when built and hosted the pages are very slow to load (particularly the images).
This is a very simple marketing site (just 6 or so pages with a few images per page), so I figured I must be doing something wrong since Gatsby is said to be "blazing-fast", and that is definitely not my experience in prod. The landing page currently takes ~40sec to load, and is only a few images and a nav bar.
I'm loading images fairly simply per the docs, but is there some optimization step that I should also be doing? Or storing assets in a particular location for Gatsby to optimize?
Most recent build: https://musing-goldstine-2f7024.netlify.com/
Thanks for any info!
With Netlify you can now go to the site you wish to optimize, then: Site settings > Build & deploy > Post processing.
I turned them all on and they seem to work perfectly with my GatsbyJS site, including image optimization.
The issue is that you are serving scaled images. A scaled image is an image that has been scaled to match the size that it is displayed.
For example, on this page:
This cityscape is resized in HTML or CSS from 3840x1200 to 1366x600. Serving a scaled image could save 5.0MiB (82% reduction).
To track this: open Chrome Developer tools (CMD + OPT + I) on Mac
Navigate to network tab, CMD + R to refresh
You can sort by size, load time, etc.
Chrome Developer Tools Network Tab on this site
Another good site to analyze your page speed:
https://gtmetrix.com/
To improve page load time:
Use a photo editor (Photoshop, GIMP, etc) and resize the photo dimensions down to the maximum display size.
After resize, compress images to improve page load time further.
Resources for compressing images:
NPM package such as sharp
Command line tool: ImageMagick
In Browser: Optimizilla
Image Optimization Guidelines
Google Page Speed Recommendations for Optimizing Images
Final step: Replace your unoptimized images with your newly optimized images. You should see a drastic improvement in page load time.
I am currently using the Flickity library to display corousels on my wordpress site.
The problem: When the site produkte is loaded the first time a lot of images get not loaded fully but only the first centimeter.
I am happy for any hints regarding this problem.
Kind regards
Lukas
1) Optimize images using Photoshop or below url and then upload in word press
or add image optimizer api in your word press website
https://kraken.io/web-interface
2) Minify CSS
3) Leverage browser caching for the cacheables
4) Minify HTML
cross check with https://gtmetrix.com/ too
hope this will help and boost website performance
Best luck
The most improvement you can get is to optimise the image size to make them as small as possible. Use this online service to reduce image sizes.
https://tinypng.com/
You can also install a plugin like Smush to optimise images automatically when they are uploaded.
https://wordpress.org/plugins/wp-smushit/
Also to reduce image sizes in the future you can install this plugin to ensure files of excessive size are resized.
https://wordpress.org/plugins/imsanity/
Once you have done this then you can use a caching plugin to speed up you site's overall performance.
I have a friend that is making a portfolio site. He has some high res images that he would like to display. There will be multiple projects on one page, and several images per project. Because of this, he would like to reduce load time as much as possible, and also conserve system memory usage. That being said, he's afraid that a conventional jQuery slider will eat up too much memory if it's called multiple times on the same page. Also, to load all of the images at initialization is just not an option as this would create long load times. Does anyone know of any image sliders, either jQuery or HTML5, or both that can help with this?
before spending time searching for a good jQuery slider...
...start from the basis:
start following general web design best practices like theese
keep your web page under 100 KB and load fast ? (the more is less the more is better)
use CDN (Content Delivery Network) to store HD images.
load HD images only on-demand, do not preload them.
use compressed, converted (avoid png) and resized images to fit the slider container.
do not scale images with CSS or inline CSS. (neither server side)
make use of the Lazy loading design pattern. (if as you say there are lots of images and the page is going to be very long)
so I was browsing through this page: http://360langstrasse.sf.tv/
It basically is a Javascript-Street View, but only allowing one direction. Therefore its kinda like playing a movie.
When moving fast I notived that the images are grainy/pixelated, the same way as when browsing through Facebook.
I was wondering how to implement this?
I tried with sending small base64 encoded images in the markup, and then draw it on a canvas until the 'real' image was loaded.
This worked fine, but left me thinking if this would indeed increase performance, or do sites like facebook do it differently?
Thanks in advance for any help.
Regards Jens
Edit: Or do they only display the images differently? Have another render process than usual?
As I don't see any small images beeing loaded?
Edit 2: The below mentionewd option to load small images first is descriped nicely here: http://www.phpied.com/picassa-progressive-image-rendering/
But basically it is pretty simple.
I suppose caching (having in-page) bad-resolution images and fetching better is a real way to accomplish this.
The other way would be linking to small images in a normal way, and fetching bigger with JS - small images should load really fast, or you can subscribe to their load event (tricky in IE) and show the page (remove some overlay) once they are loaded.
BTW, instead of using canvas you can put base64 directly into src
<img src="data:image/png;base64,...
The answer is Progressive JPEG's!
One create such with imagemagick for example. This way the browser renders progressively until aborted or completed. Those images may be bigger than normal images, but not always.
Furthermore they provide the ability to be seen before completely downloaded.
Thanks for the help!
I was wondering if there is any other ways to compress my images or any script that would load the page faster / or the the images behind the scenes?
The site is very interactive and using very high quality layers of images for the main layout. I have already saved for web devices in Photoshop and re-compressed using ImageOptim, some are jpeg but the majority are png24 to maintain transparancy, they are all set in CSS.
I have used jpegs and css sprites where i can but there is one in particular of a tree illustration streching the full site length, that is really slowing up the loading time, is there any I could compress these images further or code them differently that I missed?
Any help would be great thanks!
You said you are spriting. That is good.
You can also use tools such as PNGcrush which attempt to make files smaller by dropping things such as meta data.
You should also send far distant expiry headers and use a cache breaker on your images, to ensure the images won't be downloaded again if unnecessary.
In Photoshop, choose file-> save for web, you will be able to find the best compromise between size and quality.
Do you really need the transparency there? PNG transparency is unsupported on some browsers and makes the page processing intensive and slow even on high end computers, depending on image size and quantity of layers. If you can show something of your site maybe someone can give more hints about how to optimize it.
You can compress them on the fly with Apache if that's your web server. One of many available articles on the subject: http://www.samaxes.com/2009/01/more-on-compressing-and-caching-your-site-with-htaccess/