Skip to content

A lightweight WordPress plugin that automatically adds the fetchpriority="high" attribute to featured images to improve page loading performance and Core Web Vitals scores.

License

Notifications You must be signed in to change notification settings

gunjanjaswal/FetchPriority-Featured-Image

Repository files navigation

FetchPriority Featured Image

GitHub release (latest by date) GitHub stars GitHub forks License

A lightweight WordPress plugin that automatically adds the fetchpriority="high" attribute to featured images to improve page loading performance and Core Web Vitals scores.

Description

FetchPriority Featured Image is a simple plugin that helps improve your website's performance by adding the fetchpriority="high" attribute to featured images. This tells browsers to prioritize loading these important images, which can improve your Largest Contentful Paint (LCP) scores and overall user experience.

Key Features

  • Automatically adds fetchpriority="high" to featured images
  • Intelligently applies the attribute only where it matters most:
    • On single posts and pages
    • On the first post of archive pages, blog home, and search results
  • Zero configuration required - install and activate
  • No settings page to keep things simple and lightweight
  • Compatible with most WordPress themes including Divi, Elementor, and standard themes

Installation

From GitHub

  1. Download the latest release from the GitHub repository
  2. Upload the plugin folder to the /wp-content/plugins/ directory of your WordPress installation
  3. Activate 'FetchPriority Featured Image' from your Plugins page

Manual Installation

  1. Clone the repository: git clone https://github.com/gunjanjaswal/FetchPriority-Featured-Image.git
  2. Upload the fetchpriority-featured-image folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the 'Plugins' menu in WordPress

Frequently Asked Questions

Does this plugin modify my images?

No, this plugin only adds an HTML attribute to the image tag. It doesn't modify your actual image files or database entries.

Will this work with my theme?

Yes! This plugin works with any theme that uses WordPress's standard featured image functions. It also includes specific support for popular page builders like Divi and Elementor that use custom image rendering methods.

Do I need to configure anything?

No, the plugin works automatically once activated. There are no settings to configure.

How can I verify it's working?

You can view the HTML source of your pages and look for fetchpriority="high" in the featured image HTML.

License

This plugin is licensed under the GPL v2 or later.

Credits

Created by Gunjan Jaswaal

Technical Details

How It Works

The plugin uses multiple WordPress filters to ensure broad compatibility:

  1. post_thumbnail_html - Catches featured images rendered via the_post_thumbnail()
  2. wp_get_attachment_image_attributes - Catches images rendered via wp_get_attachment_image() (used by Divi and other page builders)
  3. the_content - Fallback filter to catch any remaining images in post content

It intelligently applies the fetchpriority="high" attribute only to:

  • Featured images on single posts and pages
  • The first post's featured image on archive pages, blog home, and search results

This targeted approach ensures that only the most important images get the high priority treatment, which is in line with best practices for using the fetchpriority attribute.

Code Example

function fpfi_add_fetchpriority_to_featured_image( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    // Only add fetchpriority to featured images on single posts/pages or the first post on archive pages
    if ( is_singular() || ( is_home() || is_archive() || is_search() ) && ! isset( $GLOBALS['fpfi_first_post_processed'] ) ) {
        // Mark that we've processed the first post on archive pages
        if ( ! is_singular() ) {
            $GLOBALS['fpfi_first_post_processed'] = true;
        }
        
        // Add fetchpriority="high" attribute if it doesn't already exist
        if ( strpos( $html, 'fetchpriority=' ) === false ) {
            $html = str_replace( '<img ', '<img fetchpriority="high" ', $html );
        }
    }
    
    return $html;
}

Contributing

Contributions are welcome! Feel free to:

  1. Fork the repository
  2. Create a feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Support

If you find this plugin useful, consider buying me a coffee to support the development.

Changelog

Version 1.2.0

  • Added support for Divi theme and other page builders
  • Implemented wp_get_attachment_image_attributes filter for broader compatibility
  • Added content filter fallback to catch custom image implementations
  • Improved image detection across different theme rendering methods
  • Enhanced compatibility with themes that bypass standard WordPress image functions

Version 1.1.0

  • Updated for WordPress 6.9 compatibility
  • Improved security with nonce verification for AJAX calls
  • Updated minimum PHP requirement to 7.4
  • Enhanced code quality and WordPress coding standards compliance
  • Added proper input sanitization and escaping
  • Aligns with WordPress 6.9's frontend performance improvements

Version 1.0.0

  • Initial release

License

This project is licensed under the GPL v2 or later - see the LICENSE file for details.

About

A lightweight WordPress plugin that automatically adds the fetchpriority="high" attribute to featured images to improve page loading performance and Core Web Vitals scores.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages