Connect with us
defer script loading defer script loading

Featured

Speed up WordPress – Defer JavaScript Parsing

Published

on

Deferring JavaScript parsing is an excellent way of speeding up your WordPress website, but it is also the one area that causes the most problems. Why do we need to do this?

As a rule, JavaScript tends to be loaded in every page of your website. When a page is called, the code on it is read by the web browser. When a script is called, it must run to obtain all the data before it can load the resources onto the page.

It is down to you, as the owner of the website, to make sure that all the important content is loaded onto your web page first, followed by the less-important stuff like widgets, comments, images and social media buttons.

The idea is to serve the important content to the reader and that is your content – only your content. However, when the code has JavaScript in it, it will be called in the order that it appears in the code and this can slow down the loading of the important stuff.

This is why JavaScript must be deferred and many of you will already have seen a warning message in Page Speed, Pingdom or GT Metrix that tells you to “Defer Parsing JavaScript.

How to Defer Parsing JavaScript

To do this, we need to make some edits to the functions.php file for your chosen WordPress theme. Find it, go to the bottom of the file and add the following code:

// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
// return “$url’ defer “;
return “$url’ defer onload='”;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
}

This piece of code will stop external JavaScripts from loading until the main content has loaded.

Other Solutions

If the above doesn’t work for you use one of the following code snippets. If any code that you add does not work, please make sure you remove it before trying the next one.

By adding the attribute ‘defer’,

Add this code before the last body tag () instead of in the head tag:

‘<script type=”text/javascript” defer=”defer” src=”YOUR_SOURCE_HERE”></script>’

Move JS to the Footer

By default, WordPress puts all core JavaScript and plugin JavaScript in the HTML header or the HTML footer. Anything that is in the wp_head file must be moved to wp_footer. Add the following code to the function.php file:

if(!is_admin()) {
// Move all JS from header to footer
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
}

Create a Separate JS File

Here’s how to do that:

  • Create a JS file and call it ‘defer.js’
  • Put inside it all the JS code you want deferred
  • Save it and then upload it to the theme folder
  • Open the header.php file and put the following code in before the end head tag:

‘<script type=”text/javascript”>

function downloadJSAtOnload() {

var element = document.createElement(“script”);

element.src = “defer.js”;

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener(“load”, downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent(“onload”, downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>’

Do make sure that the correct path for defer.js is input. It should look something like this:

/wp-content/themes/theme_name/defer.js

Does Parsing JavaScript Really Matter?

Yes, it does. Google uses page speed as one of their ranking factors, basically because all users like web pages to load up fast.

The speed of each page is measured from the second the page gets called to the second the page is initially loaded – the faster it is, the better because that initial load time is what Google uses.

The less unnecessary stuff there is to load before the main event, the faster your page will be.

If it makes Google and your users happy then you should do it. Remember:

  • Your priority is your users – get the content to them as fast as possible
  • Users should never have to wait for the JavaScript to load before they see your content
  • Really, it doesn’t matter how nice your footer is, your users don’t care – they want the content, not the footer.

Anne-Marie is a staff writer and successful blogger at Learn About The Web. When she's not busy discussing Wordpress performance tips with friends, you’ll find her surfing at the beach in California or discovering new restaurants in Los Angeles.

Click to comment

Editorial

A Failure of imagination – Apple release new iPhone XR iPhone XS and iPhone XS Max

Apple have taken the easy way out, avoided innovation and are dependent on incremental upgrades

Published

on

Apple iPhone XS

I have an iPhone and I love it so I absolutely hate to be THAT guy.

I hate to be the guy who’s going against the grain, who seems to be contrarian where others celebrate but unfortunately, this is one of those articles.

Apple released their new iPhones today.

They released three new models – the iPhone XR, iPhone XS and iPhone XS Max.

The new iPhone XS and XS Max are priced at $999 and $1,099 and start shipping out at the end of this month. The iPhone XR starts at $749 and begins shipping out in October.

Apple iPhone XS

Apple iPhone XS (Image Credit – The Verge)

The iPhone XS has a 5.8-inch OLED display with a 2436 x 1125 resolution. Meanwhile, the iPhone XS Max has a 6.5-inch OLED display with a 2688 x 1242 resolution. The iPhone XR, which you can basically think of as this year’s lower-end offering, has a 6.1-inch LCD display with a 1792 x 828 resolution.

At the end of the day, the screen size is the main difference between these three new models.

  • The XS is smaller than the iPhone 8 Plus but the screen is as big as the screen on the 8 Plus.
  • The iPhone XS Max is as big as the iPhone 8 Plus, and its screen is larger.
  • The iPhone XR has a larger display than the iPhone 8 Plus, while its overall size is just slightly smaller.

The iPhone XS and XS Max have dual rear 12-megapixel cameras and improved True Tone flash, and a front 7-megapixel camera. The iPhone XR, as the more budget option, has one 12-megapixel camera on the back, with True Tone flash.

All the new phones are powered by a new seven-nanometer A12 Bionic chip which can handle 512GB of storage. The iPhone XS and XS Max also have faster Face ID, True Tone display, and 3D Touch. They have support for Dolby Vision and HDR10 video.

The iPhone XS and XS Plus come in gold, silver, or space gray. The iPhone XS starts at $999 for the 64GB option, and has 256GB and 512GB options as well. The iPhone XS Max starts at $1,099, with the same storage options. The 512GB option goes for $1,449.

The Apple iPhone XS Promo Video

My opinion

Unfortunately, this is just more of the same.

Apple have made a larger phone, added more storage and made the camera better. The phone OS will be improved as well but that is really all that happened.

As someone who has an iPhone 7 Plus, I will upgrade at some point but the truth is there is STILL no rush.

I have been waiting for a compelling upgrade from Apple that would force me to head to the store and/or pre-order a new phone and the truth is, this isn’t the one.

The Samsung Galaxy Note 9 seems way more exciting from a consumer point of view because of the screen, the pen and the TONS of innovative new features they bring to the table.

When Steve Jobs died, there was a fervent argument among the faithful that innovation at the worlds most valuable company would start to slow.

Unfortunately I fear this is the case.

The most exciting features of the iPhone (IMHO) are FaceID and the upcoming multi-user FaceTime. Beyond those two features, it seems like Apple is just keeping up with the competition.

Let’s be really clear, these are REALLY GOOD PHONES.

But unfortunately, Apple is in a Michael Jackson type situation where they seem to be unable to do anything better than their greatest hit.

Apple continues to live in Steve Job’s shadow and unfortunately, his genius is really the anchor against which the company’s level of innovation will be measured. Using that yardstick, the company fails to measure up.

Preorders for both phones begin on September 14 and ship on September 21st in select countries, with rollout in other countries to follow.

What do you think? Will you buy an iPhone XS?

Continue Reading

Featured

Serve Resources from Consistent URLs

Published

on

consistent urls

No doubt, if you use a tool like GTMetrix, you’ve seen a warning telling you to serve your resources from consistent URLs. The warning will tell you that the resources listed have got identical content in them but are not being served from the same URLs.

Serving from consistent URLs not only saves resources and time on fewer requests, it can also save in bandwidth.

Why Does This Happen?

All websites use resources like JS files, CSS files, images and so on to deliver the right layout, the right functionality and a better user experience. Every resource is individually called by a browser when the webpage is accessed, and these are called HTTP requests.

Most of the time, each of the resources are served from one URL but, on occasion, a resource may be available through several domains or hostnames. That means that, when that page is loaded, it gets called several times and downloaded several times, once from each URL. This causes slower page loading.

This tends to happen when a resource is shared between multiple sub-directories or sub-domains on the same website or, sometimes when multiple plugins use the same eternal resources or libraries.

In short, it is down to redirects that have not been properly implemented, the wrong settings in your CDN or even a bug inside the theme you use. This all results in multiple HTTP requests, multiple downloads and even multiple DNS lookups, all of which have a negative effect on SEO and on page speed.

How Do You Serve Resources from Consistent URLs?

The four main situations that result in duplicate resources are:

  • When there is an HTTP and an HTTPS version of a website
  • When two websites share the same resources
  • When two or more plugins are sharing resources
  • When a CDN hosts resources and those resources can be accessed through the origin server and the CDN

And the methods to solve this issue are:

Move

The commonest issue is resources shared between several linked sites or subdomains. The solution is for the filename to be served from one hostname and linked to from the other. Although an extra DNS lookup is needed, the benefits reaped from caching make it worthwhile.

Rewrite

When you use a CDN for speeding up your website, you may get duplicate resources usually caused by the way that your plugins or theme handle the static resources. Normally you would edit the URLs for the static resources manually or through a plugin, thus moving them to the CDN.

Most of the time, this goes smoothly but sometimes a plugin or theme will pull some of the files out of the media library, into the code. The solution is to go into your theme’s files and change the path so that it points to the CDN file.

Doing it manually is not the best way; instead, go into the header.php file and find the line that defines the path the content, usually a logo, and edit it so it matches the CDN resource.

Redirect

If your website is available at two different addresses, such as mysite.com and www.mysitecom, you may end up with duplicate resources. Although you might have a good reason for having your website constructed in this way, you do end up with two websites.

One is hosted on the domain root and the other on the subdomain. The solution is to choose the main website and use 301 redirects sitewide. This will tell browsers and search engines to forget the other versions and go straight to the main site.

Canonical Tag

You can also use canonical tags to consolidate resources, useful for e-commerce sites where multiple pages may point to a single resource using different attributes or categories. In all honesty, a canonical tag shouldn’t be your first choice if you can use redirects instead. Rather than removing duplicate resources, canonicals just tell a search engine to prefer a specific version of your content

To implement a canonical tag, add the link to the resource you want into the code of the duplicate resource using the canonical attribute of rel=.

Plugins

Sometimes the issues will be caused by several plugins trying to share a resource or one plugin adding a string, like ?dshd=343, for example, to the original URL. The best way to solve this is to deactivate one or more plugins.

You can’t control a plugin because it is a third-party product so all you can do is deactivate. To see which one/s need to be deactivated, turn the settings off for each one and then on again to see which cause the problem.

Whichever solution works for you will result in your website speed increasing and fewer resources being used.

Continue Reading

Caching

Specify a Cache Validator

Published

on

specify-a-cache-validator

Cache validators are defined inside response headers and HTTP requests and are used to determine if whether or not a request to retrieve files from the browser cache are valid.

These validators are important because they work out whether a request needs to be sent to the server, which uses more resources and takes longer, or if the required files can be got from the local cache, thus increasing loading speed and using less resources.

It is always going to be better to retrieve files from the browser cache because it doesn’t involve the round trips that requests to the server involve. Using a cache validator, like an etag header or Last-Modified, can help to ensure that the browser is using caching as efficiently as possible.

How to Specify a Cache Validator

When you use a we serve, such as Nginx or Apache, the Last-Modified header is included by default. When your page speed tool, like GTMetrix or Google Page Speed, come up with the suggestion that you specify a cache validator, you are required to use either Last-Modified header, Etag and Expires Header or Cache Control Max Age header.

Last Modified and Etag headers are used for assisting the browser to work out if the requested file has been altered in any way since it was requested last. Cache Control and Expires header are used for working out how long a file should be stored in the cache before a new copy is requested from the server.

If you don’t use the Expires or Cache control headers, the browser has no way of knowing how long a local cached copy should be stored before a new one is retrieved. These may already have been defined on the server you use but, if you need to define them manually and you use Nginx or Apache, you can use these code snippets:

Apache

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”

Nginx

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control “public, no-transform”;
}

If you wanted to add the Last Modified header straight into a dynamic file, you would need to use the gmstrftime from the PHP file, as in the next example:

header(‘Last-Modified: ‘ . gmdate(‘D, d M Y H:i:s’) . ‘ GMT’);

On occasion, you may be trying to load resources stored on another domain. In this case, your speed test tools would send you a notice that you are required to specify a cache validator for those resources.

You could ignore this notice in safety – just like assets that are loaded from fonts.googleapis.com, for example, you do not have control over setting any cache validator for the resources and there is always a chance that what was specified has been intentionally removed.

Browser caching is a very important factor in WordPress website speed and making sure that you specify the right cache validator, and that it works as it should do, is critical for ensuring that browser caching is being used efficiently and results in speedier page loading.

Continue Reading

Categories

Archives

Digital Marketing Job Board

Trending