Tips Archives - Freddie Lore https://labs.freddielore.com/category/tips/ WordPress Plugin Developer Fri, 20 May 2022 08:14:29 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.5 https://labs.freddielore.com/wp-content/uploads/2017/06/cropped-favicon-32x32.png Tips Archives - Freddie Lore https://labs.freddielore.com/category/tips/ 32 32 How to Bulk Edit Canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and TSF https://labs.freddielore.com/how-to-bulk-edit-canonical-urls-in-yoast-aioseo-rankmath-seopress-and-tsf/ Thu, 19 May 2022 13:27:16 +0000 https://labs.freddielore.com/?p=2353 If you’ve been doing on-page SEO for years, you know exactly how crucial canonical URL is. It’s a link tag with rel=“canonical” attribute you can add on posts or pages. The more contents you publish, the more likely you generate similar contents. And when you have similar contents, you’re running the risk of being penalized Continue Reading …

The post How to Bulk Edit Canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and TSF appeared first on Freddie Lore.

]]>
If you’ve been doing on-page SEO for years, you know exactly how crucial canonical URL is. It’s a link tag with rel=“canonical” attribute you can add on posts or pages. The more contents you publish, the more likely you generate similar contents. And when you have similar contents, you’re running the risk of being penalized by Google for duplicates. Adding the correct canonical URLs helps search engines identify original content and eventually index your pages better.

Top WordPress plugins like Yoast, All-in-One SEO, RankMath, SEOPress, and The SEO Framework provide a simplified way to inject custom canonical URLs for each post and page. It’s as simple as editing each page and adding your custom canonical URL on its custom field box.

Canonica URL field box in Yoast

However, there’s an elegant way to edit your canonical URLs so you can mass update them in bulk. No need to manually updating each post or page one by one. By simply exporting everything to CSV, you can edit them using your preferred spreadsheet editor and import them back to WordPress.

Mass Update Canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and The SEO Framework

Smart SEO CSV Import/Export provides a tool that helps you export your site’s SEO data into CSV so you can edit and import them in one go. Managing your site’s SEO titles, descriptions, and canonical is as easy as exporting and editing them in Google Sheet.

Here’s how you can bulk edit canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and TSF

  1. Install and activate Smart SEO CSV Import/Export

  2. Once installed, go to Settings > SEO Import/Export

  3. Navigate to Export tab

    This is where the action begins. Start by selecting the post type or taxonomy to export.

  4. Edit the exported CSV

    As soon as the export finishes, download and edit your CSV using your preferred spreadsheet editor (we highly recommend Google Sheet). This CSV contains canonical_url column you can update. Once done, re-download the CSV (containing the updated canonical URLs)

  5. Import the CSV

    Navigate to Import tab upload the CSV file. And in the drag-and-drop editor, make sure canonical URL box is mapped correctly. Once done, press Start Import button

Your done! Your canonical URLs should then be updated in seconds.

SEE ALSO: Exporting Focus Keyphrases with All In One SEO and Yoast

The post How to Bulk Edit Canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and TSF appeared first on Freddie Lore.

]]>
Exporting Focus Keyphrases with All In One SEO and Yoast https://labs.freddielore.com/exporting-focus-keyphrases-with-all-in-one-seo-and-yoast/ Fri, 15 Apr 2022 05:19:28 +0000 https://labs.freddielore.com/?p=2313 Focus keyphrases are keywords you want your posts or pages to get ranked on Google. It’s a built-in feature of Yoast and All In One SEO. Normally you’ll have to supply your content’s focus keyphrase in the dedicated field when writing a post. Once added, Yoast or All In One SEO scans your content and Continue Reading …

The post Exporting Focus Keyphrases with All In One SEO and Yoast appeared first on Freddie Lore.

]]>
Focus keyphrases are keywords you want your posts or pages to get ranked on Google. It’s a built-in feature of Yoast and All In One SEO.

Normally you’ll have to supply your content’s focus keyphrase in the dedicated field when writing a post. Once added, Yoast or All In One SEO scans your content and returns feedback in real-time. Areas like content, title, and headings are evaluated, giving you an idea if your post or page is well-optimized.

Smart SEO CSV Import/Export provides a tool that helps you export your existing focus keyphrases so you can quickly import and move them to a new site. This is especially useful if you’re rebuilding your site from scratch and you want to retain your website’s existing focus keyphrases.

How To Export Focus Keyphrases to CSV with All In One SEO and Yoast

To export focus keyphrases on Yoast and All In One SEO, follow below’s steps:

  1. Install and activate Smart SEO CSV Import/Export

    You’ll have to install and activate Smart SEO CSV Import/Export on your existing site where you want to grab all existing focus keyphrases

  2. Once installed, navigate to Settings > SEO Import/Export

    This brings you to the plugin’s default Import tab. From here, click the Export tab

  3. Choose post type to export

    You have the option to select all or choose specific post type.

  4. Click Export to CSV

    This action generates a CSV file you can download and import to your new site (see Step 5). The exported CSV file contains SEO meta data that includes titles, descriptions, and focus keyphrases.

  5. Import Focus Keyphrases

    Assuming you’ve already moved your posts/pages on your new site, you’re now ready to import your missing focus keyphrases. Go to your new site and do Steps 1 and 2. In Import tab, upload your CSV and map the fields accordingly

Wrapping it up

While both All In One SEO and Yoast still lack the flexibility to move focus keyphrases between websites, you can use Smart SEO CSV Import/Export to accomplish that. Not only can you export focus keyphrases, titles, and descriptions, you can also move other custom fields and even featured images.

SEE ALSO: How to Bulk Edit Canonical URLs in Yoast, AIOSEO, RankMath, SEOPress, and TSF

The post Exporting Focus Keyphrases with All In One SEO and Yoast appeared first on Freddie Lore.

]]>
How to Export Yoast WooCommerce GTIN Data to CSV for Bulk Import https://labs.freddielore.com/how-to-export-yoast-woocommerce-gtin-data-to-csv-for-bulk-import/ Sun, 13 Mar 2022 02:57:42 +0000 https://labs.freddielore.com/?p=2281 If you sell physical products online, it’s not enough to just get found on Google. You’ll have to ensure your products stand out on Google Search results. And that’s where Yoast WooCommerce SEO comes in handy. It’s an add-on to Yoast SEO that does all the heavy lifting for you. It provides fields for GTIN/ISBN/MPN Continue Reading …

The post How to Export Yoast WooCommerce GTIN Data to CSV for Bulk Import appeared first on Freddie Lore.

]]>
If you sell physical products online, it’s not enough to just get found on Google. You’ll have to ensure your products stand out on Google Search results.

And that’s where Yoast WooCommerce SEO comes in handy. It’s an add-on to Yoast SEO that does all the heavy lifting for you. It provides fields for GTIN/ISBN/MPN info and automatically merges them to your product schema to get that attractive rich snippet results.

Managing GTIN information to WooCommerce products

Yoast WooCommerce SEO makes it easy to add, manage GTIN/ISBN/MPN info to your products. The plugin nicely integrates with WooCommerce’ product editor page so you can manage those info with ease.

Export WooCommerce GTIN Data to CSV

However, if you’re dealing with hundreds of products it would be a good idea to just export those GTIN info to CSV so you can easily alter and import them in one go (or push them to a third-party app)

Exporting WooCommerce GTIN/ISBN/MPN to CSV for Bulk Editing

WooCommerce export tool unfortunately won’t let you export these data by default. So we’ll have to rely on plugins to achieve that. In this post, we’ll be using Smart SEO Data CSV Import/Export.

  1. Install and activate Smart SEO Data CSV Import/Export.

    It’s an add-on that lets you export the SEO side of your site. By default, it exports your SEO title, description, and keywords so you can bulk edit them and import them back in seconds.

    The plugin comes with a few filters and hooks we can use, specifically the smart_seo_export_fields and smart_seo_import_update

  2. Once activated, ask your developer to add below’s code to your active theme’s functions.php:


    Or you can download this ready to install plugin if you don’t have a developer to manually add those codes for you.

You’re done. Now, navigate back to Settings > SEO Import/Export > Export to export product’s SEO meta data together with GTIN/ISBN/MPN info.

SEE ALSO: Bulk Update WP Featured Images By URL via CSV Export and Import

The post How to Export Yoast WooCommerce GTIN Data to CSV for Bulk Import appeared first on Freddie Lore.

]]>
Exporting WordPress Posts Categories and Tags to Spreadsheet https://labs.freddielore.com/exporting-wordpress-posts-categories-and-tags-to-spreadsheet/ Wed, 08 Jul 2020 02:34:27 +0000 https://labs.freddielore.com/?p=1726 At its core, Smart SEO CSV Import/Export lets you manage the SEO side of your WordPress posts, pages, and taxonomies. It lets you export the following info by default: post_id post_date post_type post_title post_slug seo_meta_title seo_meta_description seo_meta_keyword seo_focus_keyword permalink The exported spreadsheet containing the above information gives you a simplified look at your posts, making Continue Reading …

The post Exporting WordPress Posts Categories and Tags to Spreadsheet appeared first on Freddie Lore.

]]>
At its core, Smart SEO CSV Import/Export lets you manage the SEO side of your WordPress posts, pages, and taxonomies. It lets you export the following info by default:

  • post_id
  • post_date
  • post_type
  • post_title
  • post_slug
  • seo_meta_title
  • seo_meta_description
  • seo_meta_keyword
  • seo_focus_keyword
  • permalink

The exported spreadsheet containing the above information gives you a simplified look at your posts, making it easy to identify SEO optimisation opportunities.

Now if for some reason you want to export the associated categories and tags for each post, Smart SEO CSV Import/Export lets you do that as well. By simply adding a small lines of code, you can have your CSV containing tags and categories.

What you need

  • Smart SEO CSV Import/Export
  • FTP access

Be sure you have Smart SEO CSV Import/Export installed & activated and add the code below to your themes’ functions.php file:

Once done, go to Settings > SEO Import/Export and under Export tab, select Post and hit Export to CSV button.

The exported CSV file should now contain tags and categories columns (view demo file)

SEE ALSO: How To Export Custom Fields to CSV in WordPress for Bulk Editing

The post Exporting WordPress Posts Categories and Tags to Spreadsheet appeared first on Freddie Lore.

]]>
Bulk Update WP Featured Images By URL via CSV Export and Import https://labs.freddielore.com/bulk-update-wp-featured-images-by-url-via-csv-export-and-import/ Sat, 16 May 2020 09:29:54 +0000 https://labs.freddielore.com/?p=1674 When moving posts and pages from one WP site to another, we normally turn to WordPress Importer to do just that. However, as you might have already figured out, WordPress Importer does not preserve featured images during import. So your content import ended up incomplete, with missing crucial piece of of info: featured images. Adding Continue Reading …

The post Bulk Update WP Featured Images By URL via CSV Export and Import appeared first on Freddie Lore.

]]>
When moving posts and pages from one WP site to another, we normally turn to WordPress Importer to do just that. However, as you might have already figured out, WordPress Importer does not preserve featured images during import. So your content import ended up incomplete, with missing crucial piece of of info: featured images.

Adding those missing featured images won’t be a big deal if you’re dealing with a few posts. But what if you are moving say hundreds of existing blog posts? That would be a sure nightmare job you don’t want to do one by one.

Moving your featured images from old site to new site by CSV export/import

Moving your existing featured images from old site to your new WP site doesn’t really have to be that tedious. You can use Smart SEO CSV Export/Import to export your featured images’ URLs into CSV and import them to your newly-rebuilt site. No need to manually download featured images and attach them to each post. Here’s how:

Exporting and importing featured images by URL using CSV import

  1. Install Smart SEO CSV Export/Import and Featured Image Import/Export

    In your old, existing site, install Smart SEO CSV Export/Import and activate. Once done, install Featured Image Import/Export & activate.

  2. Export featured image URLs

    Navigate to Dashboard > Settings > SEO Import/Export and look for Export tab.

  3. Once done, download the exported CSV file.

    You may name it old_site.csv. This CSV file should contain a featured_image column containing your posts’ featured images URL.

  4. Login to your new site and redo step 1 above.

  5. In your new site, navigate to Dashboard > Settings > SEO Import/Export and look for Import tab.

    Upload the exported CSV file above, containing featured_image column with URLs

  6. In the drag-and-drop editor, just supply Post or Page ID and Post Type. (We won’t be updating SEO meta data at this point)

  7. Under Import Settings, set Import by to Slug. This ensures we’re mapping post slugs as unique identifier.

    Optionally, set Import size to 5 to avoid server timeouts. And hit Start Import button.

The plugin will attempt to programatically download those images from your old site and import them as featured images. This can take a few while depending on the size of those images & total number of posts.

Conclusion

Smart SEO CSV Export/Import is the first SEO meta data bulk editing tool that supports major WP SEO plugins including Yoast, All-In-One SEO, Rank Math, SEOPress, and The SEO Framework. The add-on comes with powerful hooks & filters you can exploit to bulk update virtually anything such as custom fields created by Advanced Custom Field (ACF).

The post Bulk Update WP Featured Images By URL via CSV Export and Import appeared first on Freddie Lore.

]]>
WP Landing Kit Lets You Create WordPress Pages Mappable to Custom Domains https://labs.freddielore.com/wp-landing-kit-lets-you-create-wordpress-pages-mappable-to-custom-domains/ Mon, 24 Feb 2020 00:18:23 +0000 https://labs.freddielore.com/?p=1594 I found this interesting work from Phil Kurth & Jason Schuller and thought of sharing it with you. These guys have been brewing this plugin in the last few months, teasing its unique functionality of mapping custom domains to your WordPress pages which got my attention. And thankfully, the plugin, which they named WP Landing Kit, is Continue Reading …

The post WP Landing Kit Lets You Create WordPress Pages Mappable to Custom Domains appeared first on Freddie Lore.

]]>

I found this interesting work from Phil Kurth & Jason Schuller and thought of sharing it with you.

These guys have been brewing this plugin in the last few months, teasing its unique functionality of mapping custom domains to your WordPress pages which got my attention. And thankfully, the plugin, which they named WP Landing Kit, is finally now on its initial rollout.

Being a WordPress developer myself, I sometimes get confronted with situations where our client wants a separate sales pages for her eBooks and make them accessible in another domain. Yep, she has an existing WordPress site and wanted to clone the overall look-and-feel of her site for her eBooks but, for a separate domain. Which means another cost for the web hosting + setup fees just for her sales pages.

Now, WP Landing Kit wants to change that. Rather than doing a separate install, you can just create your landing page on your main WP site and just assign a domain name for that particular page. And WP Landing Kit will cleverly serve that page as content to that add-on domain. 

Here’s a short explainer video how it works

SEE ALSO: Exporting Yoast SEO’s Facebook Open Graph Tags into CSV for Bulk Editing

As mentioned in that video, WP Landing Kits requires a hosting environment where you can add additional domains aka add-on domains. Also, you’ll need to update your DNS and add A Record for the new domain.

Final Verdict

While not everyone will likely need it, WP Landing Kit is an extremely powerful tool especially for those who sell digital products like eBooks, apps, tickets, etc. There’s no need for a separate WordPress installation. Just create your marketing pages and assign a unique domain to it.

The post WP Landing Kit Lets You Create WordPress Pages Mappable to Custom Domains appeared first on Freddie Lore.

]]>
Exporting Yoast SEO’s Facebook Open Graph Tags into CSV for Bulk Editing https://labs.freddielore.com/exporting-yoast-seos-facebook-open-graph-tags-into-csv-for-bulk-editing/ Mon, 20 Jan 2020 12:52:24 +0000 https://labs.freddielore.com/?p=1525 As you might already know, Yoast SEO comes with the option to set custom Open Graph Facebook meta title and description on each post or page. It’s a nifty feature already built-in for both free and premium versions of Yoast. If you’re considering amplifying your social media reach and referrals, setting custom Open Graph titles Continue Reading …

The post Exporting Yoast SEO’s Facebook Open Graph Tags into CSV for Bulk Editing appeared first on Freddie Lore.

]]>
As you might already know, Yoast SEO comes with the option to set custom Open Graph Facebook meta title and description on each post or page. It’s a nifty feature already built-in for both free and premium versions of Yoast.

Export Yoast SEO Facebook Open Graph
Export Yoast SEO Facebook Open Graph to CSV

If you’re considering amplifying your social media reach and referrals, setting custom Open Graph titles and descriptions for Facebook just makes a lot of sense. Facebook has a different word count requirements for both title and descriptions. So you need to ensure your posts look good when shared on Facebook to get the much-needed clicks.

While you can define your own Facebook meta title and description under Share tab on a post editor, you can always skip this and just export your Facebook Open Graph data into CSV so you can edit them in one go by CSV import.

To export Yoast SEO Facebook Open Graph Meta Title and Descriptions

  1. Make sure you have Smart SEO CSV Import/Export installed and activated. 

  2. Add these lines of codes inside your theme’s functions.php file.

    This instructs the plugin to export Facebook custom meta titles and descriptions too.

  3. Navigate to Settings > SEO Import/Export.

    Under the Export tab, you can initiate a CSV export for all or selected post types.

  4. Download and edit the CSV

Once you’re done with editing, you can navigate back to the Import tab to bulk update your Facebook’s Open Graph metadata.

SEE ALSO: How to Export Yoast WooCommerce GTIN Data to CSV for Bulk Import

The post Exporting Yoast SEO’s Facebook Open Graph Tags into CSV for Bulk Editing appeared first on Freddie Lore.

]]>
Enhancing Yoast SEO’s FAQ Block with Collapsible Headers or Accordions https://labs.freddielore.com/yoast-faq-block-collapsible-headers-accordions/ Wed, 18 Dec 2019 22:57:21 +0000 https://labs.freddielore.com/?p=1474 If you’ve been using Yoast SEO in your site in a while, you probably have noticed that nifty Yoast Structured Data Block called FAQ buried inside WordPress Gutenberg editor.  It’s a feature first introduced by Yoast back in September last year which makes it easy to exploit FAQPage schema and improve your Google Search visibility in the Continue Reading …

The post Enhancing Yoast SEO’s FAQ Block with Collapsible Headers or Accordions appeared first on Freddie Lore.

]]>
If you’ve been using Yoast SEO in your site in a while, you probably have noticed that nifty Yoast Structured Data Block called FAQ buried inside WordPress Gutenberg editor. 

It’s a feature first introduced by Yoast back in September last year which makes it easy to exploit FAQPage schema and improve your Google Search visibility in the process.

A well-structured FAQPage tells search engines that your content has a set of questions and corresponding answers. This helps search engines understand your content better and if properly marked up, your page may be qualified to have a rich result on Google Search or Action on Google Assistant.

See Also: How To: Bulk Update Yoast SEO Meta Data or All-In-One SEO Pack Using CSV

Yoast’s FAQ block already works out-of-the-box, no action required from your end. It automatically generates the needed JSON-LD markup for Google’s consumption. 

Here’s how Yoast’s FAQ block looks like in the frontend:

Nothing fancy right? 

Add Collapsible Headers or Accordion to Yoast FAQ Schema

Now, if you want to go fancy and enhance it with collapsible headers (or accordion), where answers are hidden which can only be revealed by clicking on the question, here’s a tiny line of Javascript and CSS to achieve that:

Once the above CSS and Javascript are added, refresh your FAQ page.

Your Yoast FAQ page should now be upgraded to something like this:

See Also: How To: Load Third-Party Scripts Without Hurting Your Site Speed

The post Enhancing Yoast SEO’s FAQ Block with Collapsible Headers or Accordions appeared first on Freddie Lore.

]]>
Copying Your Old SEO Meta Title and Descriptions from Old Site to New Site via CSV Import https://labs.freddielore.com/copying-your-old-seo-meta-title-and-descriptions-from-old-site-to-new-site-via-csv-import/ Mon, 07 Oct 2019 14:27:45 +0000 https://labs.freddielore.com/?p=1391 UPDATE: Starting v7.3.0, you can configure this add-on to import by slugs instead of IDs. You can skip the process detailed below. Learn more about this update. This document describes the process of importing your old SEO meta titles and descriptions from your old site to your newly-rebuilt site. Working on large, older sites, it’s Continue Reading …

The post Copying Your Old SEO Meta Title and Descriptions from Old Site to New Site via CSV Import appeared first on Freddie Lore.

]]>

UPDATE: Starting v7.3.0, you can configure this add-on to import by slugs instead of IDs. You can skip the process detailed below. Learn more about this update.


This document describes the process of importing your old SEO meta titles and descriptions from your old site to your newly-rebuilt site.

Working on large, older sites, it’s not uncommon to realise that the website you’re working on could increasingly becoming a total mess content-wise. With so many promotional landing pages being created overtime, your website could potentially hosts competing pages with identical contents which might confuse Google.

Now, if rebuilding the website from scratch is the most sensible thing to do and you want to re-use your old SEO meta titles and descriptions from key, high-ranking pages, then, fret not as Smart SEO CSV Import/Export lets you do that really easily. Here’s how:

What you need:

Importing old SEO meta data from old site to new site thru CSV import

  1. Login to your OLD site as admin and export your SEO meta data using Smart SEO CSV Import/Export. Open the exported CSV file with Google Sheet (you may name the sheet as oldsite.csv)
  2. Login to your NEW site and redo the step 1 above. Open the exported CSV file with Google Sheet (you may name the sheet as newsite.csv).

At this point, you might be tempted to import the CSV you downloaded from OLD site to your NEW site. Unfortunately, you can’t do that right away because the page IDs on your new site will be different from old site as a result of site rebuild. Example: your /blog/ page on OLD site may have 919 as ID whereas in NEW site it has 5 as ID.

  1. Since we’re going to reuse SEO meta titles and descriptions from OLD site, all we need to do is just edit the oldsite.csv and give post_id column the correct set of IDs.Of course, we don’t want to do it one by one manually. The easiest method for me is to create a new_id column inside oldsite.csv sheet, as seen below:
  2. We will then populate new_id column using VLOOKUP and search through newsite.csv and look for the correct, new IDs using post_slug as search key.Why post_slug as search key? That’s because both oldsite.csv and newsite.csv share the same post_slug column values. So, that makes it easier for us to do database search rather than manually checking it ourselves.But before we proceed with VLOOKUP, let’s alter newsite.csv a bit and just move post_slug column at the first column, as seen below:

  3. Navigate back to oldsite.csv and in B2, being the first Cell you need to update, write the following VLOOKUP statement:=VLOOKUP(F2,IMPORTRANGE("GOOGLE_SHEET_FULL_URL", "newsite!A2:E99"),2, false)Notice we’re importing newsite.csv with cell range as our datasource.

    It should magically grab the correct page ID from newsite.csv. You can just copy B2 cell all the way down to the bottom to do the same VLOOKUP to other pages. Once done, you may notice VLOOKUP returns #N/A errors.

    What that means is that those pages are no longer being published in newly rebuild site. So, in your oldsite.csv, you can just remove those #N/A rows.

  4. Inside your oldsite.csv, remove post_id column. And then rename new_id column to post_id. And now you’re ready to import oldsite.csv to your NEW site using Smart SEO CSV Import/Export.

Check out our demo Google Sheet file to see things in action. If you need help copying your old SEO meta data to your newly-rebuilt site, don’t hesitate to get in touch.

SEE ALSO: How To: Bulk Edit Custom Fields via CSV in WordPress

The post Copying Your Old SEO Meta Title and Descriptions from Old Site to New Site via CSV Import appeared first on Freddie Lore.

]]>
How To: Load Third-Party Scripts Without Hurting Your Site Speed https://labs.freddielore.com/how-to-load-third-party-scripts-without-hurting-your-site-speed/ Fri, 28 Jun 2019 03:43:09 +0000 https://labs.freddielore.com/?p=1206 In our quest to make our site loads as fast as possible and pleasing search engines in the process, we always take the time to carry out a comprehensive on-page optimisation and surgically identify web page issues that may be dragging the speed of your site. Working on a variety of customer sites, I constantly Continue Reading …

The post How To: Load Third-Party Scripts Without Hurting Your Site Speed appeared first on Freddie Lore.

]]>
In our quest to make our site loads as fast as possible and pleasing search engines in the process, we always take the time to carry out a comprehensive on-page optimisation and surgically identify web page issues that may be dragging the speed of your site.

Working on a variety of customer sites, I constantly get confronted with slow-loading sites that take ages to fully load. The easy culprits are non-optimised media files and a handful of static resources such as Javascript and CSS generated by both plugins and theme, inflating the total number of HTTP requests.

One crucial action a webmaster can do is to keep the total number of HTTP requests low, by:

  • Combining or concatenating static resources like CSS and Javascript
  • Minifying and inlining small scripts
  • Lazy-loading images and iframes
  • Optimising the delivery of third-party scripts and resources like live chats, Google Analytics, Google Tag Manager, Facebook Pixel, Remarketing Tags, web font files, etc.

The first three actions above can easily be done with robust caching plugins like WP Rocket. However, things can be a bit tricky when it comes to manipulating third-party scripts such as Google Analytics and Facebook Pixels.

Why third-party scripts are such a bummer

The trouble with third-party scripts like live chat add-ons or Google Analytics is that they’re all hosted elsewhere and there’s no way you can manipulate its headers and how they should render in a web browser. While these scripts normally are loaded asynchronously, these scripts pull additional external resources which can potentially impair user experience.

Site Speed Optimisation: Loading Third Party Scripts When Needed

We had this simple strategy that loads third-party Javascript when needed, which you might want to take inspiration from and implement on your own. This trick takes advantage of user interactions “scroll” and “mousemove” as triggers, telling the browser to only load those scripts if there’s a scroll or mousemove event.

Here’s an example implementation to demonstrate the idea:

The above script instructs the browser to load Health Engine script during scroll or mousemove, which gives us this nice, acceptable page speed performance:

Before optimisation, our customer has this standard embed:

 <script type="text/javascript" src="//healthengine.com.au/webplugin/appointments.js" data-he-id="foo" data-he-button="true" data-he-img="HE_BOOKNOW_1.png" defer="true"></script>

Looks tiny, right?

Well, as it turns out, that miniscule-looking Health Engine resource pulls additional 28 resources for each page load, as seen below:

That additional 16 Javascript, 6 CSS and font files, and 6 images can easily delay the page load time and overall user experience.

Using scroll and mousemove to load third-party scripts

The scroll event works reliably on desktop while mousemove is used as fallback for mobile and tablets, giving us the confidence that third-party scripts will work just fine to humans who interact the site. Be sure you do plenty of tests before finally rolling this method out to production sites.

Need help improving your site’s speed? Just get in touch.

The post How To: Load Third-Party Scripts Without Hurting Your Site Speed appeared first on Freddie Lore.

]]>