Skip to content

Instantly share code, notes, and snippets.

@Grawl
Created October 2, 2017 11:47
Show Gist options
  • Select an option

  • Save Grawl/5ee5409f3efc5a3a877b89698d4c9f34 to your computer and use it in GitHub Desktop.

Select an option

Save Grawl/5ee5409f3efc5a3a877b89698d4c9f34 to your computer and use it in GitHub Desktop.
PageSpeed Insights MANIFEST automation

PageSpeed Insights MANIFEST automation

Test your website using Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/

On the bottom, you’ll see a link to download an archive containing optimized images, JS and CSS resources. You have to get it and replace your website’s files using archive content.

But after you unpack this archive, you will have all files moved to new locations based on file type, like this:

  • images
    • image.jpg
  • css
    • style.css

And so on.

If there is less than 10 files, you can move them manually.

But if you have more, you want to automate it.

Best way to automate it is to move files to original directory structure and copy them recursively on your server.

Find domain name

Search: \This zip file contains optimized resources for (.*). The optimized resources are listed below in the format of:
Replace: $1

$1 === domain

Save it to variable.

Remove MANIFEST description header.

Search and remove this: This zip file contains optimized resources for .*. The optimized resources are listed below in the format of: filename: url

Note: We only include up to 10 MB of optimized contents. If the optimized contents of your page are larger than 10 MB, we list them in this file too, with 'NOT INCLUDED' to indicate those URLs require further optimization.

Make every line a Bash command

Now, each line is a pattern ‘filename: url’ as downloaded and you got into archive. Like this one:

css/front_end_style.css: http://tirekeeper.org/wp-content/plugins/faq-wd/css/front_end_style.css?ver=1.0.30_59927949336e5

You have to modify every line to look like this:

cp css/front_end_style.css wp-content/plugins/faq-wd/css/front_end_style.css

To do this, you have to do following:

  1. add ‘cp ’ to line start
  2. remove ‘: /’
  3. remove URL query using ?(.*)$ regex pattern

Now, every line is a Bash command to copy file to your server’s original path.

Find & create all (sub)folders

Every line you have is a command to copy file from one path to another. But you have to create each folder and subfolder before you try to copy it, because Bash cp command cannot create folders on the fly.

So, you have a following:

cp css/front_end_style.css wp-content/plugins/faq-wd/css/front_end_style.css

You have to do one of the following:

  1. Manually create all directories using any file manager
  2. Manually create all lines of code to create directories recursively, like mkdir -p wp-content/plugins/faq-wd/css
  3. Use regular expressions to find folder name in your line
  4. Use a tool to work with paths as an objects to determine what is filename and what is a directory name

Make your script able to run

Add heading line:

#/bin/bash

Add run permission:

chmod +x ./MANIFEST

Then, you can run it:

./MANIFEST

Copy files to your server

Now you have all files into original directory structure, you have to copy this on your server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment