I am finishing up a website for my business and stuck on this video loading part. My file is about 70mb, it's a background video. It takes a good 15-30 seconds to load upon entering the site which is extremely frustrating and then once it does load it lags most of the time. On a phone I can't get it to play at all.
This is an HTML template and I threw in the video that came with the site (10mb)and it plays and loads instantly. When searching about size however most people say 100-200MB shouold be fine and have no issues.
Anyone got any tips?
Here is my site: https://www.coastal-films.com/
And here is my video imbed code
'''
<section id="home" class="notoppadding text-light videobg-section"
data-videofile="files/uploads/coffee"
data-videowidth="1280"
data-videoheight="720"
data-videoposter="files/uploads/1690x1100.jpg"
data-videoparallax="true"
data-videooverlaycolor="#000000"
data-videooverlayopacity="0.6"
data-sound="false">
<div class="section-inner">
'''
The images & videos on your front page weight 170MB!
This is way too much to expect a quick page load.
Reducing image sizes
I took the photo001.jpg as an example: it weights 1.62MB and has a resolution of 2686x2850px.
Considering that it is displayed at 510x541px on the website, you can recuce it to this size, and compress it. I use ImageOptim but a lot of apps can do the job. After resizing / optimizing, this image weights just 24KB.
Server bandwidth issue
Regarding the videos, there is a bandwidth issue. Even with a 1GBps fiber connection, your server will deliver the videos at 500kbps maximum (I'm in France, it may be faster if you live closer to your server).
Let's take your Quickreel video: Weights 57MB for 23 seconds. At 500kbps it will take around two minutes to transfer. This i why you have so much lag: the server you are using is not able to keep up.
Compress the videos
You can reduce the resolution (720p should be enough given the size of the video on your page), and compress it with a software like Handbrake. I was able to reduce the size of this video to ~3MB.
Use the right image format
Some of your images (nick.png as an example) use the PNG format. It is a very good format to save illustrations or any kind of image with a majority of solid colors, but way too heavy to save photographs. Use JPG, resize and compress to reduce their size.
Related
The first background image I have on my website - loads slowly.
Now, it's a background image but it should fit a large screen so it's a 900K png.
What are the tricks I can make in order for it to load faster? (it's the first thing you see so even the 3-4 seconds it takes is felt...
There are lots of tricks. The lads above in their comments are right, there are things you can do to compress it, and analysis what is taking the time.
Load times and improving them are around 3 components:
- Network Latency (the time it takes to pass data from the browser to your host)
- Image Size (physical size of the image that goes down the pipe)
- Connection Cost (Time taken to establish the connection with the host)
Now, if you we take your scenario, you have an image that is large, but not huge. So how can we make it faster, well we can remove the time it takes to download by:
a) compressing it - many options here, along with the google one above, here is a simple one: https://tinypng.com/
b) remove the network latency by ensuring the host sends the cache-control with a max-age in it. This will mean when you refresh it the host returns a 304 and that browser shows the image from the cache
c) use a CDN such as cloudflare to do the hard stuff for you. A CDN will handle the compression, setting of the cache flag, reduce your network latency and ensures your connections are established quickly. Some like cloudflare have free starting tariffs, so worth a look.
d) lazy load the image using javascript after the page has rendered. It's still good to do all the above, but if you create some javascript to fire on document.ready and set the background using css/img tag, background or whatever mechanism you are currently using then it will start the download of the image at that point, enabling your users to see the page and interact with it ahead of your background being finalised.
Besides improving website performance, I consider it an important courtesy to site visitors to make a point of compressing all images.
(Not to insult anyone's intelligence here but, just to clarify, compressing an image is not the same as "shrinking" it's width/height — although both will reduce file size.)
If you have 1000 visitors and your site has 100 images and you save a half second of load time per image, then you just saved mankind 14 hours of page load time! (and it only takes a few seconds to compress an image.)
I compress the occasional "one-off" manually with:
TinyPNG.com for .pngs and .jpg's (up to 20 images at a time)
ezGIF.com for animated .GIFs.
Batches of images can be compressed programmatically using a library like:
pngquant, or
PHP's built-in ImageMagick.
As far as I know these all use the same compression algorithm, known as "Lossy Compression", which can reduce filesize significantly without any noticeable degradation of image quality.
I am trying to have High quality Images on my site like these ones in the slider here http://www.viewbug.com/ but when I have the actual of the picture, it wont load fast enough, due to the big size. I tried to re size it with photoshop but the quality of my photo would decreased a lot . so for example the following picture on this site http://www.viewbug.com/media/featured/2892642_large.jpg is high quality but small in size 377 kb, and then they re-size it with html code height = 900 and width =640 without ruing the ration dimension and it looks just fine inside the slider. I googled and I didnt find any javascript or html code that does this. how can I compress my images without loosing the quality
I'm a photographer, so I do this a lot. I export my images with compression settings that are invisible to the eyes, but reduce images far smaller than the original. Unfortunately, Photoshop uses a different compression scale than most JPEG programs (and JPEG is the only efficient and compatible photograph format for the Internet), and so for Photoshop, one needs to use specific instructions.
Try this tutorial:
http://inobscuro.com/tutorials/optimizing-images-for-web-35/
so by using punypng u can get the solution for dat. PunyPNG is a free website optimization tool that dramatically reduces the file size of your images without any loss of quality.
I have designed This site .The page load speed is very low.I found online site load time which tells the load time of the site.As well as it gives the other statistics .
The page load time statistics snapshot is as folows:
my question is how can i decrease the page load time?Since it becomes very irritating if the page load time is more then 2 sec..
Not sure that this is really a programming question but one problem I see is that your images are too large in terms of file size.
These images are rather large for example:
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/img/bgbody.gif (145kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/he12.bmp (450kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/slid11.bmp (1mb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/Istpanelfinal.jpg (303kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/TA_UnionSTN4.jpg (311kb)
You can start by using a program like Adobe Photoshop to save your images "for web." You might also want to look into converting those bitmaps and GIFs into PNGs. You may also want to make your JPEG images progressive.
If you don't have access to Photoshop, a free alternative that can "save for web" is GIMP.
edit: You might want to look into using some CSS to make a 1 pixel tall image repeat on the x-axis. You'd lose your gradient though.
Something like the following should work:
background-image:url(../images/gradient.gif);background-repeat:repeat-x;
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
Is there any way to do this without bogging down a computer?
I don't know much of the innerworkings of computers and browsers, so I don't know what about a bunch of images on a page takes up so much cpu. My first thought was to hide the images that aren't visible on the page anyway. The ones that have been scrolled past or yet to be scrolled to.
I tried a sample jsfiddle with randomly colored divs instead of pictures, but just scrolling up and down through that makes my computer sound like it's taking off.
What is it about all the pictures that takes up cpu? Can it be avoided?
The question is generally not about the amount of bandwith it might save. It is more about lowering the number of HTTP requests needed to render a webpage.
See this
What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.
Less http requests = faster loading overall
If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).
That's why CSS sprites are used.
For more informations, you can have a look at, for instance : CSS Sprites: Image Slicing’s Kiss of Death
Other than this you can also use lazy load