Hi I have a wordpress websitse. When I try to visit that site it breaks down full layout for minimum 2 seconds. I can't understand why this is happening. I tried to use Javascript to footer plugin.
Please suggest me what happened here. And what can I do in this situation.
I can see you're using Divi theme in your wordpress site. I believe the above problem is due to loading css at the end of body.
When I inspect your site, I am able to see main css file such as Divi/style.css (Parent theme style) is loading at the end of body. Hence I came to this conclusion. Try moving your css to head that would solve your problem.
Incase you're concern about site speed try moving css one by one to head.
This is because you are writing the link rel="stylesheet" which is poor poor practice. Add it in head and your problems will be solved.
Do not write your main stylesheet in body tag, if you do not want that effect.
Further reading
https://stackoverflow.com/a/16844668/17447
load external css file in body tag
Related
I hope someone can help me with this because I don't know any solution for this... I have a Blog with Google's Blogger plattform, so I only can write my CSS styles inline - no extra files.
My question: Blogger is using an iframe for the comment section and I want to optimize it for mobile devices. Is there ANY way to add some CSS to the iframe content only using the head of the HTML / XML page? Maybe with some Javascript?
Why don't you use <style>?
<style> /* put your code here */ </style>
You will need to put your css code in the page the iframe shows.
Due to security you cant interact with a page inside an iframe by javascript, so you have to have all the code in there. If you cant write code in it than I domt think it is possible, but if you can at least add a script in you can possibly add the element containing the stylesheet.
I'm trying to include equations in my Qualtrics survey using LaTex, so I'm using MathJax. I've hincluded the following in the header so that it runs through all the pages.
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS MML_HTMLorMML">
</script>
This works great... but only for the first page when preview the whole survey! However, I can see the equations displayed on the other pages if I preview the question individually.
Someone else also had this issue with javascript in the header and resolved it by having no transition effects between the pages. I've tried this, but it doesn't solve my problem (although their script to suppress the Qualtrics logo at the bottom of each page worked for my survey by changing the transitions to none).
Any suggestion is appreciated. Thanks!
I thought this was a Qualtrics issue, but more of a MathJax rendering issue.
This was asked elsewhere under tags, and I found a solution.
By adding the following in my header, all was fixed... for now.
<script type="text/javascript">
MathJax.Hub.Queue(
["resetEquationNumbers",MathJax.InputJax.TeX],
["Typeset",MathJax.Hub]
);
</script>
Here is my issue.
I am analyzing my page with Google Page Speed Insights.
An it's telling me to remove my css link in the head (above floating line) because its blocking my page load.
Right now I have a simple link in the head of my document:
<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" />
</head>
I have try to place the link line at the bottom of the document. just before the end of the page.
<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" />
</body>
Ran Insight again.
There is 2 tabs for Insight result. By placing the css link at the en of the document I score 100% on the mobile tab. However I still get the same message on the computer part as if no mater where I place it is still getting loaded above the floating line. I don't understand because I can see the page being loaded without the css for a fraction of second.
So I'm wondering what would be the best way to load my css?
Should I place a style tag in the header?
Should I add a style tag on the elements? <-- I would rather not.
So whats the best way to load my css?
Thanks.
IMHO, Insight will always consider loading external CSS file as less efficient, because, from Google Developers - OptimizeCSSDelivery
Optimize CSS Delivery
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.
This might be true for small CSS code, but for large ones this is not true, another disadvantage of doing this is if you decided to change something in your CSS, then you'll need to go to every single page and do the change instead of changing it one time.
Beside, external CSS files could be cached unlike inline code, also considering the webpage size will increase or each page because you included it inline in every page.
Should i add a style tag on the elements? <-- I would rather not
Never!, this will give you hard time in maintaining and generalizing your CSS, and will have the top priority so you'd bang your head against the wall wondering why changing the CSS in external file or in the head section is not taking effect.
It may be the media=all causing it because that is used to recognized all media, where as media=screen is for desktops. I would try first using media=screen and if that doesn't work try getting rid of the media tag all together.
Possible duplicate: "Eliminate render-blocking CSS in above-the-fold content"
You should be fine keeping your CSS as it is. I've never seen it suggested to link a CSS file anywhere besides the head. Google Page Insights standards doesn't mean it's the best and most optimal way, every website is different.
The fastest way would be to use <style>...</style> or even inline CSS. But that does not mean it's the best practice. If it's just a few lines of CSS, you could opt for the <style> method, but I wouldn't go out of your way if it's not appropriate just to get a perfect Google Page Insights score.
The solution for this would be first identify and separate the CSS that is used for initial page display and move it to separate file.
Load this initial css file in the head section and move the remaining css to the bottom of the page.
I have tested my page on Google PageSpeed Insights
and It keeps saying "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
It says I have 17 blocking scripts and 11 blocking CSS resources.
I have tried moving all of the JS to the bottom of the page to load it last however Google is still saying I have render-blocking JS...
Does anyone know how I can solve this?
Thank you in advance for any help.
You need to dig more into Critical Rendering Path study.
Simple Rule: In your webpage load only things which are really important to show to user. Rest things can be loaded after page load has been done.
When JS is being downloaded on page, it stops DOM generation and hence stop downloading other resources. Putting JS at bottom will work but still it will block your rendering when JS is being downloaded. Just to overcome this issue it is suggested to add async tag to your script tag. But adding async can lead to other issues. See here. More reading about this can be found here.
Same case applies to CSS but advantages is that it will not block DOM generation. More reading about this can be found here.
Hi I tried it but it slowed down the website not sure why so put it back saying Eliminate render-blocking JavaScript and CSS on Googles page insite.
If any one knows why by removing the blocking css it slowed down the website enter image description here
I have a Rails4 app which uses MathJax. I use MathJax CDN by placing the following line in the <head> section of my app/views/layouts/application.html.erb file:
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
More information on: http://docs.mathjax.org/en/latest/start.html#mathjax-cdn
Because of Turbolinks, MathJax loads only on the homepage and won't load on other pages unless I refresh the page (which is not desirable). Instead I want MathJax to load only on /Math/New and Physics/Show pages. What should I do? (I don't want to deactivate turbolinks)
Thanks a lot for your help.
I was also struggling with the same issue since last few days. Finally figured out the way to solve this. Here is the explaination for the same:
If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the MathJax.Hub.Typeset() method. This will cause the preprocessors (if any were loaded) to run over the page again, and then MathJax will look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.
So the simplest solution is to add the following in app/views/layouts/application.html.erb file:
<script>
MathJax.Hub.Typeset();
</script>
Don't add this in head section. Add it after closing the body tag.
You can add data-no-turbolink only for that link to make it work as regular link, take a look at https://github.com/rails/turbolinks/#opting-out-of-turbolinks
Three great solutions can be found here: http://reed.github.io/turbolinks-compatibility/mathjax.html