Do not merge after CR + ACC.

Context

• We want to improve the way we handle images in posts so that reading the content is faster.
• We also want to give users the ability to manipulate how we do this by supplying multiple filters to choose which system they want to apply.
• Also take note of Adds documentation for attachment handling in YoasT SEO developer#245 where the solution is explained in our docs.

Summary

This PR can be summarized in the following changelog entry:

• Improves the performance of post saving.

Relevant technical choices:

• When on WP 6.2 or newer, the WP_HTML_Tag_Processor class is being used to retrieve and store image IDs in our SEO_Links table
  • When that's not possible, we use the DOMDocument class for that.
  • When that's not available either (or when there's no image IDs in the post content (which can be the case when eg. manual HTML is being used), then we fallback to the (less performant) old way of using the get_attachment_by_url() method.
  • We also added a filter wpseo_force_creating_and_using_attachment_indexables

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

The setup.

• To see actual results from these changes you need alot of media items in your installation. To do this do the following
• Add an small image for example downloaded from https://via.placeholder.com/150 to your local project/docker. So not the root of the plugin maar the root of the WP installation. The same spot as the wp-active.php and wp-config.php
• Run the following command in the WP cli: Note that the 150.png is the filename of the image so make sure that is the same for you.

for i in {1..10000}; do
    # Execute your WP-CLI command inside the loop
    wp media import 150.png
done

• To speed this up you can run this in 10 CLI's at the same time just keep an eye on the id that is returned after the command is done to see how far you are.
• Make sure media pages are turned off they can be found on: /wp-admin/admin.php?page=wpseo_page_settings#/media-pages
• Make sure no image indexables are made by running the following query:
  SELECT * FROM wp_yoast_indexables where object_sub_type='attachment';
• If there are run the cleanup routine and check again.
• The setup is now completed.

Do the following on WordPress 6.2+ this is needed for the WP_HTML_Tag_Processor

In the block editor:

• Add 80-100 image blocks with an image to a new post.
• Save the post and make sure it is not slower than without the PR.
• Check the front-end and make sure the schema/metadata output is the same with the PR.
• Make sure no image indexables are made by running the following query:
  SELECT * FROM wp_yoast_indexables where object_sub_type='attachment';

In the classic editor:

• Add 80-100 images via add media with an image to a new post.
• Save the post and make sure it is not slower than without the PR.
• Check the front-end and make sure the schema/metadata output is the same with and without the PR.
• Make sure no image indexables are made by running the following query:
  SELECT * FROM wp_yoast_indexables where object_sub_type='attachment';

In Elementor:

• Add 80-100 image blocks with an image to a new post.
• Save the post and make sure it is not slower than without the PR.
• Check the front-end and make sure the schema/metadata output is the same with and without the PR.
• Make sure no image indexables are made by running the following query:
  SELECT * FROM wp_yoast_indexables where object_sub_type='attachment';

Remember these posts and downgrade to WordPress 6.1 or lower.

• Rerun all the tests and make sure the output is still valid and no indexables are created. Also make sure the performance is not impacted too much.

Upgrade back to 6.2 and add the following filters:

\add_filter( ‘wpseo_indexable_forced_included_post_types’, function( $post_types ) {
    $post_types[] = ‘attachment’;
    return $post_types;
} );
\add_action( ‘init’, function( $post_types ) {
    \add_filter( ‘wpseo_indexable_excluded_post_types’, function( $post_types ) {
       $filtered_post_types = [];
       foreach ( $post_types as $post_type ) {
          if ( $post_type !== ‘attachment’ ) {
             $filtered_post_types[] = $post_type;
          }
       }
       return $filtered_post_types;
    } );
} );
\add_filter(‘wpseo_force_creating_and_using_attachment_indexables’, ‘__return_true’  );

• Run the SEOO this could take a while since it is now creating indexables for all your media items.
• Rerun all the tests and make sure the output is still valid and no new indexables are created. Also make sure the performance is not impacted too much.

To make sure this improves the performance over the other two in certain situations do the following:

• Enable the classic editor and add a gallery with lots (50+) images to a new post and save without this pr. Take note of the saving time.

• Enable the PR and make sure you indexables are fully indexed.

• Save again and make sure the performance is better.

• Add a new image via the image library /wp-admin/media-new.php and make sure an indexable is created for this image.

Force ignore all changes filter

• Remove the filters from above from your functions.php and clear your indexables.
• Rerun the SEOO and make sure there are no attachment indexables.
• While in trunk save one of the posts and take note of the time it takes to save.
• Checkout this PR and add the following filter
• \add_filter(‘wpseo_force_skip_image_content_parsing’, ‘__return_true’ );
• Make sure there is not a noticable change in save time when saving the post again.

Test filters to allow different gallery plugins

• Remove the filters from above from your functions.php
• Install the Envira Gallery plugin and add a gallery with lots of images. in the plugin. /wp-admin/post-new.php?post_type=envira
• Add the gallery to a post with the shortcode given by the plugin. Save the post and take not of the time it needs to save.
• Add the following filters:

add_filter( 'wpseo_image_attribute_containing_id', 'image_attribute_containing_id', 10 );
function image_attribute_containing_id() {
    return 'id';
}

add_filter( 'wpseo_extract_id_pattern', 'extract_id_pattern', 10 );
function extract_id_pattern() {
    return '/(?<!\S)envira-gallery-image-(\d+)(?!\S)/i';
}

• Take note of the faster save.
• Also make sure no attachment indexables were added.

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Block/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes #16713