I've seen this question asked in pieces (just JS or just CSS) on other sites and SO, but I haven't seen a good solid way to do this yet.
My situation is fairly common. I'm using .NET MVC and developing in Visual Studio. I have a Site.Master page and multiple views, each with a content placeholder where I specify my JS and CSS files, like this:
<asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server">
<link href="../../CSS/example.css" rel="stylesheet" type="text/css" />
<script src="../../JS/jquery/jQueryFile.js" type="text/javascript"></script>
<!-- More files here -->
</asp:Content>
And my navigation bar is a sprite image, similar to the one seen on Apple's website. I have site sections with headers, also similar to Apple's, that are images. So my site isn't extremely image-heavy, but especially when I view in IE (but also Firefox, to some extent), the site sort of pieces itself together before my eyes, while it loads the images and jQuery files for plugins (datatables plugin always takes a second to apply to my tables).
I'd rather not show the page at all until all images, CSS, and JS files have loaded. A nice progress bar, or even an animated GIF would suffice to show before I show them the final site, all loaded. I think Gmail's loading bar uses this same idea.
Are there any suggestions on how best to achieve this? Thanks very much.
Try this: http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page
I've not tried this out yet, give it a cautious try. Inside $(document).ready, create an overlay that displays a loading icon, like an animated circle sorta thing. I'll assume you'll name it #overlay.
Then, outside of $(document).ready, try this
$(window).load(function(){
$("#overlay").hide();
});
$(window).load means everything is ready: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
Related
I imagine this has been asked time and time again, but i've not seen the answer I'm looking for.
Im doing some simple tests with a HTML file and CSS file trying to stop the page from render blocking the CSS, running the site through page insights ( google )
Now i've seen answers like this:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
and I've seen answers like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Both of which I am fine with, for the google fonts! But not for the main styles of the page, I don't think its a good user experience to see a page with no styles and then all of a sudden they load in.
Obviously you can eliminate any blocking of CSS by sticking the whole lot as inline styles, but again I don't think this is good practice, you're outputting all styles to a HTML page and not loading them via a style sheet.
I've seen sites actually load the styles like so:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres a link to the page insight speed test on the. I know the site is running wordpress. If you view page source it uses the exact same as i've used above.
And they aren't Render Blocking at all... How?
Im on a https I'm using cloudflare and my style sheet is compressed and only around 24bytes and I'm still getting render blocking.
Why?
How to avoid it?
The CSS loaded as an external request is always render blocking, you can't avoid it. The recommendation on pagespeed insights is that you don't do any css request before the content is loaded, in order to avoid the unstyled effect they suggest that you inline the CSS needed to display the content before the fold.
The page on your example is doing exactly that, they inline some css content (check the source code and search for the style tag), then, when the content is loaded they add an external stylesheet with javascript.
All that said, this is a recommendation, you can ignore it if you are happy with the performance of your page, if you want to follow the recommendation you can apply some techniques to achieve this in an automation way.
As always, in css-tricks you have a great introduction post to these techniques: https://css-tricks.com/authoring-critical-fold-css/
The key to the Google PageSpeed insights is above-the-fold render blocking. If you check the site that you linked as your page speed test reference, there are no strictly inline styles - you are correct. However, they have a <style>...</style> block inside of their <head> that sets all of their most important styles for above-the-fold content. That means those styles render immediately, and all other supporting styles will load soon after - but your visitors (and Google PageSpeed) will not notice the difference.
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
I work as an intern on a website wich is actually protected with pass so I can't give you the link...
Anyway, I will ask the question and if you need some code I can give it.
So, there is a responsive design for the mobile made buy an external party which created the design/css. The responsive work correctly when I work with wampServer, and I resized the page with the ctrl+maj+m on firefox.
The actual problem is, when I put the same page on the server, the responsive don't work anymore... on firefox and on mobile phones.
I don't get how is that possible, so maybe someone encountered the same problem and has some tips?
Thank you
EDIT : There is ONE page which still works online, but I really don't get why, it has exactly the same code as the others... the 'responsive code' is included in each page at the top with the footer too (but this one is at the end of the page). Just the body changes on every page.
EDIT EDIT :
Here is the sample code. header.php, head.php, mainmenu.php.
EDIT OF THE MASTER EDIT :
Thanks Abdul-Rafay Shaikh.
Well, all of the css is imported in the import <link rel="stylesheet" href="assets/css/zz-all.css" type="text/css" />. Which is called in the head.php. The path is good, in fact it works in one page and not the others. I think I have to check, line by line, all of the code to find maybe an import that f***ed all up, or something like that.
Thanks for all your help anyway :)
Well I think the responsive template you are using maybe used javascript to actually make breakpoints and as you told us that the one page that is working when deployed on a real server has the responsive css in the footer. So my solution would be put the css of all the pages in the footer or check wether any js is actually making the breakpoint and put the CSS after that javascript.
The Second thing is the path's maybe your CSS that has the responsive code has their path defined preceding localhost/ or some thing like that check that.
Third if there is no javascript that is making your website responsive and its only css import your responsive CSS to the main stylesheet
In your main style sheet
#import url("responsive.css");
just to make sure that your responsive style sheet is loaded whenever your main style sheet is loaded.
I hope this solves the problem
I've only been programming for roughly 20 weeks so every problem I run into is new to me...
I'm not quite sure, but I suspect that sometimes my page loads prior to all my CSS files loading because I'll see the page content for a brief second then suddenly the CSS takes over and presents the page.
Any ideas on what I could possibly do to fix this? If this is a little hard to imagine, my website is http://www.instamap.it
yep, looking at your source, you should move the link for your css to the head in your application layout.
It's because your CSS is being linked at the end of your document instead of the beginning, so the page loads everything else first.
This line (169):
<link href="/assets/application-9541dd7ae253c39af6731980dce6e296.css" media="all" rel="stylesheet" type="text/css" />
should be in the head of your document. This way the CSS will load before everything else.
I'm hosting a (very) small website on dropbox. I don't even have a domain name for it, I just need an easy way for my not so technology savvy teacher to access it and using an online service like wordpress or tumblr seemed like too much trouble and not as effective as I would like. I plan on putting it in my public folder and just sending her that link, something I've done in the past to show my friends websites I've made in class.
However, for some reason, CSS formatting isn't working. This is a problem I've noticed in the past but at the time wasn't important. I have it relatively linked in my head tag and it works when I pull up the files saved on my hard drive. Its only when I try to access it through dropbox do I notice this problem.
I've looked and it doesn't seem like anyone else has had this problem, I've only found multiple references to dropbox supporting CSS so I have no idea why this is happening.
This is the link in my code, and it's inside the head tag:
<link rel="stylesheet" type="text/css" href="css/format.css" />
Any help would be much appreciated. ^^
EDIT: Here's the page, there's not much on it yet but there's suppossed to be background formatting behind the navigation links in the top.
https://dl-web.dropbox.com/get/Public/EPortfolio/WritingAndForum.html?w=947f0aa1
To give an example expanding on Cfreak's comment, you would need to individually share the CSS file, then reference it in the HTML like this:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/1234567/cssfile.css">
A much easier way (and more correct) is to put your stylesheet in a folder called css and then have a relative link to it with "./" It gets you out of the long url trouble.
<link rel="stylesheet" type="text/css" href="./css/styles.css">