Optimizing Mediumish for Speed and Maintainability

While the Mediumish theme offers a clean and appealing design out of the box, optimizing your blog's performance and structure is essential for long-term success. In static site generation, every millisecond matters—especially when users access your content from different devices and networks.

Minimizing Unused CSS and JS

The Mediumish theme comes with pre-packaged CSS and JavaScript files that may include styles or scripts you're not using. This can lead to unnecessary bloat and slower page load times. Here's how to address it:

Step 1: Audit Existing CSS

Use browser DevTools to inspect which classes and components are unused. Alternatively, use tools like PurgeCSS or UnCSS to automate the process.

Step 2: Create a Custom SCSS Pipeline

Instead of using the bundled main.css, create your own SCSS pipeline in assets/css/custom.scss:

---
---

@import "reset";
@import "typography";
@import "layout";
@import "post";
@import "responsive";

This lets you modularize your styles, remove what’s unused, and only load what your layout needs.

Lazy Loading Images for Faster Rendering

To improve initial render time, especially on mobile devices, lazy load your images by adding the loading="lazy" attribute. Here's how to modify image includes in posts:

<img src="{{ site.baseurl }}/assets/images/post-cover.jpg" alt="SEO Tips" loading="lazy">

Consider also using srcset to serve responsive images based on screen resolution.

Structuring Includes and Partials for Better Code Hygiene

Many Jekyll users eventually struggle with layout sprawl: where everything gets dumped into a few large files. Instead, break down your layouts into reusable components stored in _includes/:

• header.html
• footer.html
• sidebar.html
• post-card.html
• author-box.html

This modularization makes it easier to maintain and refactor your site in the future.

Using Jekyll Defaults to Reduce Redundancy

In a large blog, your front matter can get repetitive. Use the defaults key in your _config.yml to automatically apply common layout or category settings:

defaults:
  - scope:
      path: "_posts"
    values:
      layout: "post"
      author: "admin"

This keeps your front matter clean and reduces chances of human error when publishing new posts.

Implementing Atomic CSS or Utility-First Design

If you're comfortable with frameworks like Tailwind CSS, you can use atomic classes to build fast, responsive components without bloating your CSS with custom styles. Here's a basic Tailwind-compatible snippet:

<div class="bg-white p-6 rounded-lg shadow-lg">
  <h3 class="text-xl font-bold mb-2">Latest Guide</h3>
  <p class="text-gray-600">Learn how to optimize your Jekyll blog for speed.</p>
</div>

This practice enhances maintainability and cuts down the amount of custom CSS you have to manage over time.

Handling Large Content Sites with Pagination and Archive Indexing

As your blog grows past 100+ posts, you'll need to think about content discoverability and memory optimization during builds. Jekyll supports built-in pagination and can handle content segmentation effectively.

Using Pagination in Your Blog Index

To avoid loading all posts at once on the homepage, use pagination in index.html:

---
layout: default
paginate: 10
---

{% for post in paginator.posts %}
  <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
{% endfor %}

<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}">Previous</a>
  {% endif %}
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}">Next</a>
  {% endif %}
</div>

Make sure to enable pagination in _config.yml:

paginate: 10
paginate_path: "/page/:num/"

Building an Archive Page

Instead of listing all posts chronologically, group them by year and month:

{% assign posts_by_year = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
{% for year in posts_by_year %}
  <h2>{{ year.name }}</h2>
  {% for post in year.items %}
    <p><a href="{{ post.url }}">{{ post.title }}</a> - {{ post.date | date: "%B %d" }}</p>
  {% endfor %}
{% endfor %}

This not only helps users navigate your blog historically but also lightens homepage load times.

Conclusion: Designing for Scale from Day One

Whether you're running a blog with a dozen posts or hundreds, making smart architectural choices early ensures your site stays fast and manageable. Mediumish is a beautiful starting point—but Jekyll's true power lies in how well you modularize, optimize, and think ahead.

These best practices allow you to build a blog that's not just well-designed, but one that performs and evolves gracefully—making it a perfect long-term platform for your digital marketing efforts.