I am working on a simple dev in Google Apps Script. I also have html part. I can see in the browser console that there are issues related to link preload. Any recommendations or advisory on how to handle these errors? Details below:
Chrome console screen with the preload issues
My html head code:
<head>
<base target="_top">
<link rel="preconnect" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" crossorigin="anonymous">
<link rel="preload" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" as="style">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
The problem is you preload your asset but don't use it, in order to load and use it add onload attribute to your link, or just use that asset like your third link by using rel="stylesheet" and remove as attribute
<head>
<base target="_top">
<link rel="preconnect" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" crossorigin="anonymous">
<link rel="preload" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
Related
I want to preload icons and fonts before html gets rendered. I am using preload strategy to achieve this.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EbDesktopApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO55Roman.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO65Medium.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO75Bold.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO95Black.otf" as="font" type="font/otf" crossorigin="anonymous">
</head>
<body>
<body>
<app-root></app-root>
</body>
</html>
The problem is html starts rendering before icons finish load and also I can't see eb-icons.eot and eb-icons.svg in network tab.
The question is what am I doing wrong and how can I fix this?
I am no pro on this subject, but I searched a little on this and it might be related to priority or importance of loading.
I would recommend you check this article which deals with font preloading and details on several different options.
Also, you can check more on priorities here.
I would recommend you check which file formats you really need, that could reduce your file loading. You could use only Woff (Woff compatibility) in a combination with TTF (TTF Compatibility).
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >
I have a JSP page which contains CSS links as follows. This is the complete code in the JSP(a.jsp):
<link href="/aspenet/resources/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="/aspenet/resources/css/default.css" rel="stylesheet" type="text/css" />
I include a.jsp inside b.jsp as follows:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="resources/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
<jsp:include page="a.jsp"/>
<script type="text/javascript" src="resources/js/jquery/jquery-1.7.2.min.js"> </script>
<script type="text/javascript">
</head>
But the styles of the default.css does not reflect in b.jsp when I run the application. Help me to resolve the issue.
Try to use following code in your a.jsp page.
<link href="<%=request.getContextPath()%>/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/default.css" rel="stylesheet" type="text/css" />
request.getContextPath()- return root path of your application so let say your application name is demo then it will try to find demo/css/xyz.css file.
Hope it may help you.!!