Copy link to clipboard
Copied
Reduce blocking resources
(L)Optimize the order of styles and scripts
The following external CSS files were included after an external JavaScript file in http://satgraphics.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
• https://maxcdn.bootstrapcdn.com/…/bootstrap.min.css
• http://satgraphics.com/css/bootstrap-custom.css
I then repositioned the “bootstrap-custom.css” before the “bootstrap.min.css” and ran PageSpeed again.
Continued to receive the error, although I had made the change, which is reflected on the second report, as follows:
The following external CSS files were included after an external JavaScript file in http://satgraphics.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
Move the following to the bottom of your document just above the closing BODY-tag
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112286733-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112286733-1');
</script>
Copy link to clipboard
Copied
Just so you understand, getting a perfect score on Page Speed is impossible. You would need to remove or defer loading all unnecessary CSS & JavaScript references until the landing page has fully loaded. For most sites, that's not possible unless you have a separate plain vanilla landing page.
Copy link to clipboard
Copied
Thanks Nancy,
I was getting close to accepting that I was not going to get them all. In this case, almost all will suffice.
Again,
Thank You
Copy link to clipboard
Copied
According to gtmetrix your images would benefit from better optimization. Use a good jpg optimization utility.
Copy link to clipboard
Copied
rayek.elfin,
I'm aware and in process to that end. As I'm using images sized from a previous site, I wasn't sure of which I would use and which I would discard, saving that decision for the final phase. And, since the site is image heavy it will be time consuming and mind numbing, but I'm out of excuses to procrastinate.
Thanks for your input.
Copy link to clipboard
Copied
Maybe I'm missing something here, but the error appears to be telling you to move both of the .css files mentioned to a position in the code before a <script> tag containing a link to a .js file.
Have you done that, or have you only reordered your two .css files as described?
Copy link to clipboard
Copied
Joh Fritz II,
I did only as I described. I reordered the "bootstrap-custom.css" appear before"bootstrap/3.3.7/css/bootstrap.min.css".
The only script that appears above those (named PageSpeed erro links) is that of "googletagmanager". To best of my knowledge, that GTA script is in proper position.
Copy link to clipboard
Copied
Move the following to the bottom of your document just above the closing BODY-tag
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112286733-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112286733-1');
</script>
Copy link to clipboard
Copied
Right on the money, Ben Pleysier,
When I first installed GA, I researched the insertion point, and distinctly remembered the instruction was to insert following the <head> tag. Obviously my mistake.
That led me to switch the order of the css as a "just try it" call, as the initial report did not mention the GA script by name, but did the .css links. Guessing would be the key word here.
Reorder of all completed and tested, with good results. I'd certainly give you a correct, but that has already been done.
Thank You.
Copy link to clipboard
Copied
Uh Oh, ...Panic alert!
On completion of suggestions, first analysis came back okay, so I reordered all pages same (template pages) and came back with the following console error on index page:
Access to Script at 'https://maxcdn.bootstrapcdn.com/boots%3Etrap/3.3.7/js/bootstrap.min.js' from origin 'http://satgraphics.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://satgraphics.com' is therefore not allowed access. The response had HTTP status code 403.
I checked a couple of other deeper pages, and they seem okay. I pulled up a backup index page, uploaded as it was prior to changing position of GA and out of place css, but still received the above error.
This is WAY over my head.
Copy link to clipboard
Copied
Replace your links to Bootstrap & jQuery with these that contain integrity checks.
<!--Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Copy link to clipboard
Copied
Nancy,
I did and uploaded... Still getting same error.
I'm even further confused as the original links to Bootstrap & jQuery with these that contain integrity checks were provide by you earlier in year and worked perfectly well.
Although careful to implement other moderators suggestions, that is the only change I made to site today.
Would you like me to start another thread which will allow me to mark "Correct" future actions?
Copy link to clipboard
Copied
Nancy,
I did a refresh on both local and external servers, and I "think" that solved the problem. I hope.
Apologies for wasting your time, and hope I don't have to revisit this again.
Thank You.
Copy link to clipboard
Copied
When I first installed GA, I researched the insertion point, and distinctly remembered the instruction was to insert following the <head> tag. Obviously my mistake.
Google's instruction is to place the script as high as possible. The reason for this is so that when the page is opened and closed before the page is fully rendered, this can still be registered as a visitor. The downside is that it takes so much longer before the page is rendered.
By placing the script at the end, after the page is rendered, you will miss out on those that have left beforehand. Big deal.
Actually, I have left GA for what it is, a tracking machine for Google sort of like Big Brother is watching. No doubt Google will make eager use of the info that you are collecting for them.
I now use a humble stats counter offered by Plesk as part of my hosting package as per https://bunchoblokes.org/plesk-stat/webstat/ which works silently in the background without affecting performance.
Copy link to clipboard
Copied
Makes perfect sense, even to me.
I used StatCounter for many years, and avoided Google for the same reasons you espoused. But over time I became more engrossed in learning how to do for myself in the world of code, immersed in the learning just for the sake of learning, and understand at a base level that that game has ended. Google, FaceBook, et al, have won.
At my age, they can't get much out of me. I just chuckle at the thought of how many now complain that the sky is falling on the privacy issue, without realizing it has already been lost. As with every generation, if it's what you are used to it will be "the good old days."
Life is good when one can fall asleep at night without worry about what tomorrow will bring. If your feet hit the floor in the morning, all is good.
All is good...
Copy link to clipboard
Copied
This is what, at times, can lead to confusion as to what really is ‘best practice”.
After resolution of my query “Pagespeed Analysis, Reduce blocking resources…”
I had stated in the thread that I thought I had properly positioned Google Analytics code according to my initial search for guideace.
==============================================
I did find the page on which I relied, as follows:
https://support.google.com/analytics/answer/1008080?hl=en
“Copy and paste the gtag.js tracking code snippet to each web page you want to track. Add the tracking code snippet right after the opening <head> tag on each page.”
===============================================
Query correctly answered by Ben Pleysier, and moved script to just before </body> which corrected error.
For those of us who don’t have all of this already filed in the recesses of our minds, we rely on research to further our understanding.
Unfortunately, if there is a right answer out there, there will be many more that are wrong… or, not applicable.
Copy link to clipboard
Copied
If you use GA tracking code hosted on Google, you will not pass Page Speed Insights no matter where you put it in your document. And the workarounds are idictoic.
PageSpeed Insights 99/100 because of Google Analytics - How can I cache GA? - Stack Overflow
Copy link to clipboard
Copied
Just reading all that contorts the mind into a triple twist pretzel. I hereby shed my "Don Quixote" personna, and will no more tilt at windmills.
Thanks Nancy
Copy link to clipboard
Copied
Re-ording your .css files won't affect that error and could negatively impact your design and layout by moving re-write css above the css it's supposed to re-write.
Try doing what Ben suggests, which would place your css before your javascript as suggested in the error fix.
Copy link to clipboard
Copied
I have reset to the correct .css order, followed Ben's suggestion.
Thanks for your time.
Find more inspiration, events, and resources on the new Adobe Community
Explore Now