{"id":13725740,"url":"https://github.com/google/pagespeed-inslides","last_synced_at":"2025-05-07T21:30:30.509Z","repository":{"id":65981425,"uuid":"98510167","full_name":"google/pagespeed-inslides","owner":"google","description":"HTML5 Slide Deck Generator Tool Based on the PageSpeed Insights API","archived":true,"fork":false,"pushed_at":"2019-04-12T14:56:01.000Z","size":23526,"stargazers_count":58,"open_issues_count":2,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T22:27:31.999Z","etag":null,"topics":["html5-slides","html5-slideshow","mobile-web","pagespeed","pagespeed-insights","pagespeed-insights-api","perfmatters","psi"],"latest_commit_sha":null,"homepage":"https://google.github.io/pagespeed-inslides/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-27T08:04:10.000Z","updated_at":"2024-10-25T12:26:49.000Z","dependencies_parsed_at":"2023-02-19T18:45:48.749Z","dependency_job_id":null,"html_url":"https://github.com/google/pagespeed-inslides","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/google%2Fpagespeed-inslides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fpagespeed-inslides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fpagespeed-inslides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fpagespeed-inslides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google","download_url":"https://codeload.github.com/google/pagespeed-inslides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252957009,"owners_count":21831420,"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":["html5-slides","html5-slideshow","mobile-web","pagespeed","pagespeed-insights","pagespeed-insights-api","perfmatters","psi"],"created_at":"2024-08-03T01:02:33.181Z","updated_at":"2025-05-07T21:30:28.925Z","avatar_url":"https://github.com/google.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PageSpeed InSlides\n\n**✏️ Description:**\n\nThe *PageSpeed InSlides* tool, which—as the name suggests\n(not a typo, think \"PageSpeed, but in slides\") —lifts the output from the\n[PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v2/reference/pagespeedapi/runpagespeed)\nand creates an interactive [HTML5 slide](http://tomayac.github.io/html5-slides/template.html#1)\ndeck for you, on the fly. The target audience is technical, for example,\nfront-end engineers and webmasters, this is not meant as an introductory pitch deck.\nAlso, the decks are designed for *desktop*, to be shown in *full screen mode*, ideally on a projector.\n\n*Please note: this is not an official Google product.*\n\n**🖥 Screenshots:**\n\nInput form with various options:\n\n![Input Form](https://github.com/google/pagespeed-inslides/blob/master/docs/0.png)\n\nSlide examples:\n\n![Title Slide](https://github.com/google/pagespeed-inslides/blob/master/docs/1.png)\n\n![Screenshot Slide](https://github.com/google/pagespeed-inslides/blob/master/docs/2.png)\n\n![Waterfall Diagram Slide](https://github.com/google/pagespeed-inslides/blob/master/docs/3.png)\n\n![Optimization Slide](https://github.com/google/pagespeed-inslides/blob/master/docs/4.png)\n\n**📚 Instruction Manual:**\n\nThe features of the PageSpeed InSlides tool are described in the [manual](https://github.com/google/pagespeed-inslides/raw/master/docs/instructions.pdf) (PDF).\n\n**🔥 Demo:**\n\nNavigate to this [demo deck](https://google.github.io/pagespeed-inslides/),\nthen navigate in the slides with the arrow keys ⬅️ ➡️).\nPlease note that this demo is not generated live, but an archived older version.\n\n**⚙️ Setup:**\n\nGet an API key and activate the necessary APIs in the Google Developer Console:\n\n* PageSpeed Insights API ([instructions](https://developers.google.com/speed/docs/insights/v2/first-app#APIKey))\n* URL Testing Tools API ([instructions](https://developers.google.com/webmaster-tools/search-console-api/v1/configure))\n\nThen rename the ```dot_env``` file in the repository to ```.env``` and paste the API key in.\n\nNow you are good to go and launch the tool via ```npm run start```.\n\n**🔨 Usage:**\n\nOpen the form at [localhost:3000/](http://localhost:3000) and simply enter a URL,\noptionally change any of the other fields.\n\nAs an alternative, the user interface is also accessible in form of a hackable URL 😎.\nJust replace the highlighted parts as explained below:\n[http://localhost:3000/slides?screenshot=true\u0026locale=en\u0026strategy=mobile\u0026url=https://blog.google/](http://localhost:3000/slides?screenshot=true\u0026locale=en\u0026strategy=mobile\u0026url=https://blog.google/)\n*   \u0026locale=en → Any of the language codes [supported](https://developers.google.com/speed/docs/insights/languages) by the API.\n*   \u0026strategy=mobile → Either \"desktop\" or \"mobile\".\n*   \u0026url=[https://blog.google](https://blog.google/)/ → Any URL that is publicly available.\n*   \u0026screenshot=true → Whether or not to include a screenshot, either \"true\" or \"false\".\n*   \u0026filterThirdPartyResources=false → Whether or not to filter out many third-party resources, either \"true\" or \"false\".\n*   \u0026mobileFriendlyTest=false → Whether or not to run a [mobile-friendly test](https://developers.google.com/webmaster-tools/search-console-api/), either \"true\" or \"false\".\n\n**📧 Contact:**\n\nThomas Steiner ([tomac@google.com](mailto:tomac@google.com))\n\n**📄 License:**\n\n```plaintext\nCopyright 2017 Google\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Fpagespeed-inslides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle%2Fpagespeed-inslides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Fpagespeed-inslides/lists"}