https://github.com/google-marketing-solutions/prefetchalyzer

Identify impactful pre-fetch and pre-cache opportunities across web pages in user flow by analyzing HAR logs
https://github.com/google-marketing-solutions/prefetchalyzer

har javascript performance precache prefetch web webperf

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/google-marketing-solutions/prefetchalyzer
• Owner: google-marketing-solutions
• License: apache-2.0
• Created: 2020-10-28T05:36:43.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-02T10:32:00.000Z (10 months ago)
• Last Synced: 2024-05-02T23:11:35.749Z (10 months ago)
• Topics: har, javascript, performance, precache, prefetch, web, webperf
• Language: Vue
• Homepage: https://gtech-professional-services.github.io/prefetchalyzer/
• Size: 3.79 MB
• Stars: 11
• Watchers: 5
• Forks: 7
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://webpagetest.org/) scripts to test prefetch impact

## Getting started

The easiest way to start using Prefetchalyzer is by using the hosted version available [here](https://google-marketing-solutions.github.io/prefetchalyzer/).

## Project setup

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:

```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 start

```

### Compiles and minifies for production

```

npm run build

```

### Lints and fixes files

```

npm run lint

```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### TODO Workflow Deployment

```

      - name: "Deploy \U0001F680"

        uses: JamesIves/[email protected]

        with:

          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'

          BRANCH: gh-pages

          FOLDER: dist

          CLEAN: true 

```

### Authors

- [Stephan Giesau](https://github.com/pianomister/)

- [Ayman Farhat](https://github.com/aymanfarhat)

### Disclaimer

This is not an officially supported Google product.