Function in wordpress loop slow down the page

Question

In my wordpress page i have posts which get content from other websites. To my page i'm adding only url of the page and the page shows meta from this url.

example of function:

    function getOGimage() {
$url = get_field('link');
$page_content = file_get_contents($url);

$dom_obj = new DOMDocument();
@$dom_obj->loadHTML($page_content);
$meta_val = null;

foreach($dom_obj->getElementsByTagName('meta') as $meta) {

if($meta->getAttribute('property')=='og:image'){ 

    $meta_val = $meta->getAttribute('content');
}
}
echo '<img src="'.$meta_val.'" style="width:180px; height:auto;" />';}

My loop:

<?php if ($popularindex->have_posts()) : ?>
 <?php while ($popularindex->have_posts()) : $popularindex->the_post(); ?>
  <li class="box" id="post-<?php the_ID(); ?>">
   <div class="thumb-box">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
     <?php if ( has_post_thumbnail() ) {
      the_post_thumbnail();
      } else $OG_image =  getOGimage();
     ?>
    </a>
   </div>
  </li>
 <?php endwhile; ?>
 <?php else : ?> 
<?php endif; ?>

It works but it slow down the page. Anyone have solution for this?

I thought about saving this meta to database but i don't know how to automatically do this from main url

Thank you in advance

Answer 1

Ideally you do not use file_get_contents() every time you need to render the posts. Apart fro being slow this means that if 200 users visit the page you will be downloading the images 200 times.

Wordpress has an action which you can hook to it every time a post is created or updated in the backend: save_post (You can find more details here: https://codex.wordpress.org/Plugin_API/Action_Reference/save_post). You should hook with these actions and every time a post is created/updated you fetch the image and save it to your database as a post_meta. You would need to add something similar to the below:

function post_updated_set_og_image( $post_id ) {

    $url = get_field('link', $post_id);
    $page_content = file_get_contents($url);

    $dom_obj = new DOMDocument();
    @$dom_obj->loadHTML($page_content);
    $meta_val = null;

    foreach($dom_obj->getElementsByTagName('meta') as $meta) {

      if($meta->getAttribute('property')=='og:image'){ 

      $meta_val = $meta->getAttribute('content');
    }
    update_field('og_image_src', $meta_val, $post_id);

}
add_action( 'save_post', 'post_updated_set_og_image' );

Then when your loop should be something as follows:

<?php if ($popularindex->have_posts()) : ?>
    <?php while ($popularindex->have_posts()) : $popularindex->the_post(); ?>
        <li class="box" id="post-<?php the_ID(); ?>">
            <div class="thumb-box">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                } else{
                  $og_image = get_field('og_image_src');
                  echo '<img src="'.$og_image.'" style="width:180px; height:auto;" />';
                }
                ?>
                </a>
            </div>
        </li>
    <?php endwhile; ?>
<?php else : ?> 
<?php endif; ?>

I am using get_field and update_field since you used get_field in your question. I think you are using ACF plugin to manage metadata. get_post_meta and update_post_meta can be used instead if you are not going to use ACF plugin.