I read many articles about optimization and after many efforts I minified all my CSS files and gathered all of them in one file. When I check again with PageSpeed Insights I still get low points and google still suggests me to remove the only left CSS file. here is the link of my site . Simply I have only this minified CSS in the head section.
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>| sirtcantalilar.com </title>
<link href="/assets2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
How can I optimize delivery of my website ?
The only solution that I know is to minify the CSS file and include it inline in the head tag of your html file
<head>
<style>
..minified CSS here
</style>
</head>
Make sure you are not using too much background images.And the CDN you are using is loading your site very slow.And also that twitter widget you are using is causing your page to load slow.Remove twitter widget to test if your site loads fast enough or not.
Related
So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded
I'm building a browser app in Angular 9 Typescript and am trying to implement the webdatarocks package so I can use pivot tables within a component of the app. I've installed webdatarocks and now have the following:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<link href="/angular-app/node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-wbr-pivot #pivot1 [toolbar]="true">
Webdatarocks will appear here
</app-wbr-pivot>
</body>
</html>
Note this is NOT the index.html file. That file is separate and contains the styles etc. for the entire app, I'm trying to use webdatarocks within only one component of the app, so the above code is in the html file of a component. (Not sure if this is recommended as I'm pretty new to this, but I don't see why it shouldn't work?). When trying to run this, the styles are not applied because of the following error:
Refused to apply style from 'http://localhost:4200/angular-app/node_modules/webdatarocks/webdatarocks.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Now I understand this likely doesn't work because it's unable to match any routes to the url, so it's being read as an error page in html rather than a css file. My question is how to actually fix this? Do I have to somehow add this url to the routing module? Is there not a way to simply point to the needed library in node_modules? I tried adding
"./node_modules/webdatarocks/webdatarocks.min.css"
"./node_modules/webdatarocks/webdatarocks.toolbar.min.js",
"./node_modules/webdatarocks/webdatarocks.js"
to the styles and scripts in the angular.json file and it still doesn't work.
Thank you and please let me know if I can clarify anything!
Okay, I learned all I had to do is remove everything within the head tag and just add:
#import "webdatarocks/webdatarocks.min.css";
to the styles.css file and Angular took care of the rest.
CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
I am working on a Github pages site, a web game of sorts. It's called World, and it's on "worldfantasy.github.io". The game is being developed, and I'm using CSS to style the page. But Github won't recongize the file as CSS. The file is called 'main.css', and here's the code I use to link it to the 'index.html' file:
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<script type="text/javascript" href="main.js" language="Javascript></script>
<title>World</title>
</head>
But when I visit the site, the CSS backgrounds and styling don't work. It's a plain html website. So my question is...How do I get this to work?