I have designed a website using Wordpress and caching it with W3 Total Cache. I have experience with them both but I encountered the next problem.
The website http://atelieruldigital.com is a one page website, with another page for the partners of the program (http://atelieruldigital.com/parteneri/). When I access the partner page, everything loads as it should. When I access the main page by clicking "Acasă" or the logo, I have the next behaviors:
Google Chrome: everything loads as it should;
Mozilla Firefox: the scripts have lots of errors in the console and the page loads broken. I have to refresh (F5) to make it work as intended;
Microsoft Edge: the same problem as Mozilla.
I am using manually minifying, only by combining the scripts, excepting the mobile-menu.js, which grants error when I try to combine it. I do not use page caching, only object and browser caching. The theme is a custom theme, based on Twenty Sixteen.
If I disable the caching plugin, everything works as intended. But I need it to help the page load faster.
I have found the solution after a couple of days of debugging. It seems like when manually combining the .js files, I had to switch around some in the load order.
Related
I'm in charge of a website that is using a jQuery slider called "Accessible News Slider" and can be found # https://github.com/rip747/Yahoo-style-news-slider-for-jQuery. The website is http://thebright.com. When viewing the site on Firefox or IE, the slider works just fine, but when viewing in any webkit browser, the images for each slider load slowly and makes it look like they're falling from the top.
I'm not sure whether this is an actual bug in webkit or if this is something that I am causing by trying to gzip the images so the website will load faster. If anyone else has experienced this problem and knows how to fix it, I'm all ears. I'd also like to know if anyone else has seen this problem, but hasn't been able to fix it.
Thank you.
First : Optimize all the images. As per Google Page Speed (http://thebright.com), you can reduce another 233 KB, which will make your site fast.
Second : The issue that you mentioned - When you check the network tab in Google Chrome, clearly, there is some issue with the Cache Expiry header. Some how it is not setting Expiry header properly. So, every time you go to a page, it is loading the image once again even it was loaded previously. The current value that it is showing is : Expires:access plus 1 month. Seems Apache HTTP Server is not handling this header properly.
I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.
The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.
Firstly, does the page load quickly for you?
How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.
Thanks in advance.
I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.
That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.
Your site's loading fine here.
For the Facebook "Like Box", consider using the iframe version.
http://developers.facebook.com/docs/reference/plugins/like-box/
After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.
I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.
For example
merge the javascripts you are loading from the same domain
set the webserver to use gzip to send script/html files compressed
many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
merging images like the social media pins and use css sprites
provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage
You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.
If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.
EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here:
I've run into an issue that crops up when I make a change to a Drupal site - www.productworld.com
This is how the problem crops up:
Make a change to site, e.g. add javascript tracking code or adding a new static webpage.
When NOT logged in as admin (viewing the site as a regular visitor), the homepage is now screwed up. It appears that the CSS and JavaScript for the homepage aren't loaded. When logged in as an admin, I see a cached version of the site, looking as it should. I use two separate browsers to confirm the problem - one where I'm logged in as Drupal admin in Chrome, and two where I view the site in Firefox as a non-logged in site visitor.
Here's some screenshots of what the site looks like when the problem crops up:
http://imgur.com/xs3hF
http://imgur.com/wMBVq
http://imgur.com/Gksb9
http://imgur.com/eZPTE
Note: the company images that you see (iWatt, Roal, Assa Abloy etc) should be in a nodequeue (a jQuery image slideshow), but instead they appear one after the other. The blue box with the gold call to action appears way down the page. This is what leads me to believe that the CSS and JS isn't loading.
3.Clearing the Drupal cache fixes the issue.
It's obviously highly undesirable to have a site that gets screwed up everytime a simple change is made to it.
If anyone has run into a similar issue, please let me know.
Thanks.
When you make changes to the site with caching enabled it will cause problems. This is because it will be using some cached copies of earlier files.
I tend to make changes to a development version of the site, then roll them out to the live site and clear the cache.
I created a mobile site in html and jquery, but it is not loading properly in Chrome (or on an iphone). There is no backend to the site - all changes to content would happen right through editing the html. Inside of my html, I made no specific reference to ajax. And, each page links through "#pageid. The problem is that as I navigate the site, various pages do not display correctly unless I hit "refresh." URL is mobile.shorelinelake.com. I am VERY new to this, so please be patient with a newbie :) Thanks for any help!
http://mobile.shorelinelake.com (if you click through to "Lake" and then "Sailing," or "Cafe" to "Menu," you can see the problem - the page jumps after loading, cuts off the header, places content below the footer, or will entirely hide jquery elements...)
One thing I noticed right away is that your using an old version of Jquery and Jquery Mobile. There have been alot of improvements since the alpha that you are using. Also you are linking to a few files that aren't there. Phonegap.js and ajax-loader.gif for some reason are not found. In my console I see 196 warnings that I believe are all related to you using old versions.
Also you have 31 html errors. One example is here
line 88:
<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">
You have alot of stranded </p> tags. Most of them are in the menu page. Fixing these errors is necessary to troubleshoot your problem. Try running your document through an html5 validator to find these mistakes.
I also recommend breaking this into smaller pieces. Here is my reasoning:
Easier to maintain and edit.
Keep the dom size reasonable. Jquery will remove the old pages from the dom keeping it very manageable.
Faster page loading resulting in a better user experience. Your user will probably not be going to each page. Only load what they need to see.
Bandwidth could be costing your user extra money on a mobile device.
I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)
A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.