{"action":"opened","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":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-05-02T20:10:23Z","updated_at":"2015-05-02T20:10:23Z","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."}}