I'm using WebPageTest and am struggling to understand the meaning of the different colors and why it takes so long for my images to be shown (almost 2s). Using the WebPageTest waterfall view I can see a lot of "wait". I just dunno how to read the waterfall correctly and understand what all of my content is waiting on to be downloaded.
You can see my test results on WebPageTest: http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F,
I did some research and found I have to fix the issue using preload attribute:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="img.jpeg" as="image">
I have tried playing around with this preload attribute by preloading some of the js and also some of the images (requests 93-100) but neither of it have helped so far.
Which elements should I take a closer look on in order to fix this long waiting time before my content is showing?
The color key is at the top. It just tells you what type of asset is being loaded except for the DNS + connect + ssl which combined together make up the process of establishing the initial connection to a domain.
The Atelier theme doesn't seem to have been centered around performance, but you should still be able to get things loading faster. One thing that you could fix is you can make sure you're only loading the necessary scripts/css for each page. https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css doesn't need to be loaded on the homepage. Some items such as the cookie notice, could be loaded after everything else. Fixing that should give you a big improvement. You can also load the CSS/JS from a CDN. Make sure you're using a good caching plugin if you're not already doing so.
It's easy to spot some of these problems such as the cookie notice loading too early. The tricky part is finding plugins or code snippets that you can use to fix these performance issues.
If you look at the "browser main thread" at the bottom it will tell you what is happening during the "wait" time. According to this, There is a bunch of layout happening. Chrome just needs some time after receiving all of the CSS to process it before it continues loading the page. I think webpagetest's server's are slower than your typical computer, so they spend more time in the wait stage, but it's probably a good idea to optimize for the worst case scenario. Anyhow, that's what the wait is all about.
Related
What if use just one html page with blocks inside,
like following
<div id="page1" style="display:block">...</div>
<div id="page2" style="display:none">...</div>
<div id="page3" style="display:none">...</div>
Active block has style="display:block" others "display:none",
when block becomes active "display:block" previous goes "display:none".
AJAX server communication, for instance
$.post("json", { "name": $("#name").val(), "sex": $("#sex").val() },
function(data) { console.log("server responded", data); });
What are disadvantages of this approach?
this is fast and dynamic but this approach lacks of no bookmarking facility, user can't save a particular link because the data is dynamic, also it is not search engine friendly, another disadvantage is history button back and forward will not work.
There are no disadvantages to using pure AJAX. In fact, in a lot of ways, its advantageous.
If you don't plan for it correctly you can have some issues. For example, you're used to having CSS effect 1 page at a time, but with pure AJAX, the CSS will affect every single page.
Also, all things become slightly harder. Linking to another page becomes harder, as you have to use JavaScript.
Lastly, your APP will now REQUIRE JavaScript, so I'd have a decent fallback.
This approach is used in some mobile Web frameworks, such as jQuery Mobile, and is intended to make a Web application feel more native. This is more Web 2.0 than traditional websites or web applications where each page transition involves a trip to the server.
I'm sure you know the advantages already, so let's move on to the disadvantages.
Slightly Greater Initial Latency:
The main disadvantage of this approach is that it will take slightly longer to load the page content due to the fact that you're getting all of the HTML from the server in one single trip. Thus, the initial load time may involve more latency than in a traditional Web 1.0 application. However, with just a few pages, in my experience, the latency is not significant enough for it to be a problem.
Loss of Back Button - More Complexity in Maintaining History:
Another potential disadvantage is that, as a developer, you'll need to approach the development of your site differently. Because you're transitioning pages by hiding one DIV block and unhiding another, you'll lose native back button functionality. This can be mitigated by using the hash in the URL to record the history of page transitions. You'd then need to register an event to watch the hash and reload old content as the user navigates backwards. You'd also need to change the state of JavaScript objects and variables to refect the old state, which may add complexity to your app. There are of course API's and libraries to make this easier to implement and help ensure that you write good, maintainable code.
More Stateful Scope Involves Rethinking Approach and Possible Learning Curve:
Lastly, you'll need to remember that the scope of each page doesn't reset after each transition. While this could actually be an advantage in that your app is more stateful, you'll need to untrain yourself in the way of thinking that each page loaded will cause all of the JavaScript variables and data you've set to be cleared out.
Summary:
My suggestion, if you're going to go this route, is to use a library. Don't reinvent the wheel unless you have a good reason to. Libraries, like jQuery mobile, help ensure that there is good fallback for older browsers, and some even make sure that your site will still load using Web 1.0 techniques for cases where JavaScript is disabled.
I have a strange problem.
When I enter my site http://www.dinomuhic.com I sometimes see a left angle bracket in the top left corner on white background for a short time (1-2 sec) before my page is displayed.
I don't know why this is happening. I thought its because I send an AJAX request at document.ready state but I removed it and placed the stuff, which the AJAX would load at first entering, directly into the DOM so it doesnt have to be loaded and go through all the AJAX code but it still pops up.
It looks really unprofessional and if it has to do something with laoding speed of the page I would rather use a preloader instead of this happening. Perhaps some of you know why its happening.
Thank you
PS: and PLEASE for the love of god, don't tell me to get rid of jQuery/UI or the like buttons. There are millions of other pages which use these and they don't have such problems. Thank you
Cuz it's in your code before your meta redirect. Here's your culprit:
<html><head><meta http-equiv="Refresh" content="0; URL=http://www.dinomuhic.com/2010/index.php"><
<title>DINOMUHIC.COM - The official Homepage of Dino Muhic</title>
</head><body></body></html>
Notice the index.php"><
I'm having an issue with slow AJAX calls. This is a common question, but I've done everything suggested in all the research I can find. I'm hoping to get a consensus form people who read this.
Basically, I make an ajax request to a php page, which gets info from a database.
Here is the page.
I've timed all of my javascript, mySQL, and php scripts, requests, and pages.
(If you run firebug you can see my time markers in the console, as well as in the xml)
As an example -
The mysql request takes 20ms
The PHP page takes 50ms
The ajax success script, which processes the small amount of xml (less than 1k) and generates the markers, takes 8ms to run.
Yet, loading the page takes nearly 4 seconds.
So, assuming none of my scripts are lagging, this has to be a problem with the response time from the server, or my own internet connection, right?
I'd appreciate any theories or thoughts.
Thank you
Ok looked at your page and here are some of the issues I saw that would affect speed:
It takes 4ms to get your data in your getMarkers function but it takes 892ms to read the xml file. I would recommend falling back to vanilla javascript to read your xml file as the amount of find's you are performing is really harming your performance here.
Minify and combine all of the scripts that are local on your server. I was getting some really high response times. You can eliminate 4 http requests by doing this which with the response times on your server will help a bit. (Note don't combine jquery or jquery ui in this)
Since your server is a bit slow (not your fault this will vary as you are probably on shared hosting) I would recommend linking jquery and jquery ui to the google cdn hosted versions. Here is a post on that Jquery CDN
You have 24 images on your page; 23 of which are under 4KB. Combine those 23 into one CSS sprite image and assign a 1px X 1px blank gif to be the inline html image and use the CSS sprite image instead. Here is good article on what this is if you are unfamiliar: CSS Sprites explained also here is good online css sprites generator: CSS Sprite generator
Make sure you need Jquery UI for this page. I didn't see anything that would have required it. If you can remove it you save yourself 206k. Remember to remove the associated CSS file if it isn't needed. This would save you another 2 calls.
Didn't dig too deep but if you are not already kick off the call to setup the google map in a $(document).ready() that way the rest of your page can load and you can display a loading animation in that area. This way users know something is happening and your page will appear to load a lot quicker.
So you can greatly speed things up by doing the above. You would go from 82 components down to 51 local and 2 more on Google CDN. If you can improve that xml read time you can shave nearly another second off load time as well
When cached, my starting page only needs to load one element (the "root document") - but then it needs some time until it's rendered completely:
alt text http://www.walkner.biz/_temp/firebug_net.png
The elements following are things loaded asynchronous via JavaScript.
Two questions:
Why does it take so "long" from loading the root document until the DomContentLoaded-event?
Does it make sense to load some not-so-important things asynchronously? Is it important to have the DmoContentLoaded-event as early as possible? Unfortunately there's not much documentation about that event, but I don't think it's the moment when the page is displayed, is it?
I'm not sure YSlow is gonna help him as that will download all elements for a page and run performance tests on them, whereas swalkner's problem is how long it is taking to render the HTML page itself when all other elements (images, CSS, etc) are cached.
At least that's what I think he's saying.
In the original question you said, "The elements following are things loaded asynchronous via JavaScript." but then listed nothing. What is loaded?
I would suggest checking for Javascript errors in the first instance. Then try removing some of your asynchronous loading calls one by one until you hit the bottleneck. In fact, remove them all, how long does the downloaded HTML take to render? Take that time and work from there.
Is your HTML document very big? Does it use lots of inline styles that could be in the CSS file?
Perhaps if you posted a link to the site then people would have a look at it.
I've been using a very helpful AJAX-based script called AJAXTwits to load multiple Twitter timelines for a sports team into a div. The nice thing about the script is that it (1) combines multiple timelines into one chronological timeline and (2) caches the xml for faster loading. Every so often, though, Twitter's feeds go down, meaning that (i) the caching fails, (ii) the content won't load (I get stuck with the loading message), and (iii) if the problem is big enough, the whole page (not just div) breaks and throws a 404 error.
So, I'd like to add error-handling -- specifically, a pre-written message/div-content that will replace the loading message if the content doesn't load within a set amount of time. I've found some nice examples on this forum on how to handle timeouts. But those deal with a much simpler function/script syntax. Being a cut/paste/emulate programmer, I'm having trouble adapting that.
The main html looks like this:
<ul id='AjaxTwits'>
<li id='AjaxTwitsLoader'>
<em>Loading tweets</em>
</li>
</ul>
<script type="text/javascript">
getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", 6);
</script>
Without digging into the script and php files, is there any kind of error/timeout handling that can be placed into this html? Any help appreciated!
I did not use this script before therefore i can't help you on this, but i can recommend what i've been using for showing twitter messages on my apps.
It is a jquery plugin which you can find here: http://tweet.seaofclouds.com/.
I don't think you will have the same problem, because it uses jquery to make the ajax call. It worths to try.
Hope it helps.