I am doing facebook app development. Something really annoy me is that randomly, when I change my CSS style sheet/ adding in a javascript function. The browser does not reflect the change at all. This is really annoying because I can never see the changes I just made.
For example. I changed my CSS style sheet so img1 is moved from 100px to 50px. But in firfox/chrome, the img never moved a bit.
I added a javascript function a() to one of my script. But the browser's console keeps telling me a() is not defined. I have checked through the codes 10 times and there is no error.
Can someone tell me what is the possible problem here and how to solve it?
I am using my mac as the hosting server btw
Thanks
You can add a timestamp or other unique string to the filename of the files you don't want to be cached, either in the actual filename or as a GET parameter:
<link rel="stylesheet" type="text/css"
href="http://cdn.sstatic.net/stackoverflow/all.css?v=4fd8a9d8937d">
Depending on the server-side language you're using to server your pages, you could do something like:
PHP (using filemtime - which returns the modification time of a file):
<link rel="stylesheet" type="text/css"
href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<?php echo filemtime('/your_css_file.css'); ?>">
Ruby (using File.mtime which returns the modification time of a file):
<link rel="stylesheet" type="text/css"
href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<% print File.new("testfile").mtime.to_time.to_i('/your_css_file.css'); %>">
If you use the file's modification time, your users are only forced to download the file again if it has been modified.
when including your js/css files, include the timestamp as a param, something like this should do it :
<link rel="stylesheet" href="css/screen.css?<?php echo time(); ?>" media="all"
type="text/css" />
Related
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I have two directory in a server: Project A and Project B. In my local development server, both projects work normally. In actual live server, everything is normal in Project A, but this happens to Project B.
My HTML:
<link href="mydir/lib/css/css1.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css2.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css3.css" rel="stylesheet" type="text/css"/>
But instead it echoed:
<link href="mydir/lib,_css,_css1.css+lib,_css,_css2.css,lib,_css,_css3.css" rel="stylesheet" type="text/css"/>
or
<link href="mydir/A.lib,,_css,,_css1.css+lib,,_css,,_css2.css+lib,,_css,,_css3.css" rel="stylesheet" type="text/css"/>
This happened not only for including CSS, but for JS too. My page CSS display seems normal, but my JS sometimes is not working (undefined functions or variables, but they are already in the included JS files). I don't know if the JS error happened because of this.
Directory name doesn't matter, I tried to change them, sometimes it works, sometimes not. Whether the files actually exist or not doesn't matter too, and again in this case, sometimes it works, sometimes not. Tried not to include or run any JS too, not working. Absolute/relative path doesn't matter too.
This is the first time this happens to me, I couldn't pinpoint why. Does anyone know why this happen and how to fix it?
I am developing web based software applications which means that the presentation layer is html pages.
Every html page needs to have imported javascript files (sometimes 10 to 15) and lots of css files (sometimes 20 to 30).
I find it really anoying to write the path to each one of them ( Well when you write the path to the first one then you can simply copy and paste it and change only the file name but this is not the case ). Ok... i was talking about that it is really annoying and time consumption.
Here is example:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/a.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/b.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/c.css">
<script src="../xxx/a.js"></script>
<script src="../xxx/yyy/zzz/b.js"></script>
<script src="../xxx/yyy/zzz/c.js"></script>
<script src="../xxx/yyy/zzz/d.js"></script>
So lets just ask you the question:
Is there a way (or a plugin) in NetBeans which can help me to drag the file from its location (the project is visualized as a tree) and put it in the html so its path to be automatically inserted in the file?
I know this is an old post but as of recent versions of NetBeans, drag the file from the tree into the document itself, and it will place a tag to the CSS file automatically.
Cheers
I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?
I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.
At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.
Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.
I am altering a css file which will make drastic changes to my site. Is there a way to force the clients to reload the css so that they pick up the new changes. Unfortunately asking thousands of people to CTRL + F5 or clear their cache isn't an option. I read on a couple of blogs about appending todays date on the css filename as a parameter would work.
You can add a unique query string parameter on to the end of the css file url
<link rel="stylesheet" type="text/css" href="/my/css/file.css?123" />
Just increment the number each time you make an update.
EDIT:
To load it from the web.xml file use the following:
<link rel="stylesheet" type="text/css" href="/my/css/file.css?<%=application.getInitParamer("cssBuildNumber")%>" />
and this in web.xml
<context-param>
<param-name>cssBuildNumber</param-name>
<param-value>123</param-value>
</context-param>