Posts

Showing posts with the label wwe

Advanced SEO and Speed Tactics for Jekyll Mediumish on GitHub Pages

By -

Is There More You Can Do to Boost SEO and Performance?

Absolutely. While the previous guide covered foundational optimizations, true long-term success comes from advanced strategies. These improvements go beyond meta tags and lazy loading, diving into technical SEO, structured data, Core Web Vitals, and efficient build workflows for Jekyll + GitHub Pages setups using the Mediumish theme.

How to Optimize for Core Web Vitals

Core Web Vitals are essential for Google's page experience signals. Here's how to improve LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift) for your Mediumish site.

1. Reduce LCP by Deferring Non-Critical Scripts

Move JS that’s not essential below the fold to load at the end of the body. Use defer and async attributes for third-party scripts like analytics:


<script src="analytics.js" defer></script>

2. Minimize CLS by Setting Explicit Image Dimensions

Jekyll users often forget to set width/height in image tags. Add it manually or dynamically in post templates:


<img src="{{ post.image }}" alt="{{ post.title }}" width="800" height="450" loading="lazy">

3. Preload Fonts and Critical Assets

Load your fonts early to avoid layout shift:


<link rel="preload" href="/assets/fonts/mediumish.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Can You Implement Structured Data on a Jekyll Blog?

Yes, using JSON-LD and Liquid, you can enhance your content with structured data to improve your appearance in search results (rich snippets).

Example: Article Schema for Blog Posts


{% raw %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ page.url | absolute_url }}"
  },
  "headline": "{{ page.title }}",
  "description": "{{ page.description }}",
  "image": "{{ page.image | absolute_url }}",
  "author": {
    "@type": "Person",
    "name": "{{ site.author.name }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ site.title }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ '/assets/logo.png' | absolute_url }}"
    }
  },
  "datePublished": "{{ page.date | date_to_xmlschema }}"
}
</script>
{% endraw %}

Place this block inside the _includes/head.html or directly in your post layout.

How to Automate SEO Checks and Lighthouse Audits

Since Jekyll doesn’t run a server, you can use CI tools like GitHub Actions to run SEO tests or Lighthouse performance audits after each commit.

Using GitHub Actions + Lighthouse CI

  1. Create .github/workflows/lighthouse.yml
  2. Use a free GitHub Action like treosh/lighthouse-ci-action

name: Lighthouse
on:
  push:
    branches: [main]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Audit using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        with:
          urls: "https://yourusername.github.io"

How to Improve Build Speed and Maintenance

Large Jekyll blogs can slow down builds. Here’s how to stay efficient and scalable.

1. Use jekyll-include-cache Plugin

Speeds up includes like navbars or footers. Add to _config.yml:


plugins:
  - jekyll-include-cache

2. Disable Unused Features

Comment out Disqus, unused scripts, or widgets in your templates to reduce DOM weight and JS parse time.

3. Compress Final Build with GitHub Action

Add a step to gzip static assets before pushing:


- name: Gzip Assets
  run: find _site -type f -name '*.js' -o -name '*.css' -o -name '*.html' -exec gzip -k {} \;

Can You Implement International SEO in Jekyll Mediumish?

If you're planning to go multilingual, you’ll need hreflang tags and a smart content structure using Jekyll data or collections.

Example hreflang Implementation

In _includes/head.html:


<link rel="alternate" hreflang="en" href="https://example.com/en/{{ page.url }}" />
<link rel="alternate" hreflang="id" href="https://example.com/id/{{ page.url }}" />

You can generate these dynamically with YAML files like:


en:
  homepage: "/en/"
id:
  homepage: "/id/"

How to Monitor SEO Health Over Time

  • Google Search Console: Submit your sitemap, monitor crawl issues.
  • Bing Webmaster Tools: Gain visibility outside of Google.
  • Ahrefs Webmaster Tools: Check backlink profile and keyword performance.

Schedule monthly audits using Screaming Frog (free for small sites) or Sitebulb to check for broken links, missing meta tags, and duplicate titles.

Final Technical Recommendations

  • ✅ Always validate with W3C Validator
  • ✅ Use PageSpeed Insights regularly
  • ✅ Keep all assets under version control (especially fonts and images)
  • ✅ Add 404.html and offline fallback for better UX

Conclusion: A Powerful Blog Platform with Jekyll + Mediumish

With proper optimization, your Mediumish-powered Jekyll blog on GitHub Pages can rival commercial CMS platforms in terms of speed, SEO, and maintainability. It’s not just about deploying a static site—it’s about creating a finely-tuned web asset that ranks well, loads instantly, and scales cleanly over time.

Where to Go Next?

If you've reached this level of optimization, the next logical steps include:

  • Adding full-text site search with Lunr.js or Algolia
  • Turning your blog into a multilingual publishing platform with Jekyll data files
  • Building a documentation hub or resource library using collections

These enhancements not only boost usability but also unlock new SEO potential.

Read more
Subscribe to: Comments (Atom)