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;
Related
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.
I have been wondering how facebook load images so fast.
I am not on any projects related to my question, but I'm just really interested.
With some observation, I noticed that facebook loads a low quality picture as temporary, and shows the high quality one as soon as it is fully loaded.
this makes it seem like it loaded it so fast, but really it was just a low quality one at first.
My question is, how does facebook implement that?
When I put image on my site, it loads it from top to bottom in full quality right on.
Is this done through Javascript/Jquery ajax? or something?
is done through php?
did facebook make to versions on their end? low and high quality? and send the low quality one first?
Thanks :)
Yes! you are right, Facbook loads low quality image first then render it based on network speed. this method called "Progressive JPEGs" which is another type of JPEGs, they are rendered, as the name suggests, progressively.
First you see a low quality version of the whole image. Then, as more of the image information arrives over the network, the quality gradually improves.
From usability perspective, progressive is usually good, because the user gets feedback that something is going on. Also if you’re on a slow connection, progressive JPEG is preferable because you don’t need to wait for the whole image to arrive in order to get an idea if it is what you wanted. If not, you can click away from the page or hit the back button, without waiting for the (potentially large) high quality image.
There is controversial information in blogs and books whether progressive JPEGs are bigger or smaller than the baseline JPEGs in terms of file size.
If you use tool like Photoshop or any designing tool while saving any document in jpg or other format it will ask you 2 option one is for Baseline and another one is Progressive.
But you can achieve same on run time also if you have written any API for this to convert your baseline images to Progressive images while displaying on webpage.
From my understanding, when you click on an image from the Facebook UI, the viewer appears with the low thumbnail version (or a slightly larger version of the thumbnail) loaded. Because of browser caching, that low quality image will display very quickly.
Then in the background, they use javascript to load the higher quality image. Then using some javascript events, they can detect when the higher quality image has loaded. Once loaded, replace the lower quality version with the higher quality version of it.
So from the UI perspective, it's only Javascript. When you upload the photo, they create multiple sizes of the image to allow this effect to happen.
I have a slideshow which will be displaying large 400px X 1000px images. I need to have thumbnails of each image in the slideshow, so I was wondering... will the page load faster if I simply use a second instance of the image but lower the width and height - will the page load the large image twice? Or would the page load faster if I load the HD image and a smaller thumbnail?
Generally, I would advise against using images that are larger than the intended use. I would, personally, definitely recommend serving a properly sized image. These recommendations are based less on page load time (as the difference in your case is probably negligible) and more about best practice.
A very handy php utility I've use a lot for stuff like this is timthumb
Generally it's a bad practice to create an image gallery of any kind using only full size images, lowering their dimensions when using as thumbnails. Yet if your case is a small gallery with < 30 images displayed per page, then this might do. In the other case scenario, imagine that a page has to preload all of the big images no matter if user would play the whole slideshow or not. This slows the page load time and generates unwanted data transfer. When it goes to timing, it would still be faster to generate thumbnails. A good tool for that could for instance be phpThumb which is able to generate any image size from its original and cache the output afterwards, speeding up the page load next time.
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 am making a website where i want one huge image to cover the complete background. I have seen many websites where the images in the background look to be of very high quality and still the pages load really quickly. How?
for example look at this link http://g2geogeske.com/menus
how can i achieve images with quality like these without compromising with the load time. Also if anyone knows of any tutorial or site which explains this please post the link to thanks.
even after being so big its just 170 kb(backgroung in link).my images are at about 700 kb and still look of lower quality then the one in the link. Am i missing something. some trick or anything??
You want to know how to compress images? Go download a decent image viewer (Irfanview) or editor (Paint.NET) and go to town! The background for the site you linked is a 171kb jpeg file; that's peanuts for a half-decent internet connection.
usually when you save an image as a jpg, you have the option to specify a 'quality' rate. If you look at the image in the site you linked, the background image, even though it's really big, it's only 170K. To me, the magic number to save a JPG is 90% quality.
ADD: Also, if you use Irfanview, you can add a plugin called 'RIOT' that compresses images even further (I think you can also get it as stand-alone or something) http://luci.criosweb.ro/riot/