I have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
Related
I am trying to optimize a small website, I am now looking into the CSS.
Let's take the example of index.php. I have first done it the standard way by adding <link rel="stylesheet" href="style.css"> in the <head> of my HTML output.
Google PageSpeeds then complains about the render-blocking files.
I then tried an alternative way and instead of the <link> tag above, I added this in the <head> :
<style>
<?php include 'style.css';?>
</style>
This effectively gives me an internal CSS while still having the convenience of having one file for all my pages. I do not have render blocking files anymore and PageSpeed seems happier.
Is there any significant drawback here? Should I be as happier as Google PageSpeed is?
Google's documentation for optimizing CSS delivery suggests only inlining small amounts of critical CSS. You'll find that caching techniques can reduce the parsing time required for including your CSS file. There will be a sweet spot where it's worth the maintenance cost.
You could look at installing the Page Speed module as well. Some more articles about PHP caching are below. You might also look at enabling compression for your static file transfers - that reduces the size for most text files significantly.
https://secure.php.net/manual/en/book.apc.php
https://medium.com/#dylanwenzlau/500x-faster-caching-than-redis-memcache-apc-in-php-hhvm-dcd26e8447ad
https://pantheon.io/docs/alternative-php-cache/
I imagine this has been asked time and time again, but i've not seen the answer I'm looking for.
Im doing some simple tests with a HTML file and CSS file trying to stop the page from render blocking the CSS, running the site through page insights ( google )
Now i've seen answers like this:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
and I've seen answers like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Both of which I am fine with, for the google fonts! But not for the main styles of the page, I don't think its a good user experience to see a page with no styles and then all of a sudden they load in.
Obviously you can eliminate any blocking of CSS by sticking the whole lot as inline styles, but again I don't think this is good practice, you're outputting all styles to a HTML page and not loading them via a style sheet.
I've seen sites actually load the styles like so:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres a link to the page insight speed test on the. I know the site is running wordpress. If you view page source it uses the exact same as i've used above.
And they aren't Render Blocking at all... How?
Im on a https I'm using cloudflare and my style sheet is compressed and only around 24bytes and I'm still getting render blocking.
Why?
How to avoid it?
The CSS loaded as an external request is always render blocking, you can't avoid it. The recommendation on pagespeed insights is that you don't do any css request before the content is loaded, in order to avoid the unstyled effect they suggest that you inline the CSS needed to display the content before the fold.
The page on your example is doing exactly that, they inline some css content (check the source code and search for the style tag), then, when the content is loaded they add an external stylesheet with javascript.
All that said, this is a recommendation, you can ignore it if you are happy with the performance of your page, if you want to follow the recommendation you can apply some techniques to achieve this in an automation way.
As always, in css-tricks you have a great introduction post to these techniques: https://css-tricks.com/authoring-critical-fold-css/
The key to the Google PageSpeed insights is above-the-fold render blocking. If you check the site that you linked as your page speed test reference, there are no strictly inline styles - you are correct. However, they have a <style>...</style> block inside of their <head> that sets all of their most important styles for above-the-fold content. That means those styles render immediately, and all other supporting styles will load soon after - but your visitors (and Google PageSpeed) will not notice the difference.
I'm trying to make my meteor app visible to crawlers.
I've added the Spiderable package and installed Phantom.js.
When I to go localhost:3000/?_escaped_fragment_=, it's blank.
When I view the source, it's almost empty, and it ends right before the <script> tag that loads the Google Maps API:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/eecc60f7c55db2915697d4beb05274f355ad19e4.css">
<title></title>
<!-- Google Maps -->
</head></html>
I haven't encountered any issues with this before, but it got me thinking that maybe I shouldn't be including custom <scrpit> (or <link>) tags in the app's <head>. If this is true - what is the correct way to load external assets? If it's not related to the issue, I'd appreciate any advice.
Thanks!
In relation to your first question, I am not 100% sure about this being the cause of your problem, but to answer the second, you shouldn't be including scripts/stylesheets in the head of your Meteor application.
Meteor combines all of the client-side js, css, and html for your app, and sends it all together to the client. This means you can just include your stylesheet and scripts in your app's client folder. I would try putting your stylesheets/scripts in the correct place and removing the links in your head and see if that solves your issue.
You can find more detailed descriptions of meteor here.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
When I make a page, link it to a CSS file, and open it in a browser, it works fine.
But if a make a change and refresh the page again between very short time periods, the change is not reflected. But after sometime, when i refresh the page again, the changes appear.
So, somehow the browser keeps the CSS file cached and expires it after sometime. How to make the browser cache no CSS or HTML file.
It would be better if i can block it on a particular domain.
I'm on Ubuntu, using Chrome and Firefox, trying to prevent browsers from caching CSS files on 'localhost'... How to do it...
Thanks...
Something as simple as this should work:
<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">
Just replace {CURRENT_TIMESTAMP} with the actual timestamp in your server side code. This makes the browser think it's a new file because of the query string and it will be downloaded again. You could also use the actual modification time of the file (filemtime('/path/to/css/screen.css') if you're using PHP) which should prevent unnecessary downloads.
You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.
It would help to know how the website is hosted, as you can configure this in most web servers.
Also, it's a good idea to introduce a cache busting mechanism which would modify the links to the CSS files in question when you change the CSS files' contents. Browsers would then reload the CSS file because the HTML refers to a different URL.
A good example of a cache busting mechanism is the ruby on rails 3.1 asset pipeline which also minifies files and gzips them if the browser supports them:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/
The seemingly-inelegant but rock solid approach is to give the asset a new name, when the content changes. This solves the problem for all your users, not just you:
<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">
Or maybe (but it's more of a pain to change in an IDE, and sometimes causes unrelated problems with caching):
<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">
Nothing else works quite as well in large scale production environments, where millions of copies of an older css file may be sitting in various intermediate or browser caches. Some clients ignore cache control headers, and you don't really want caching subverted anyway, at least not in production.
In development you can press Ctrl+Shift+J (Chrome) and turn off caching.