Fetching data from another website results in a slow website?

Question

I am fetching data from another website with the following code:

    <?php

  // IOCS logos
  $logos_url = 'https://www.someurl';

  $logos_request = wp_remote_get( $logos_url );
  if(is_wp_error($logos_request)) {
    return false;
  }

  $logos_body = wp_remote_retrieve_body( $logos_request );

  $logos_data = json_decode( $logos_body );

  // OSCS logos
  $oscs_logos_url = 'https://www.someurl';

  $oscs_logos_request = wp_remote_get( $oscs_logos_url );
  if(is_wp_error($oscs_logos_request)) {
    return false;
  }

  $oscs_logos_body = wp_remote_retrieve_body( $oscs_logos_request );

  $oscs_logos_data = json_decode( $oscs_logos_body );

 ?>

<?php if(!empty($logos_data)) : ?>
   <div class="tab-content">
      <div id="iocs-tab" class="tab-pane fade in active">
        <div class="home-carousel">
          <div class="container-fluid">
            <div class="col-sm-12 ioscs-slider">
                <div class="iocs">
                  <?php foreach ($logos_data as $value) : ?>
                    <div class="slide">
                      <img src="<?php echo esc_url( $value->Url ); ?>" alt="exxonMobil" class="img-responsive">
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
          </div>
      </div>
    </div>
    <?php endif; ?>

    <?php if(!empty($oscs_logos_data)) : ?>
      <div id="oscs-tab" class="home-carousel tab-pane fade">
        <div class="home-carousel">
          <div class="container-fluid">
            <div class="col-sm-12 oscs-slider">
                <div class="iocs">
                  <?php foreach ($oscs_logos_data as $oscs_value) : ?>
                    <div class="slide">
                      <img src="<?php echo esc_url( $oscs_value->Url ); ?>" alt="exxonMobil" class="img-responsive">
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
          </div>
      </div>
    </div>
  </div>
  <?php endif; ?>

However, since I have implemented this the website loads extremely slowly. What would be the best way to improve performance?

EDIT

<?php

$trans_id = 'portal_logos';
$external_logos = get_transient( $trans_id );

if ( false === $external_logos ) {
  ob_start();

  // IOCS logos
  $logos_url = 'my_url'; //Returns array with logos

  $logos_request = wp_remote_get( $logos_url );
  if(is_wp_error($logos_request)) {
    return false;
  }

  $logos_body = wp_remote_retrieve_body( $logos_request );

  $logos_data = json_decode( $logos_body);

  // OSCS logos
  $oscs_logos_url = 'my_url'; //Returns array with logos

  $oscs_logos_request = wp_remote_get( $oscs_logos_url );
  if(is_wp_error($oscs_logos_request)) {
    return false;
  }

  $oscs_logos_body = wp_remote_retrieve_body( $oscs_logos_request );

  $oscs_logos_data = json_decode( $oscs_logos_body);

 ?>
 <div class="logo-scroller">
  <div class="container">
      <ul class="nav nav-tabs">
         <li class="active"><a data-toggle="tab" href="#iocs-tab"><?php esc_html_e( 'IOCs operating in the Kurdistan Region', 'mnr' ); ?></a></li>
         <li><a data-toggle="tab" href="#oscs-tab"><?php esc_html_e( 'OSCs operating in the Kurdistan Region', 'mnr' ); ?></a></li>
       </ul>
  </div>

 <?php if(!empty($logos_data)) : ?>
   <div class="tab-content">
      <div id="iocs-tab" class="tab-pane fade in active">
        <div class="home-carousel">
          <div class="container-fluid">
            <div class="col-sm-12 ioscs-slider">
                <div class="iocs">
                  <?php foreach ($logos_data as $value) : ?>
                    <div class="slide">
                      <img src="<?php echo esc_url( $value->Url ); ?>" alt="exxonMobil" class="img-responsive">
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
          </div>
      </div>
    </div>
    <?php endif; ?>

    <?php if(!empty($oscs_logos_data)) : ?>
      <div id="oscs-tab" class="home-carousel tab-pane fade">
        <div class="home-carousel">
          <div class="container-fluid">
            <div class="col-sm-12 oscs-slider">
                <div class="iocs">
                  <?php foreach ($oscs_logos_data as $oscs_value) : ?>
                    <div class="slide">
                      <img src="<?php echo esc_url( $oscs_value->Url ); ?>" alt="exxonMobil" class="img-responsive">
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
          </div>
      </div>
    </div>
  </div>
  <?php endif; ?>
  </div>

  <?php
    $external_logos = ob_get_clean();
    set_transient( $trans_id, $external_logos, DAY_IN_SECONDS );
  }

  echo $external_logos;

  ?>

Answer 1

Basically you got yourself a piece of code that blocks your PHP execution because it relies on external request wp_remote_get() to finish in order to continue. And the worst part is you do it on every request, unconditionally :) Easiest solution for you right now probably is to store all HTML that is generated based on that request into a transient. Check this out:

<?php

$trans_id = 'my_external_logos__name_me_good';
$external_logos = get_transient( $trans_id );

if ( false === $external_logos ) {
  ob_start();

  ... what you did before ...

  $external_logos = ob_get_clean();
  set_transient( $trans_id, $external_logos, WEEK_IN_SECONDS );
}

echo $external_logos;

You could tweak WEEK_IN_SECONDS to any period in seconds (eg. DAY_IN_SECONDS constant). Now your code will execute only once a week and WP will serve the generated HTML from its database.