i have a asp.net-mvc site and i have the same image referenced on the site about 1000 times. In all other browsers (ie7+, ff, etc) the pages loads in less than a second.
in IE6, it says . .
(1000 items remaining. . )
(999 items remaining. . )
(998 items remaining. . )
(997 items remaining. . )
etc . .
and linearly does a single countdown to 0.
If ie6 is caching these images and since its the same image, just:
<img src='../../test.png'>
why would it do this countdown. The IE 6 takes about 3 minutes to load, where, as mentioned, other browsers are less than a second.
any suggestions?
EDIT:
i also have the following code for the transparent PNG issue. I am not sure if this is related but wanted to mentioned it, if it was.
<!--[if lte IE 6]>
<link href="../../Content/iefix/Site_ie6.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img, div { behavior: url(../../Content/iefix/iepngfix.htc) }
</style>
<script type="text/javascript" src="../../Scripts/iepngfix_tilebg.js"></script>
<![endif]-->
pngfix is definitely the problem. It has to, one by one, re-render each one of those images after they've loaded. Use with care!
Try removing pngfix and see if your speed increases, or do some profiling - log the time before and after the execution of pngfix.
Yes, IE6 caches locally, provided the HTTP headers are set correctly.
What do your HTTP headers look like? You can see them with a web debugger such as Fiddler.
There are some known bugs in IE6 that relate to the way it caches HTC files (such as the one referenced in the code fragment you posted): they can get loaded twice, even when caching is enabled.
Related
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.
In laravel you can do one of these:
<link rel="stylesheet" href="/css/app.css">
<img src="/storage/img/logo.svg">
<script src="/js/app.js"></script>
<!-- same as the following -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<img src="{{asset('storage/img/logo.svg')}}">
<script src="{{asset('js/app.js')}}"></script>
The first is a relative path (relative to the public dir) and the second generates an absolute path.
Besides that, is there any difference in the results? At least in Chrome, Opera, and Firefox I could not perceive any difference.
Is there any advantage of using one over another? Maybe in performance or compability? Does one loads faster than the other?
There are potentially major differences.
The asset helper is CDN-aware. Setting the app.asset_url config value causes asset() to append that URL to every link it generates, which is very useful if you're using a CDN.
In addition, it'll save you a lot of work if your app winds up hosted in a subdirectory - all you have to do is set app.url, and asset will spit out the right URLs to js/app.js (i.e. /a/sub/folder/js/app.js).
While working in my own website, I'm facing a delay loading time (based on waterflow) for my site's favicon. I tried lots of way to reduce to waterflow delay but failed to manage it. After spending over 3 hours, I've figure out this solution which solve the problem like magic!!
Step 1: Convert favicon into a data-URI ( you can create it from here )
Step 2: Replace your existing favicon with the following code ( use it in function.php or child function)
function add_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAICAAAAAAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAgBAAAAAAAAAAAAAAAAAAAAA.......=" />';
}
add_action('wp_head', 'add_favicon');
It`s effective for the icon but it reduces a little when you used image formate like jpg png etc. Buts still its good solution for optimization.
I would like to make a .png alternative favicon image for non-IE browsers to read but I don't know what dimensions it should be. I looked at the .ico file in Photoshop and there are several different several dimensions to choose from. Presumably, I would make it the largest dimension of all the favicons in the file but I don't want to presume anything.
<link rel="icon" type="image/png" href="http://www.mydomain.com/content/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="http://www.mydomain.com/content/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
Using the syntax <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>, as long as you convert your favicon to a .ico format (I prefer to use this site as it also converts 32 bit transparent .PNG files) then all modern browsers should support it.
Some browsers require you to close the browser down before they cache the icon, but they display eventually.
As for size, they're displayed at 16 x 16 pixels, though most converters (such as the one in the link above) will resize them if they're larger.
Hope this helps!
There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!