Connect with us
Script waterfall Script waterfall

Website Performance

Website Optimization Tips – Optimizing the Order of Styles and Scripts

One way to speed up your page loading times is to optimize the order of your styles and scripts.



One way to speed up your page loading times is to optimize the order of your styles and scripts. You should always place your style tags before your scripts and any calls to a stylesheet should also be before those scripts.

How does this make your page load faster? When a web browser loads your webpage, the HTML loads before CSS, images, scripts and so on – everything the HTML asks for.

When the browser begins to download a script, they will not load anything else until that script is fully loaded and this is why most webpages spend around 80 to 90% of their loading time waiting for a network.

One of the most powerful ways of reducing this wasted time is to remove any patterns that can cause a browser to serialize the download of resources.

How to Optimize the Order of Your Styles and Scripts

This can be done very simply by editing a couple of lines in the HTML for your webpage. Styles and scripts are called from the head section of the HTML and the following shows you an example of how to optimize the order:
‘ <head>
css code should be here
javascript should be here

In this code, we have placed the style instructions above the scripts. If you see on your pages that the script calls are happening before the stylesheet calls, all you need to do is change the calling order – this will result in an instant increase in page speed.

Using Filters to Optimize Script and Style Order

Another way of optimizing order is to use a filter called ‘Move CSS Above Scripts’. The filter will ensure that scripts do not get in the way of CSS resources loading.

If you use the Apache Server, you would enable this filter in the configuration file by specifying:
ModPagespeedEnableFilters move_css_above_scripts

This filter will only operate on CSS and style tags that come after the initial script tag – the tags would be moved so they are above the initial script. For example, if you HTML document looked something like this:

<script src=“script.js”></script>
<div class=“classname”>
Hello, world!
.classname { color: green; }
<link rel=“stylesheet” href=“style.css”>

Pagespeed would then rewrite it so it looked like this:

.classname {color: green; }
<link rel=“stylesheet” href=“style.css”>
<script src=“script.js”></script>
<div class=“classname”>
Hello, world!

With some browsers, the first version of the script would not download the CSS until JS has been downloaded and then run. Using the transformed version ensures that the CSS gets loaded first.

Using a WordPress Plugin

The easiest way, as with many things in WordPress, is to use a plugin. Autoptimize plugin makes the job of optimization dead simple because it can concatenate, minify and cache your styles ands scripts, inject the CSS straight into the deader and push scripts to the footer by default. It will also minify HTML, pulling a lot of weight off your webpages.

If you use a plugin that dynamically add JS and CSS calls you should consider changing it to one that that is for page caching. Alongside Autoptimize, you could also use WP Super Cache, Comet Cache, HyperCache or Cache Enabler from KeyCDN.

Click to comment

Website Performance

Digital Marketing Tips – How to Speed Up Your WordPress Admin Area

We’re going to look at how you can speed up your WordPress admin area.



Wordpress Admin

There’s no doubt about it, slow loading websites are frustrating but to the person that owns a WordPress website, there is nothing worse than a slow admin area.

Not only is it irritating, it can cost you so we’re going to look at how you can speed up your WordPress admin area.


The first step is to prepare your website – this is to ensure that you don’t lose customers while you are fixing your admin area. Some of the steps you need to take are going to affect every part of your website and visitors won’t be happy if they can’t access your site.

The best way to counteract this is to create a maintenance page. You can’t just pretend that nothing is wrong when its clear parts of your site don’t work so tell them by showing an “under maintenance” message – at least they know you are working on it!

To do this, use a plugin called SeedProd Coming Soon. It has full integration with newsletters like Aweber and Mailchimp, so your list can continue growing while you fix the site.

Review Recent Updates

Do you update plugins and themes, even WordPress itself regularly? If you don’t that is your first step. Not updating leads to security issues as well as speed problems so make a backup of your website and then update everything.

Then check to see if your admin area is any faster.

Conversely, some updates can cause problems. If you recently updated your theme or a plugin and then your admin area slowed down, it could be the update that caused it.

You should have backed up your site before you updated that plugin so restore from that backup and see if it cures the problem

Disable your WordPress Theme

If updating everything didn’t make a difference, the theme may be the problem. Disable your theme and use the default WordPress them to see if that makes a difference – if your admin area speeds up again the problem lies with your theme and it will need changing.

Disable Plugins

If the theme isn’t the problem, turn to your plugins. Disable all of them and see if it makes a difference. Then re-enable each plugin individually to see which one the culprit is. To do this without using your admin area, go through your hosting account.

  • Find the File Manager in your hosting account control panel
  • Find the directory where WordPress was installed
  • Open the folder named ‘wp-content’
  • You will see a folder named ‘Plugins’ – rename the folder so that it can’t be found by WordPress – the easiest way is to just add a letter to the end of the folder name

In your WordPress dashboard, go to the Plugins menu and there will be a message telling you your plugins are disabled.

If admin is now faster, you know that a plugin is the problem so go back to the file manager and rename the plugins folder as it was.

In WordPress dashboard, activate each plugin and test admin each time. When you find the plugin causing the problem, replace it with an alternative.

Repair/Optimize Database

Sometimes a corrupted database is the issue, so it will need to be repaired. Either use a plugin such as WP-DBManager or use the built-in repair function in WordPress, provided you are content t edit File Manager files. To do this:

  • In File Manager, go to the directory where WordPress is
  • Open the wp-config.php file
  • At the bottom of the file, starting a new line, add this code:
    ‘<code> define (‘WP_ALLOW_REPAIR’, true);</code>’
  • Save it but keep the file open
  • Open a new browser tab and type the name of your website with /wp-admin/maint/repair.php appended.
  • On the page that opens, click on Repair and Optimize Database and leave it to run. When it finishes, you will see a line at the foot of the page that says, “Repairs Complete’. Go back to your wp-config file, delete the line you added, save and close


If you still can’t locate what’s causing the problem you can use a plugin for debugging, like Query Monitor or you could find a developer to help you debug the site and find out what the issue is.

Continue Reading

Website Performance

5 simple techniques to Streamline Your Website



Streamline Your Website

One of the easiest ways to speed up your WordPress website is, quite simply, streamline the design.

Your website may look wonderful but there is nothing more frustrating for a visitor than to get to it and then have to wait or wade through reams of design elements just to get to where they want to go.

This is truer of websites that are packed with hundreds of pages of content, even with a structure in place. Sometimes, visitors find it much easier to just go back to the search engine and find another website.

So, how do you streamline your website, speed it up and reduce bounce rate?

Use Categories the Right Way

It is so tempting to want everything to be original that many people tend to pick weird and wonderful categories, ignoring the simple ones.

You might think you are being clever but all you are doing is muddying the waters for your visitors. Simple, accurate categories make their experience so much easier and so much nicer that they are more likely to come back to you.

If you choose a category that is too generalized, or it just says what they content type is, if a visitor likes your content, they have no way of finding anymore like it.

You could, of course, use a related post plugin to direct them to more but these tend to be a little unreliable.

It might seem a bit unwieldy to do, but the best way is to choose your categories first and then add the relevant content afterward. Make sure that the category and the content match in purpose as well, so visitors can easily find their way around.

Navigation Should Be Clear

When your website begins to expand, and you have a community and lots to offer, navigation around your website must be clear.

Some people have a “start here” page that so that first-timers can see what the site is all about but that will depend on the subject of your website.

Make sure that your content is categorized properly and then include a menu that shows subcategories or put the categories into a sidebar.

Making your website easy and quick to navigate is one of the best ways to improve user experience and speed up navigation around your site.

Distinguish Between Content

Your main content should be clearly distinguishable from the sidebars and other stuff on your main page. If your readers can’t see any difference, it gets very difficult to read and they will soon give up. User a border, whitespace, clearly defined headings, etc. to make it easier. If your sidebar blends into your main content, pick another theme, a simpler one that is faster and clearer.

Get Rid of Broken Links

This is a no-brainer, but you would be surprised how many sites are littered with these. Not only do they irritate visitors to your site, they use up precious resources in loading. See our guide to removing broken links easily.

Make Use of Tabs

A tab is useful for when you have a post that isn’t particularly important, and it isn’t long enough to warrant its own page but is still useful enough in its own right. Tabs help to split your content down into different content, leaving your main page focusing your main reason for having a website in the first place.

It might seem like doing all of this will just add to your website but, provided you use the right theme and don’t overdo the additions, your WordPress site will be easier for your visitors to navigate, somewhat faster and will reduce bounce rate – always a good thing!

Continue Reading

Website Performance

The Top 5 Free Website Speed Testing Tools



website speed testing tools

One of the most critical factors for the success of any website is speed. Not only do you rank higher in terms of SEO, you also get better conversion rates, more traffic, lower bounce rates and your visitors enjoy a much better experience overall.

There are plenty of free speed tools available and you should make use of them as often as you can.

What a Speed Test Will Tell You

Some of the more common things that speed test tools can pinpoint are:

  • Fonts, plugins, and scripts that cause issues for load time
  • Script minification
  • Image compression
  • Render-blocking
  • TTFB – Testing Time to First Byte
  • Analyzing load times, number of requests and page sizes
  • Performance from various locations
  • Rendering speed from multiple browsers
  • HTTP Header Analysis
  • Performance of CDN
  • Checking that assets load from your CDN correctly

The Top 5 Free Website Speed Testing Tools

Now you know what you are looking for, its time to look at the top 5 of these free speed test tools:


KeyCDN is fast and its lightweight, providing full details on the way your website is performing. It has 14 various locations around the world and you can choose to make your results public or keep them private.

You get a waterfall breakdown and you also get a visual preview, showing you, at a glance, the size of the requested page, the number of HTTP requests and load time. It works well on mobile devices.

Google PageSpeed Insights

This speed test tool gives your website a grade from 1 to 100. Every website owner aspires to get 100/100 but few do; obviously the higher your number is, the better your site has been optimized.

In short, if you score over 85, you’re doing alright. PageSpeed provides analysis of web and mobile site versions, providing a full report of any issues on your site.


Pingdom is one of the better-known speed test tools, offering reports that are set out in four sections – a waterfall breakdown, history, page analysis, and performance.

Page analysis provides details on requests per domain, what content is requested the most, size per domain and a size analysis. They have four locations for testing from and the performance insights are similar to those from Google PageSpeed.


GTMetrix is another well-known tool that is very detailed. It grades your website from F to A after checking both YSlow and PageSpeed metrics. Reports are in five sections – YSlow, PageSpeed, video, waterfall, and history.

The free version offers you seven testing locations and a choice of two browsers. You can check different connection types and get a video of the analysis, so you can see where the problems are.

WebPage Test

WebPage Test is like the previous tools, but it offers more than 40 locations and more than 25 browsers, including mobile browsers. Website grading is from F to A after various tests have been carried out, including compression, how effectively you use your CDN, caching and so on.

The reports are in five sections – screenshots, content breakdown, performance review, details, and a summary. Its approach to testing is unique in that you get a first view and a repeat view, so you can see if a DNS lookup delay is just a first-time thing or a regular one. You also get advanced features like ignoring SSL certificates, disabling JavaScript and video capture.


As you see, there are plenty of tools and these are just five of them. Each is unique and has its own features and its own way of doing things.

You should get into the habit of testing your site on a regular basis, so you can set benchmarks over the course of time – this allows you to make the necessary improvements as needed.

Are there any other tools you are using that we missed here?

Continue Reading

Digital Marketing Job Board