{"action":"created","issue":{"url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/902","labels_url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/902/labels{/name}","comments_url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/902/comments","events_url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/902/events","html_url":"https://github.com/backdrop/backdrop-issues/issues/902","id":72691565,"number":902,"title":"Improve front end performance of admin bar","user":{"login":"dboulet","id":208615,"avatar_url":"https://avatars.githubusercontent.com/u/208615?v=3","gravatar_id":"","url":"https://api.github.com/users/dboulet","html_url":"https://github.com/dboulet","followers_url":"https://api.github.com/users/dboulet/followers","following_url":"https://api.github.com/users/dboulet/following{/other_user}","gists_url":"https://api.github.com/users/dboulet/gists{/gist_id}","starred_url":"https://api.github.com/users/dboulet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dboulet/subscriptions","organizations_url":"https://api.github.com/users/dboulet/orgs","repos_url":"https://api.github.com/users/dboulet/repos","events_url":"https://api.github.com/users/dboulet/events{/privacy}","received_events_url":"https://api.github.com/users/dboulet/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/backdrop/backdrop-issues/labels/type%20-%20feature%20request","name":"type - feature request","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/backdrop/backdrop-issues/milestones/3","html_url":"https://github.com/backdrop/backdrop-issues/milestones/1.x-future","labels_url":"https://api.github.com/repos/backdrop/backdrop-issues/milestones/3/labels","id":427669,"number":3,"title":"1.x-future","description":"Milestone for any feature that should be added or bug that should be fixed in the 1.x series at an undetermined time in the future. Please use this for any features that have not had a milestone explicitly stated.","creator":{"login":"quicksketch","id":100206,"avatar_url":"https://avatars.githubusercontent.com/u/100206?v=3","gravatar_id":"","url":"https://api.github.com/users/quicksketch","html_url":"https://github.com/quicksketch","followers_url":"https://api.github.com/users/quicksketch/followers","following_url":"https://api.github.com/users/quicksketch/following{/other_user}","gists_url":"https://api.github.com/users/quicksketch/gists{/gist_id}","starred_url":"https://api.github.com/users/quicksketch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quicksketch/subscriptions","organizations_url":"https://api.github.com/users/quicksketch/orgs","repos_url":"https://api.github.com/users/quicksketch/repos","events_url":"https://api.github.com/users/quicksketch/events{/privacy}","received_events_url":"https://api.github.com/users/quicksketch/received_events","type":"User","site_admin":false},"open_issues":68,"closed_issues":4,"state":"open","created_at":"2013-09-14T18:40:59Z","updated_at":"2015-05-09T04:14:24Z","due_on":null,"closed_at":null},"comments":9,"created_at":"2015-05-02T20:10:23Z","updated_at":"2015-05-09T04:45:14Z","closed_at":null,"body":"Hi Nate, Jen and everyone,\r\n\r\nOne of the first things that I notice when using Backdrop is the janky way that the admin bar appears on the screen as the page loads. The way that things jump around as the bar is loaded is really jarring—not so much on fast page loads, but very perceivably on a slow connection.\r\n\r\nI recreated the loading of the admin bar in slow mo using an animated GIF, to illustrated what I’m talking about:\r\n\r\n![backdrop-admin-bar-load](https://cloud.githubusercontent.com/assets/208615/7442509/066e4f44-f0da-11e4-8f12-ee36d820bc58.gif)\r\n\r\nThere are a few issues that I can see, related to the admin bar’s over-dependance on JavaScript:\r\n\r\n1. A top margin is applied to the page with JavaScript, to make room for the bar. Since this happens only after the page has loaded, the user sees the entire page jump down as the margin is applied.\r\n2. The menus in the admin bar are made responsive using JavaScript. The most basic version of the menus are loaded first, which is then expanded into multiple drop downs only if there is enough space. Again, this is done after the page has loaded and the entire transformation is perceivable to the user.\r\n3. The entire admin bar is cached on the client side and loaded onto the page using JavaScript. I’m assuming that this is done to save on bandwidth and server-side processing. It’s clever, but a bad idea for two reasons:\r\n  - Bad perceived performance: the bar is only added to the page after the page has loaded, which means it’s completely missing as the page loads.\r\n  - A user without JavaScript gets nothing. Missing JS could be caused by any number of reasons (JS turned off/blocked, slow connection/time out).\r\n\r\nI would suggest a few solutions:\r\n\r\n1. Add the top body margin on the server-side. Easily done by adding a class in `admin_bar_preprocess_page()`.\r\n2. Make the bar responsive using media queries in CSS. This could be a little challenging since the width of the menus can change depending on chosen options and language, but not impossible.\r\n3. Get rid of the client-side caching, in favour of server-side caching. Would sacrifice reduced page weight and bandwidth usage, but improves client-side page load and provides non-JS fallback.\r\n\r\nThis would allow us to remove much of the JavaScript from Administration Bar module. I’d be interested to know what you think."},"comment":{"url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/comments/100428071","html_url":"https://github.com/backdrop/backdrop-issues/issues/902#issuecomment-100428071","issue_url":"https://api.github.com/repos/backdrop/backdrop-issues/issues/902","id":100428071,"user":{"login":"quicksketch","id":100206,"avatar_url":"https://avatars.githubusercontent.com/u/100206?v=3","gravatar_id":"","url":"https://api.github.com/users/quicksketch","html_url":"https://github.com/quicksketch","followers_url":"https://api.github.com/users/quicksketch/followers","following_url":"https://api.github.com/users/quicksketch/following{/other_user}","gists_url":"https://api.github.com/users/quicksketch/gists{/gist_id}","starred_url":"https://api.github.com/users/quicksketch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quicksketch/subscriptions","organizations_url":"https://api.github.com/users/quicksketch/orgs","repos_url":"https://api.github.com/users/quicksketch/repos","events_url":"https://api.github.com/users/quicksketch/events{/privacy}","received_events_url":"https://api.github.com/users/quicksketch/received_events","type":"User","site_admin":false},"created_at":"2015-05-09T04:45:13Z","updated_at":"2015-05-09T04:45:13Z","body":"Thanks @dboulet! I tested your PR and added this special condition to Backdrop.attachBehaviors() to emulate a bunch of slow behaviors:\r\n\r\n```js\r\nBackdrop.attachBehaviors = function (context, settings) {\r\n  context = context || document;\r\n  settings = settings || Backdrop.settings;\r\n  // Execute all of them.\r\n  $.each(Backdrop.behaviors, function () {\r\n    if ($.isFunction(this.attach)) {\r\n      var me = this;\r\n      window.setTimeout(function() {\r\n        me.attach(context, settings);\r\n      }, 500);\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThis revealed some interesting behavior, essentially running each behavior one at a time in slow-mo.\r\n\r\nThe admin bar *margin* was applied immediately, so fast it wasn't visible. However the admin bar itself was pokey to load, because it was still being called as a Drupal behavior. Instead of just applying the margin immediately, is there any reason why we couldn't apply the entire admin menu behavior at load time?\r\n\r\nI changed `Backdrop.behaviors.adminBar.attach` to `Backdrop.adminBar.init` and called it at the bottom of the file (inside only the jQuery closure), and then the entire menu (AJAX request and all) is loaded before all other behaviors every time. Since the AJAX request is actually cached, the menu appears quite quickly, but unfortunately still gets stuck based on the number of available TCP connections. This makes the delay more noticeable in Chrome (which only allows 5 connections per origin) than Firefox (which allows 15).\r\n\r\nI hadn't considered these connection limits previously. Even with the request cached, Chrome still prevents the display of cached content as if it required a TCP connection, even though it doesn't use one at all to display the cached copy. Very strange.\r\n\r\nIn any case, it's still less delay than before, loading admin menu first indeed makes the page appear less jumpy."}}