isabella232 / prefetchalyzer

Identify impactful pre-fetch and pre-cache opportunities across web pages in user flow by analyzing HAR logs

Prefetchalyzer

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

Features

• 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

Getting started

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

Project setup

The project was generated with vue-cli.

npm install

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
        }
    }
}

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Authors

• Stephan Giesau
• Ayman Farhat

Disclaimer

This is not an officially supported Google product.