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.
Related
So I have developed a webpage containing some javascript and a couple of HighChart charts.
The page generally works great, every few seconds data is fetched from the server using an ajax request, and the chart is updated.
The issue happens when I have switched to a different tab for a few minutes and then want to go back. The page can take a very long time to show up. This happens on both Chrome and Firefox.
I couldn't really find out how the browser is handling javascript and page updates in non-active tabs, but it seems to be related at least.
Any ideas on how to improve the time it takes for the page to show?
To be perfectly clear, the page has no visible performance issues while it is the active tab.
So it turns out we froze highcharts just a couple of versions before this fix went in.
When we upgraded the version, everything worked great!
Many thanks to #WojciechChmiel for pointing me in the right direction.
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>
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 have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.
If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.
How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.
Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.
The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history
The trick this page does to move from page A --> page B involves 3 main steps:
Load the whole page B or only the content that is different from
page A (probably using XMLHttpRequest).
Swap in the changed content (e.g. updating the body,..)
Update the browser location bar with the URL of page B without
refreshing the page, using a particular HTML5 history method called
pushState.
I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.