{"id":25543958,"url":"https://github.com/dimitrinicolas/skeleton-screens-concept","last_synced_at":"2025-04-11T18:10:52.980Z","repository":{"id":81565457,"uuid":"185569896","full_name":"dimitrinicolas/skeleton-screens-concept","owner":"dimitrinicolas","description":"A Skeleton Screens implementation for websites first load in CSS. The main benefit is to provide a great user experience on first page load and to decrease the First and Largest Contentful Paint time that has a role to play in Google's website evaluation","archived":false,"fork":false,"pushed_at":"2019-05-09T16:37:27.000Z","size":323,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T14:05:28.928Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dimitrinicolas.github.io/skeleton-screens-concept","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimitrinicolas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-08T09:00:09.000Z","updated_at":"2024-03-22T19:02:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"10310fab-0704-4263-944e-307ef956f878","html_url":"https://github.com/dimitrinicolas/skeleton-screens-concept","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fskeleton-screens-concept","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fskeleton-screens-concept/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fskeleton-screens-concept/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fskeleton-screens-concept/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimitrinicolas","download_url":"https://codeload.github.com/dimitrinicolas/skeleton-screens-concept/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456365,"owners_count":21106603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-20T07:39:54.749Z","updated_at":"2025-04-11T18:10:52.969Z","avatar_url":"https://github.com/dimitrinicolas.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Skeleton Screens Concept\n\n[![Skeleton Screens Concept example screenshot](fixtures/example.png)](https://dimitrinicolas.github.io/skeleton-screens-concept)\n\nI present to you a concept of implementation of Skeleton Screens in web Single Page\nApplications. Before thinking about using this concept in your project, make\nsure to read the [Known issues](#known-issues) section.\n\nThe main benefit is to provide a great user experience on first page load and to\ndecrease the First Contentful Paint time that has a role to play in Google's\nwebsite evaluation, you can learn more in [Benefits](#benefits) section\n\n## [Example](https://dimitrinicolas.github.io/skeleton-screens-concept)\n\nAn example is available at the following address:\n[dimitrinicolas.github.io/skeleton-screens-concept](https://dimitrinicolas.github.io/skeleton-screens-concept).\n\nI made sure that the style sheet weighs at least 300 kb for the example by\nadding random strings inside. You can use your browser developer tools to\nsimulate a slow internet connection.\n\nThe source code is available in this repository: [index.html](index.html).\n\n## Concept\n\nFirst, we load the application style sheet as a non-blocking resource using the\nfollowing pattern in the HTML `head` element:\n\n```html\n\u003clink rel=\"preload\" href=\"style.css\" as=\"style\"\u003e\n```\n\nAnd add the stylesheet at the end of your `body` element:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n```\n\nThen, we add some CSS inside a `style` tag just before the non-blocking style\nsheet loading:\n\n```html\n\u003chead\u003e\n  \u003c!-- Any head things --\u003e\n\n  \u003cstyle\u003e\n    /** Standard style of the application */\n    html {\n      background-color: white;\n    }\n    body {\n      margin: 0;\n    }\n\n    /** Skeleton style element */\n    .header {\n      height: 80px;\n      background-color: blue;\n    }\n    .header__content {\n      display: none;\n    }\n\n    .footer {\n      display: none;\n    }\n  \u003c/style\u003e\n\n  \u003c!-- Non-blocking style sheet loading --\u003e\n  \u003clink rel=\"preload\" href=\"style.css\" as=\"style\"\u003e\n\u003c/head\u003e\n```\n\nThen, we need to crush some pre-loading style by adding `display: block` to\n`.header__content` and `.footer` in our `style.css` file.\n\n### Animations\n\nWe could add skeleton blocks and highlighting animations in our pre-loading\nstyle using `before` and `after` pseudo-elements and CSS animations.\n\nTo create a fake logo block inside the header, we can add the following style:\n\n```css\n.header__wrap::before {\n  content: \"\";\n\n  position: absolute;\n  top: 16px;\n  left: 0;\n  bottom: 16px;\n\n  width: 100px;\n\n  background-color: #efefef;\n}\n```\n\nThen we can add an highlight sweeping animation using like that:\n\n```css\n.header__wrap::before {\n  /* Block style */\n\n  background-image:\n    linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6) 50%, transparent 100%);\n\n  background-repeat: no-repeat;\n  background-size: 80px 100%;\n  background-position: -80px 0;\n\n  animation: sweep 1000ms ease-in-out 0s infinite;\n}\n\n@keyframes sweep {\n  to {\n    background-position: calc(100% + 80px) 0;\n  }\n}\n```\n\n## Known issues\n\nWhen loading the application style as a non-blocking resource, any element with\na `transition` CSS property will get triggered on style sheet load if its\nanimated properties values are different from the default or from the\npre-loader style.\n\nTo prevent this problem to trigger transition on every property of the element,\nwe can target the properties to animate using the `transition-duration` and\n`transition-property` CSS properties. You can learn more about theses on Mozilla\nWeb documentation:\n[developer.mozilla.org/fr/docs/Web/CSS/transition-property](https://developer.mozilla.org/fr/docs/Web/CSS/transition-property).\n\nTo totally prevent this issue we'll need to add a specific class name to the\n`html` tag like `.js-can-use-transitions` on style loading after a small time\nand use the `transition` property in our style only when this class name has\nbeen added:\n\nAt the end of the `body` element:\n\n```html\n\u003clink\n rel=\"stylesheet\"\n href=\"style.css\"\n onload=\"setTimeout(function () { document.documentElement.className += ' js-can-use-transitions';}, 100);\"\n\u003e\n```\n\nIn `style.css`:\n\n```css\n.js-can-use-transitions .header {\n  transition: background-color 300ms;\n}\n```\n\nThis solution is not ideal, the user will need to have JavaScript enabled to\nhave CSS transitions and the time to wait before adding the class name to the\n`html` element depends on the user device computation performance. The 100\nmilliseconds value is the maximum average time the browser will need to compute\nthe style sheet.\n\n## Benefits\n\nI did five [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) tests on each version of the same example page: [the\nstandard one without skeleton screens and with render-blocking CSS](https://dimitrinicolas.github.io/skeleton-screens-concept/index-without-skeleton-screens.html) and [the version with this concept](https://dimitrinicolas.github.io/skeleton-screens-concept).\n\nThe Mobile score and First Contentful Paint time were always the same after each\ntest. The version with skeleton screens got a 99% mobile score with 0,8 seconds\nfor the First Contentful Paint. The standard version got a 97% mobile score with\n2,2 seconds for the First Contentful Paint.\n\nThese results are not the best example because the example page has a super\nsimple DOM and the 300 kb style sheet only contains a small amount of CSS to\ncompute, the whole file size come from a random string in a CSS comment.\n\nI'll need to implement this concept into a real website to better understand the\nperformance benefit.\n\n## Use Case\n\nThis approach of skeleton screens is useful for Single Page Applications with a\nheavy style sheet.\n\n## Frameworks implementation\n\nI need to find solutions to use this concept with static website frameworks like\n[Gatsby](https://github.com/gatsbyjs/gatsby) or [Next.js](https://github.com/zeit/next.js/).\n\n## Related\n\n- [Everything you need to know about skeleton screens (uxdesign.cc)](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) - An article by [Bill Chung](http://billat.work/) about differents skeleton screens design solutions and studies of their performances on the user perception.\n\n## License\n\nThis project is licensed under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Fskeleton-screens-concept","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitrinicolas%2Fskeleton-screens-concept","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Fskeleton-screens-concept/lists"}