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

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. So Close to 100/100! 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 pa