I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - tring to impove it like this :
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async basically says "load everything as quickly as you can, I don't care about load order".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
This will be slightly slower overall but still fix the JavaScript being render blocking.
You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).
CSS
Render blocking CSS is anything sitting in an external file that relates to content "above the fold".
To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.
What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!
Then all other styles can sit in external style sheets.
This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.
Font Awesome
Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.
Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.
just a suggestion, have no way of testing atm but try putting 'async' before the source attribute. also, try adding a copied line with the attribute defer instead of async for wider browser support.
Related
I'm working on a SAPUI5 application with XML-Views.
Now I want to arrange my buttons for example. They should be arranged so they form a numberpad like on a keyboard.
I only know the layout managers from Java or the layouts of a SAP Web Dynpro where I also used transparent containers.
So how can I arrange my elements in HTML? How can I use layout managers and is there such a thing as a transparent container?
Thanks for any hints! :)
Arranging HTML elements in SAPUI5 is how you would in normal HTML. SAP does emphasize that code in index.html is to be minimal, however, so do your best to keep your coding done inside of your views. Your elements are likely to be contained in <div>, </div> tags, which, like any other HTML tag, can be manipulated using CSS.
You'll need to create a CSS file and reference it in your index.html file like so:
<link rel="stylesheet" type="text/css" href="css/style.css" />.
Additionally, you should be aware of the native SAPUI5 layout controls and use them when you can as opposed to writing up your own solution.
You might find this post useful as well.
I'm struggling with a Phonegap-Android application. I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1, with Phonegap 2.9.0. I've got some data-role pages in my index.html and I'm generating some other dynamically with an ajax function. The problem is that always, after showing a dynamically generated page the screen goes all white. This never happens if I navigate between pages statically created in the index.html.
Any suggestions? I've tried with:
< meta name="viewport" content="width=device-width, user-scalable=no" />
CSS: .ui-page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
-msie-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
defaultPageTransition = "none"
The new pages are created using Mustache.js.
Something to quickly try would be to globally enable DOM caching in jQuery Mobile:
$.mobile.page.prototype.options.domCache = true;
or
pageContainerElement.page({ domCache: true });
I would say it stems from a given page not containing the dynamically generated markup, which you need in order to utilize jQM's ajax navigation... which uses it's own internal history tracking object to fuel the hashchange and/or popstate event.
Beyond that, I would step through how the dynamic pages are actually being added to the DOM. You should be able to keep using Mustache's template plugin, but you'll have to make sure to use the jQM to add the markup to the DOM. (Or go through a potentially long process of creating overrides... which I think you should avoid if possible.)
When you use jQM to update the DOM, it ensures the correct events fire and in the correct order, thus keeping the app data/state up-to-date.
I'm sure you're using the documentation, but I would give this another look. Might give you a better idea on what Mustache method you need to stop using, or extend/override.
Hope this helps.
jQM References
DOM Caching: http://view.jquerymobile.com/1.3.1/dist/demos/#nav-cache
Navigation Event: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/#nav-event-example
Dynamic Page Loading: http://jquerymobile.com/demos/1.3.1/docs/pages/page-dynamic.html
How can I programmatically add script or stylesheet tag to a page specified in page's YAML front matter (meta)?
Assuming there is src/documents/posts/a.html.eco with following contents:
---
layout: default
scripts: ['a.js']
---
Blog post that requires a special javascript
and layout src/layouts/default.html.eco with following contents:
...
#getBlock('scripts').toHTML()
</body>
...
The final result for posts/a.html should be:
...
<!-- some extra stuff that was added when processing script tag -->
<script scr="/scripts/a.js"></script>
</body>
...
..while other pages shouldn't have a reference to /scripts/a.js
The comment above tag is just to show that there may be some processing envolved before injecting the tag.
I tried many approaches using different events in docpad.coffee file (including approach taken from docpad-plugin-livereload plugin) but every time I was facing the same problem - script tag was applied to all pages instead of being applied to a.html only. Here is one of my tries:
renderDocument: (opts) ->
{extension,templateData,file,content} = opts
if extension == 'html' and scripts = file.get('scripts')
if typeof scripts != 'undefined'
scripts.forEach (scriptName) ->
#docpad.getBlock('scripts').add('<!-- custom script tag here -->')
I've also tried render event, populateCollections (which is not documented however I found it in docpad-plugin-livereload plugin) and even extendTemplateData events and no luck so far.
I know there is a method of doing this right inside a layout:
#getBlock('scripts').add(#document.scripts or [])
..which is totally fine and it really works as expected however it doesn't seem to provide enough freedom for me to manipulate the content before it's injected to a page.. And even if it's possible I won't like the idea of having some heavy logic inside layout template, I want it to be in a plugin/docpad.coffee
Hopefully that makes sense
Try templateData.getBlock('scripts').add instead of docpad.getBlock('scripts').add
trying to learn the Resources plugin
From my understanding, it helps to define 'resources' such as css and javascript files and automatically pull them into your gsp's when needed. I understand how to create modules that can then be loaded in using tags etc.
The part im not understanding is this: http://grails-plugins.github.com/grails-resources/guide/4.%20Using%20resources.html#4.2%20Linking%20to%20images
So ive created a module called 'images' in Config.groovy as follows:
grails.resources.modules = {
images {
resource url:'/images/view.jpg', attrs:[width: 1280, height:720 , alt: 'my view']
resource url:'/images/breakfast.jpg', attrs:[width: 1280, height:720, alt: 'breakfast']
}
}
The resources are included in the .gsp page in the head section as follows:
<head>
<r:require modules="jquery-ui, blueprint"/>
</head>
i know the resources have been successfully added to the head section because when i inspect the page source i see them there:
<link href="/ResourceTest/static/Aa7jV0N2qZjOz7TLZ9cl5cREIh2y5jJYV0ytn4nQg9r.jpg" rel="shortcut icon" width="1280" height="720" alt="my view" />
<link href="/ResourceTest/static/IpQBSjrYeLDdSUBGbP3jhf6Kkhvu1zV3XRtwWfKOIMn.jpg" rel="shortcut icon" width="1280" height="720" alt="breakfast" />
My question is this: how are the image resources then used? i mean i know if it was javascript, the importing of the resource gives you access to use the functions in the html code, but with regards to images, the site says "Once you have done this, using to reference them would automatically set the width, height and other attributes."
How? I've tried the following:
<r:img module="images">
<r:img alt="breakfast">
and a handful of others with no success
what does work is:
<r:img uri="/images/breakfast.jpg">
but this works regardless of whether or not you add the module with the r:require tag.. So whats the point of using this plugin for images then and how would i use it?
The <r:img> tag works just fine with our without <r:require>; it even works with undeclared image resources.
The point of the require tag is to prevent resource duplication. So, for instance, suppose you have multiple javascript resources that rely on jQuery, and they're all required. Add another layer of complication: say you're actually pulling together different gsp templates via sitemesh, and they each have their own resource dependencies. If you just put the normal HTML code to reference those resources in the head of each gsp layout, you might get multiple instances of them in your page header, which could prove problematic. Using the resources plugin makes sure you only get one instance of the required resource.
See http://grails-plugins.github.io/grails-resources/ref/Tags/require.html and http://grails-plugins.github.io/grails-resources/ref/Tags/layoutResources.html.
With images, though, this is not really necessary. If you have an image more than once on a page, it's probably because you wanted it, or because you're applying redundant layouts and need to refactor a bit. So, you are correct that the require tag doesn't really do much for images called via <r:img>. This is simply because images are a different sort of resource, so they're treated differently. Don't sweat it. :)
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->