{
    "componentChunkName": "component---src-templates-post-jsx",
    "path": "/blog/optimizing-jekyll",
    "result": {"data":{"post":{"id":"73705343-f0cb-52f5-b733-10de2ad5076b","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Optimizing Jekyll\",\n  \"slug\": \"/optimizing-jekyll\",\n  \"description\": \"Some insight into how to improve the performance of your Jekyll website\",\n  \"date\": \"2017-04-10T00:00:00.000Z\",\n  \"category\": \"Web Development\",\n  \"image\": \"./img/web-performance.png\",\n  \"tags\": [\"jekyll\", \"web dev\", \"optimization\", \"javascript\"],\n  \"published\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", {\n    className: \"h-tip\"\n  }, \"For a more up-to-date and comprehensive explanation this subject has been revisited \", mdx(\"a\", {\n    href: \"https://brettstevenson.io/blog/optimizing-jekyll-with-gulp-revisited.html\"\n  }, \"here\")), \"Upon launching my new redesigned website, I've been spending the some time optimizing the site performance and load speeds using **[Google PageSpeed Insights]**. Therefore, I thought I would take a second to share with you my discoveries and also recommend a few helpful resources for improving the performance of your own Jekyll website. Using these methods, I have managed to receive the following PageSpeed rating. Though this is still a work-in-progress, and I will be adding [updates](#updates) as I explore this topic further.\", mdx(\"p\", {\n    \"align\": \"center\"\n  }, \"\\n  \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://user-images.githubusercontent.com/16360374/27520456-f313f3de-59c0-11e7-81ce-40273d1ffcbb.png\",\n    \"className\": \"shadow\",\n    \"width\": 800,\n    \"alt\": \"PageSpeed\",\n    \"style\": {},\n    \"'0.5em'}}\": \"\"\n  }), \"\\n\"), mdx(\"p\", {\n    className: \"h-note\",\n    style: {\n      marginBottom: '3em'\n    }\n  }, \"In an effort not to repeat the information in the articles listed below, I'll only share findings that weren't explicitly discussed in any of the following resources.\"), mdx(\"h3\", null, \"Optimize your own images\"), mdx(\"p\", null, \"  As with most websites, when I first launched the new design, the biggest hindrance to my websites loading speed was the size of the images on my page. Though, after observing the disappointing quality of the \", \"\\u201C\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optimized\"), \"\\u201D\", \" images provided by PageSpeed Insights, I instead elected to use \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.gimp.org/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"GIMP\")), \" to manually decrease and compress my images to preserve the image quality until PageSpeeds requirements were satisfied.\\nI would highly recommend doing the same, particularly for images that are featured in various places throughout your website.\"), mdx(\"hr\", null), mdx(\"h3\", null, \"Resources:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://medium.com/@dimitrikoenig/scoring-100-on-googles-pagespeed-insights-with-jekyll-adcbbb229baf\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Scoring 100 on Google\\u2019s PageSpeed Insights with Jekyll\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://chrishallahan.com/blog/pass-google-pagespeed-performance-test\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"How to get your Jekyll + GitHub pages website to pass Google\\u2019s PageSpeed Tests\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"http://o.zasadnyy.com/blog/optimized-jekyll-site-with-grunt/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Optimized Jekyll site with Grunt\")))), mdx(\"hr\", null), mdx(\"h3\", null, \"The Results\"), mdx(\"p\", null, \"  I\", \"\\u2019\", \"ve provided my resulting Gulpfile below, though it\", \"\\u2019\", \"s also available via \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://gist.github.com/tterb/741b353d9a2a19947d2b10a9c94de21f\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"gist\")), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var gulp = require('gulp'),\\n    shell = require('gulp-shell'),\\n    minifyHTML = require('gulp-minify-html'),\\n    minifyCSS = require('gulp-minify-css'),\\n    sass = require('gulp-sass'),\\n    importCss = require('gulp-import-css'),\\n    autoprefixer = require('gulp-autoprefixer'),\\n    rename = require('gulp-rename'),\\n    imagemin = require('gulp-imagemin'),\\n    pngquant = require('imagemin-pngquant'),\\n    jpegtran = require('imagemin-jpegtran'),\\n    gifsicle = require('imagemin-gifsicle'),\\n    optipng = require('imagemin-optipng'),\\n    replace = require('gulp-replace'),\\n    glob = require('glob'),\\n    fs = require('fs'),\\n    concat = require('gulp-concat-util'),\\n    uncss = require('gulp-uncss'),\\n    critical = require('critical');\\n    download = require('gulp-download');\\n\\n// Jekyll\\ngulp.task('jekyll', function() {\\n  return gulp.src('index.html', { read: false })\\n    .pipe(shell(['jekyll build']));\\n});\\n\\n// HTML\\ngulp.task('optimize-html', function() {\\n    return gulp.src('_site/**/*.html')\\n        .pipe(minifyHTML({\\n            quotes: true\\n        }))\\n        .pipe(replace(/<link href=\\\\'\\\\/css\\\\/style.scss\\\\'[^>]*>/, function(s) {\\n            var style = fs.readFileSync('_site/css/style.scss', 'utf8');\\n            return '<style>\\\\n' + style + '\\\\n</style>';\\n        }))\\n        .pipe(gulp.dest('_site/'));\\n});\\n\\n// Javascript\\ngulp.task('javascript', ['jekyll'], function() {\\n    return gulp.src('js/main.js', { read: false })\\n        .pipe(shell(['jspm install']))\\n        .pipe(shell(['jspm bundle-sfx js/main _site/js/min.js --minify --no-mangle']));\\n});\\n\\n// CSS\\ngulp.task('optimize-css', function() {\\n   return gulp.src('_site/css/style.scss')\\n       .pipe(autoprefixer())\\n       .pipe(uncss({\\n           html: ['_site/**/*.html'],\\n           ignore: []\\n       }))\\n       .pipe(minifyCss({keepBreaks: false}))\\n       .pipe(gulp.dest('_site/css/'));\\n});\\n\\n// Eliminate render-blocking CSS\\ngulp.task('include-css', function() {\\n  return gulp.src('_site/**/*.html')\\n    .pipe(replace(/<link href=\\\\'\\\\/css\\\\/style.scss\\\\'[^>]*>/, function(s) {\\n      var style = fs.readFileSync('_site/css/style.scss', 'utf8');\\n      return '<style>\\\\n' + style + '\\\\n</style>';\\n    }))\\n    .pipe(gulp.dest('_site/'));\\n});\\n\\n// Eliminate render-blocking CSS in above-the-fold content\\ngulp.task('styles:critical', function() {\\n    return gulp.src('src/sass/critical.css')\\n    .pipe(minifyCSS())\\n    .pipe(concat.header('<style>'))\\n    .pipe(concat.footer('</style>'))\\n    .pipe(rename({\\n        basename: 'criticalCSS',\\n        extname: '.html'\\n      }))\\n    .pipe(gulp.dest('_includes/'));\\n});\\n\\n// Optimize Images\\ngulp.task('optimize-images', function () {\\n    return gulp.src(['_site/**/*.jpg', '_site/**/*.jpeg', '_site/**/*.gif', '_site/**/*.png'])\\n    .pipe(imagemin({\\n        progressive: false,\\n        svgoPlugins: [{removeViewBox: false}],\\n        use: [pngquant(), jpegtran(), gifsicle()]\\n    }))\\n    .pipe(gulp.dest('_site/'));\\n});\\n\\n// Purge cache\\ngulp.task('purge-cache', function() {\\n    var options = {\\n        token: config.cloudflareToken,\\n        email: config.cloudflareEmail,\\n        domain: config.cloudflareDomain\\n    };\\n    cloudflare(options);\\n});\\n\\n// Remove unused CSS\\ngulp.task('uncss', function() {\\n  return gulp.src([\\n      'css/style.scss'\\n    ])\\n    .pipe(uncss({\\n      html: [\\n        // your site pages here\\n        'http://127.0.0.1:4000/',\\n      ]\\n    }))\\n    .pipe(gulp.dest('css/uncss/'));\\n});\\n\\n// Google Analytics\\ngulp.task('fetch-analytics', function() {\\n  return download('https://www.google-analytics.com/analytics.js')\\n    .pipe(gulp.dest('assets/'));\\n});\\n\\n// Run (Default)\\ngulp.task('default', ['javascript', 'optimize-css', 'include-css',  'optimize-html', 'optimize-images', 'styles:critical', 'fetch-analytics']);\\n\\n// Run: Build\\ngulp.task('build', ['javascript', 'optimize-css', 'include-css',  'optimize-html', 'optimize-images', 'styles:critical', 'fetch-analytics']);\\n\\n// Run: Clean\\ngulp.task('clean', ['uncss']);\\n\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Updates\"), mdx(\"h3\", null, \"Leveraging browser caching\"), mdx(\"p\", null, \"  Since sharing my original post, I\", \"\\u2019\", \"ve since found a way to resolve the persistent \", \"\\u201C\", \"Leverage browser caching\", \"\\u201D\", \" issue, which was ironically referencing Google\", \"\\u2019\", \"s own analytics tools.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Google Analytics\\ngulp.task('fetch-analytics', function() {\\n  return download('https://www.google-analytics.com/analytics.js')\\n    .pipe(gulp.dest('assets/')); // or whatever folder you want it in\\n});\\n\")), mdx(\"p\", null, \"  This way, a new version of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"analytics.js\"), \" file is downloaded on each deployment, rather than utilizing Google\", \"\\u2019\", \"s remote file. Therefore, you should also instead include your local \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"analytics.js\"), \" file in your html.\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/optimizing-jekyll"},"frontmatter":{"title":"Optimizing Jekyll","description":"Some insight into how to improve the performance of your Jekyll website","date":"10 April 2017","category":"Web Development","image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#98c8d8","images":{"fallback":{"src":"/static/e94bfb6fbeb6d9a1720c3debb45bde90/0e6c7/web-performance.png","srcSet":"/static/e94bfb6fbeb6d9a1720c3debb45bde90/d4b25/web-performance.png 750w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/85cb2/web-performance.png 1080w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/174f5/web-performance.png 1366w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/0e6c7/web-performance.png 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/e94bfb6fbeb6d9a1720c3debb45bde90/f1ea4/web-performance.webp 750w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/5c89b/web-performance.webp 1080w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/443fe/web-performance.webp 1366w,\n/static/e94bfb6fbeb6d9a1720c3debb45bde90/01ed5/web-performance.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.35833333333333334}}}}},"avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg","srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/93848/me.jpg 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/73bb6/me.jpg 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/97a19/me.jpg 480w","sizes":"(min-width: 240px) 240px, 100vw"},"sources":[{"srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/927d1/me.webp 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/507b0/me.webp 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/8d565/me.webp 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/21b1a/me.webp 480w","type":"image/webp","sizes":"(min-width: 240px) 240px, 100vw"}]},"width":240,"height":240}}}},"pageContext":{"slug":"/optimizing-jekyll"}},
    "staticQueryHashes": []}