I work on a wordpress website, and i saw that a css file take about 10 seconds to load, and delays the page display, so i'd like to know how i can make this loading much faster.
I have installed caching plugin, and i use visual composer plugin.
The visual composer's css file is causing the delay.
The header is like this:
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
<link rel='stylesheet' id='vc_plugin_themes_css-css' href='http://www.example.com/wp-content/plugins/easy-tables-vc/assets/css/themes.css?ver=4.4' type='text/css' media='all' />
<link rel='stylesheet' id='js_composer_front-css' href='http://www.example.com/wp-content/plugins/js_composer/assets/css/js_composer.css?ver=4.7.4' type='text/css' media='all' />
<link rel='stylesheet' id='ubermenu-css' href='http://www.example.com/wp-content/plugins/ubermenu/pro/assets/css/ubermenu.min.css?ver=3.2.0.2' type='text/css' media='all' />
...
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
</head>
Do you think i should move the js_composer.css in the footer? or there is something else i can do?
Regards
Use sites like gtmetrix.com, that will show you specifically what the problem is and what you can do to fix it. They are very informative and analytical. You may need to imply server changes or changes of your administrator page, but they totally work.
Related
I made this website bigeyeslion.com years ago with a template. Recently, I changed some text and images. After that the CSS stop working. I test it locally before upload to server, it worked fine. but the css files just wont load on the server. Here is the header
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leon Sun - Creative Designer - Graphic and 3D</title>
<meta name="description" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="keywords" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="author" content="bigeyeslion.com"/>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I put the css files in a folder public_html/css and index is in public_html folder.
Please help, I been struggle with this for days
I find it very strange. I test the site on a MAC with firefox and on a PC with google Chrome at my working place. both of them show the same problem. with F12, it tells me I have 2 img (which I did not use) were missing. But when test at home with chrome it works fine and also working on a cellphone too.
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
Kee-doke.
So I have internal style problems. With Wordpress. After many frustrating hours trying to figure out how to change styles on several different items, I discovered that the main html file had a ton of internal style sheets. They were overriding my styles that I input in the style.css file of my Wordpress theme.
The styles are inside the <head> of the web page. I need to know where I can go to edit these internal styles. That is, what template file holds them?
There is a lot of code, but here is the relevant stuff. The styles are way down at the bottom. I removed the actual styles. I just need to find out how to edit them. Obviously they have to be in a Wordpress php file. But which one?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Trailogy | Find the Trail. Hit the Trail</title><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />
<link rel="shortcut icon" href="http://localhost/wordpress/wp- content/uploads/2014/10/LogoThumbFav.png" /><link rel="apple-touch-icon" href="http://localhost/wordpress/wp-content/uploads/2014/10/LogoThumbFav.png" /><link rel="alternate" type="application/rss+xml" title="Trailogy » Feed" href="http://localhost/wordpress/feed/" />
<link rel="alternate" type="application/rss+xml" title="Trailogy » Comments Feed" href="http://localhost/wordpress/comments/feed/" />
<link rel='stylesheet' id='nirvanas-css' href='http://localhost/wordpress/wp-content/themes/nirvana/style.css?ver=4.0' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/frontend.js?ver=4.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/nivo-slider.js?ver=4.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.0" />
<script type="text/javascript">
jquery stuff for a slider.
</script>
<style type="text/css"> /*Hundreds of lines of css*/</style>
<style type="text/css">/* Nirvana Custom CSS */</style>'
And by the way STYLE.CSS ISN'T OVERRIDING THESE INTERNAL STYLES! That's the problem.
EDIT: Why me? Yeah, so after spending a whole day trying to figure this out, my associate up and says, "Dude, you can just add !important to the end of your styles and they'll override everything." So I created a style override css sheet. Talk about the solution staring me in the face!
This should be the stylesheet you are looking for:
/wordpress/wp-content/themes/nirvana/style.css?ver=4.0
I am creating a website in HTML, and I face a problem.
I have a CSS folder, and I want to be able to access it from every directory
root:
/css
- /skel-noscript.css"
- /skel-noscript.css"
/js
- init.js
- skel.min.js
- skel-panel.min.js
- html5shiv.js
/Downloads
-/Download.html
/Downloads.html
/index.html
...
Now I have trouble when I try to access the stylesheets in Downloads/Download.html
my <head> code:
<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="../js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-panels.min.js"></script>
<script src="../js/init.js"></script>
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
</head>
When I use this code, the stylesheets don't work.
when I delete the <noscript> around the links to the stylesheets, they do work, but my website is totally messed up.
What is happening?
When I use this code in the root directory, it works fine
css files are not being added from tags in this case, is for browsers that don't support js or if js is off.
go to the "init.js" file(one that u attached just before the tag) in your js folder and check it... css is being added from their so change directory paths for css from there.
regards
Are you turning off the javascript when testing this? <noscript> is only activated when the visitor has no scripting enabled. If you want to be able to link the css files always you have to get rid of the tag.
I suggest you to create a file something like header.phtml and call all the files you need to render the template.
<head>
<title>TITLE</title>
<noscript>
<link href"<?= $this->getCssPath(); ?>" rel="stylesheet" type=text/css />
</noscript>
</head>
and greate a file where you create a class something like
<?php class MyTemplate {
public function getCssPath() {
return 'css/skel-noscript.css';
}
}
I'm working on a website right now, the homepage links up with the CSS as normal and displays fine. The about page for no apparent reason is not connecting to the style.css, the same header links are there as the homepage has, apart from an additional two stylesheets just to get two web-fonts to work. Can someone have a look and see any issues with this.
I've copied everything within the pages header.
INDEX
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
ABOUT
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/jennasue-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
<link href="css/quickendjerk-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
</head>
Index - http://www.jordancharters.co.uk/nakedradish
About - http://www.jordancharters.co.uk/nakedradish/about.html
This is your stylesheet: it is in a different language. Specify either of the following:
HTML
<meta charset="utf-8">
CSS
#charset "UTF-8";
UPDATE.. It seems as though you are using a relative URL for the stylesheet.. both pages are in different folders.. try setting an absolute URL? Let me know if that works.
Use this: <link href="http://www.jordancharters.co.uk/nakedradish/css/style.css" rel="stylesheet" media="screen">
It... looks like you've got some kind of encoding glitch on your about page, which is making browsers think that the CSS is encoded in a way that it isn't. Here's a brief excerpt of what my browser thinks your CSS says, when loaded as part of the about page:
⼪⁓瑹汥⁒敳整⼊牴楣汥Ⱐ慳楤攬楧畲攬潯瑥爬敡摥爬杲潵瀬敮甬慶Ⱐ獥捴楯渠笊।楳灬慹㨠
It kind of goes on like that for a while. The raw network response for the html isn't much better:
ÿþ<�!�D�O�C�T�Y�P�E� �h�t�m�l�>�
Although it appears that the browser can compensate for that part - you'll notice there's a DOCTYPE html hiding in between those garbage characters. And then it switches encodings or something partway through, and starts looking perfectly normal.
I thinks it loads but It's the Unicode problem ,set The unicode in your your HTML , and save your CSS again with standard Unicode