A tool that helps you identify the impact of applying prefetch strategies on your web app resources by analyzing pages across a simulated user's journey on the site

• Generates an impact report highlighting:

  • The assets that can be prefetched and on which page to get the best savings
  • Savings in kB for each page navigation when applying prefetch
  • Issues with Cache-Control on frequently used critical assets

• Exporting results

  • Generates HTML code prefetch statements based on selected resources
  • Generates code for WebPageTest scripts to test prefetch impact

The easiest way to start using Prefetchalyzer is by using the hosted version available here.

The project was generated with vue-cli.

npm install --legacy-peer-deps

For VSCode, Vetur extension is used to format the .vue files. Following settings are made in settings.json:

{
    "git.ignoreLimitWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "stylelintIntegration": true,
            "eslintIntegration": true,
            "semi": false,
            "singleQuote": true,
            "tabWidth": 2,
            "tabs": false,
            "trailingComma": "none",
            "printWidth": 160
        }
    }
}

npm start

npm run build

npm run lint

See Configuration Reference.

      - name: "Deploy \U0001F680"
        uses: JamesIves/[email protected]
        with:
          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
          BRANCH: gh-pages
          FOLDER: dist
          CLEAN: true 

• Stephan Giesau
• Ayman Farhat

This is not an officially supported Google product.