Don't include external JS for custom content example Goodreads

On many websites, you can have content embedded from other sites and one way that most external sites will offer will be to include a script that's hosted on their website.

But if all that script does is including some remote content there are better ways to get that, that will provide customizations and performance.

For example, the website Goodreads offers such an embed JS with a list of the latest books you read, and you must include the script where you want the content to be shown. But that has a long list of drawbacks: the script uses the old API document.write, is a script and can't be loaded in AMP, the scripts write very old style HTML with tags like center, attributes like border which again is not valid AMP, then also that script will be loaded for every request, so you'll have one additional request.

We have two methods to improve this process and the second one is even better than the first one. The first way is to use our server to fetch the script content then use a JS script to modify the content so that is valid and modern.

The second way is to use only the server to fetch and change the content and insert it from time to time.

First Method

In this example we use WordPress on the server side so we make a REST endpoint that only fetches the content:

//...

add_action('rest_api_init', 'change_rest_post' );
function change_rest_post(){
    register_rest_route( 'a309/v1', '/gr-widget', array(
    'methods' => 'GET',
    'callback' => 'a309_get_gr_widget',
    'permission_callback' => '__return_true',
  ) );
   
}

function a309_get_gr_widget(){
    echo file_get_contents("https://www.goodreads.com/review/custom_widget/52338687.Andrei's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=5&order=d&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=none&widget_id=1613506906&widget_text_color=000000&widget_title_size=medium&widget_width=medium");
}
//...

So practically is just an echo of the script contents.

Then is our JS we can have something like:

//...

add_action('rest_api_init', 'change_rest_post' );
function change_rest_post(){
    register_rest_route( 'a309/v1', '/gr-widget', array(
    'methods' => 'GET',
    'callback' => 'a309_get_gr_widget',
    'permission_callback' => '__return_true',
  ) );
   
}

function a309_get_gr_widget(){
    echo file_get_contents("https://www.goodreads.com/review/custom_widget/52338687.Andrei's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=5&order=d&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=none&widget_id=1613506906&widget_text_color=000000&widget_title_size=medium&widget_width=medium");
}
//...

And that's it with the note that probably better regexes can be written.

Second Method

In the second method will just write a function that will updated our content and will put it in the cron:

//...

add_action('rest_api_init', 'change_rest_post' );
function change_rest_post(){
    register_rest_route( 'a309/v1', '/gr-widget', array(
    'methods' => 'GET',
    'callback' => 'a309_get_gr_widget',
    'permission_callback' => '__return_true',
  ) );
   
}

function a309_get_gr_widget(){
    echo file_get_contents("https://www.goodreads.com/review/custom_widget/52338687.Andrei's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=5&order=d&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=none&widget_id=1613506906&widget_text_color=000000&widget_title_size=medium&widget_width=medium");
}
//...

In this example there's a hardcoded id 2, which is the id of your widget_custom_html, also again the regex could be simplified but this one under 1k steps so I think is pretty usable.

You can skip adding a new interval to WP Cron, in the above cause is just because I wanted a 3 days interval which is not included in the default intervals.

You should disable the WordPress cron and just add wp-cron to crontab, this is recommended for anything that uses WP cron because that way your cron will run more efficiently and not at the same time with a user request.