I have a problem which has only recently appeared and cannot figure out what may be causing it.
Up until recently, if I tested my pagespeed on Pingdon, I was getting around 800ms load time...
Now it has suddenly shot up to 13s...
I notice that when I visit a page (any page on my site), the header loads instantly but the body takes a bit of time to show which appears to be holding things up.
Previously different parts of the body would load at different rates which seemed to offer a much quicker load speed.
I have noticed that the waterfall diagram on pingdom shows every aspect of my page loading quickly bar 2 elements
jquery-3.1.1.js and bootstrap.js
both of these are shown in red and file size says 0B
They both display the yellow "wait" line but appear that they are never received which suggests to me that the files are being requested, the system is waiting for a period before ignoring them.
It does not tell me, however, what these files are associated with and I am scared to search for them, find them and delete them in case they are required for anything.
Could anyone shed any light on this please?
Pingdom screenshots: .
Pingdom screenshots:
.
As you will see from the pics, everything loads quick but then there are 2 long yellow bars which do not end with with green (received) and the titles are in red and I am assuming these are the ones linked to the connection errors in the first pic
Just try to open those URLs in your browser:
https://www.supplementgenie.co.uk/js/jquery-3.1.1.js
https://www.supplementgenie.co.uk/js/bootstrap.js
You can see those URLs are producing HTTP Error 404 which means those files cannot be found on the server (on your web-site). So, you wouldn't be able to delete those files as they are not there in the first place. This seems to be a case an improperly configured hosting or a web-site. Contact your developer (in the first place) or your hoster. Maybe you don't even need those lines in the header of your web-site and can simply remove them from it.
P.S. If you open the source code of your page you can see your web-site is already loading jQuery from Google's CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Same with Boostrap:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Related
I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.
I tried looking this up in google but Im getting alot of turtorials on "how to" rather than what the side effects are.
When changing the src of an img, does this cause a double caching effect? What if someone had used jquery to create a slider/rotater/comic viewer/marquee/etc and had used jquery to do so?
On a mobile device, could the page stop working after the image rotates through with the device receiving some type of error similar to "page is too large?"
Could the images be cached in a way that that the browser remembers them? And by that I mean when you have an image with a specific name that you make an edit to and the browser loads a cached version of it. Could this cause false image loads if a randomizer code was placed to choose a random image?
I am just curious what kind of effects this could have on a browser by browser/visit by visit basis.
I wanted to test this, but I feel my results could be secluded or not broad enough to cover all scenarios when the knowledge may already be available.
This is purely for knowledge, not for a project. I figured someone else might wonder as well.
Updating the src attribute loads the new image.
Even though I would pre-load the image first, then replace or handle the image in that manner.
You can see a working example for both here: http://jsfiddle.net/je9w1n9m/
But I think your issue is more about how your caching headers are set-up for static content. If you have caching headers set-up right on your web server to tell the browser to cache the static content, then the image will return a 304 Not Modified response, and will be cached in the browser from the first time it loads.
I developed a site in drupal and for the most part all of the pages in the site load just fine, except for one page which takes an average of 2.8 seconds to load. This is obviously not expectable but I was fairly new to drupal when that section of the site was developed.
The site is in testing and can be viewed now # xltrust.mayaco.com/properties
Right now it is loading everything into the dom. So all of the properties, information, images, and google map. Is there a way to only have what is needed for that page to load and then when one of the properties is clicked on then and only then would the properties images, map, etc load. Instead of everything loading when a user first goes to the page.
hey everyone who tried to answer this question.
i am the new developer that took this persons job. i have rewrote the entire page he was trying to fix. now everything works...his problem was loading 1000000000000+ photos / google maps on initial load. i stripped everything out and process it all on the fly with an ajax request. site speed ~ 2 seconds to load up. load a map ~3 seconds to fetch the map initially then it just shows the old on when clicked again.
EDIT::
ooh yeah i also remade the map functionality no more images on that. now it is a vector map recoded to work with my new functionality. i basically took the dev package of jqvmap.com
and hacked the sh!t out of it. binding in my function calls on click. yeah the other developer elodev. was a newbie. entry level very eager to learn to i hear. i just hope he checks this feed again. i'd like to let him know where he went wrong. not to gloat. but to teach.
The timeline shown here (captured using IE’s F12 developer tools) illustrates how IE handles a page
where an <img> tag is located after of a bunch of text :
The second row shows the retrieval of the image. Since the image is small, all of the image data is included with the HTTP response headers in the same packet.
However - The next timeline shows what happens when the <img> tag is located close to the beginning of the file so that it’s in the first packet of data received by IE:
However, the request for the image starts shortly after the first packet of HTML arrives.
As a result, it takes less total time to retrieve the page and the image
But (IMHO) it is better to put images (with defined dimensions) on the bottom of that page. ( so that the page will load faster)
However - by my example it shows that the page is loading faster when the img is on top.
What am I missing ?
P.S. my question is a briefly summarized text of this section
You are missing several points.
First, the best practices are not only about downloading, but about rendering as well, because if the whole page is downloaded for 3s but in require another 2s to be rendered, the user waits 5s, not 3s. I don't know best practice for putting images at the bottom (there is such for scripts), the best practice I know is to include width and height attributes so you do not block rendering while the image is being downloaded.
Another thing you are missing in your test is parallel downloading, as browsers limit the number of concurrent connections and you are testing with only one image. Make your tests with more images, or best - with a real web page, in order to have reliable results.
I'd rather bother about lessing number of connections, - loading whole page at once. Split interface and content parts. Once interface loaded - it can ask user to wait and inform him about connection speed. Then put a progress bar and inform user about how things go.
I have a web app which displays a Java Script image carousel.
Showing one image at a time for n seconds.
When the html page (index.html) loads it loads all n images in an hidden parent html DIV and the app (JavaScript) is responsible for showing and hiding the parent divs for the images at a given interval.
This usually works fine, but some times (randomly) only half of the image is loaded (eg. just half of the image is displayed on the screen).
Sometimes only "half" of the index.html response is loaded making the HTML kode to bleed out to the display.
Unfortunatly I do not have any tools like Firebug etc. to debug the problem yet since the screen is a kiosk (screen hanging on the wall)
To me this seems like a network problem but I am no network administrator so I will just be guessing here.
As I said this happens randomly.
The image starts loading but only half of the image. Sometimes after maybe 15 seconds the rest of the image is suddenly displayed.
If this could be a network problem the what could it be?
Best regards,
bob
Sounds like it could be a network issue. Why not try and cache the images on the browser so you don't have to wait for them to load every time. Also try looking in the Firebug/Web Inspector Net panel and you should be able to see if the browser is waiting on a network response or not.