Posts

Showing posts with the label Google PageSpeed Insight

Shields.io for Google's PageSpeed Insight

Image
This was an idea I had for some upcoming projects I'm working and it includes the use of shields.io to display important information on the quality of the front-end code. Also to give to give an idea of what's on a production server. This would really work for projects where the code was mostly open-sourced. Users could get a glance before hand of the boilerplate/template for particular project and know the quality it has. I did start to write out some code to do this and currently the only approach I have is using it via Google's API service which requires an API key. Below is the api request and the parameters need, from there all one needs to do is hook up, the three fields in shields.io and return the appropriate svg. 




API:
https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=http%3A%2F%2F{WWW.EXAMPLE.COM}&strategy={desktop||mobile}&fields=ruleGroups&key={YOUR_API_KEY}A Difference in Implementation
     Be aware there is a nodeJs project using P…

Penguins Rising: Eliminate render-blocking JavaScript

Image
For the most part I have already done a lot of the work for this and this has always been something in my practice to do. In the past what I have done is render all javascripts at the bottom of the page and all styles at the top inside the header. However with this application and since so much of my code is customized and mineralized, I believe I have a small issue with the Jquery taking up more time than the css to load.

Code
(function () { var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "js/jquery-2.0.3.min.js"); document.getElementsByTagName("head")[0].appendChild(script); Resources
Remove Render-Blocking JavaScripts - PageSpeed Insights — Google Developers
HTML script async Attribute - This might have also worked but look at later. javascript - load jquery after the page is fully loaded - Stack Overflow Goog…