{"action":"closed","issue":{"url":"https://api.github.com/repos/gribnoysup/single-page-application-optimization-tips/issues/10","repository_url":"https://api.github.com/repos/gribnoysup/single-page-application-optimization-tips","labels_url":"https://api.github.com/repos/gribnoysup/single-page-application-optimization-tips/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/gribnoysup/single-page-application-optimization-tips/issues/10/comments","events_url":"https://api.github.com/repos/gribnoysup/single-page-application-optimization-tips/issues/10/events","html_url":"https://github.com/gribnoysup/single-page-application-optimization-tips/issues/10","id":301179106,"number":10,"title":"Improve visually complete metrics for pages with dynamic content","user":{"login":"gribnoysup","id":5036933,"avatar_url":"https://avatars2.githubusercontent.com/u/5036933?v=4","gravatar_id":"","url":"https://api.github.com/users/gribnoysup","html_url":"https://github.com/gribnoysup","followers_url":"https://api.github.com/users/gribnoysup/followers","following_url":"https://api.github.com/users/gribnoysup/following{/other_user}","gists_url":"https://api.github.com/users/gribnoysup/gists{/gist_id}","starred_url":"https://api.github.com/users/gribnoysup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gribnoysup/subscriptions","organizations_url":"https://api.github.com/users/gribnoysup/orgs","repos_url":"https://api.github.com/users/gribnoysup/repos","events_url":"https://api.github.com/users/gribnoysup/events{/privacy}","received_events_url":"https://api.github.com/users/gribnoysup/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-02-28T20:53:33Z","updated_at":"2018-03-03T21:24:54Z","closed_at":"2018-03-03T21:24:54Z","author_association":"OWNER","body":"We focused a lot on the landing page images in a few last optimizations (#5, #9) and now this page is pretty fast. But other pages with graphics-heavy content are not performing that well:\r\n\r\n### /catalog\r\n\r\n![image](https://user-images.githubusercontent.com/5036933/36811076-eaa3637c-1ccc-11e8-9b6c-a003c61d0030.png)\r\n\r\n### /product/SK-A-2382\r\n\r\n![image](https://user-images.githubusercontent.com/5036933/36812289-ff6e95ca-1cd0-11e8-97fe-68cabbf9ad08.png)\r\n\r\nWe can improve this in several ways. \r\n\r\n- First of all, let's show images of the appropriate size, just as we did with the landing page. \r\n\r\n- Second, we can try to do something that is usually called progressive loading: show a placeholder (e.g., blurred version of our original image) right away and switch it to full image when it is loaded. \r\n\r\nThe second part of the solution may not improve metrics at all but will give a better perceptual speed feeling to the user.\r\n\r\nThankfully, Rijksmuseum API provides images from Google CDN, and with the help of some queries, we can ask Google to serve us image of any size we need.\r\n"}}
{"actor":{"display_login":"gribnoysup"}}