It’s no secret that a slow, clunky website is not a good look for your business or brand. In fact, there are tons of studies that suggest you’d be lucky if people stick around long enough to even see your website if it’s slow to load.
There goes your chance to make a good first impression. And you’ll be fortunate if they ever come back again. So just like that you…a) potentially lost a sale, b) increased your “bounce rate” (bad for seo!) and c) provided a very poor brand experience. Not gonna cut it…
So in this case you want your website to be the hare and not the tortoise, but just how do you make it so? Well that’s what this article is for! We recently spoke to more than 40 web design & development pros and quizzed them on “how to speed up a website?” They each talked us through one tip to make a website load faster, and we ended up with a bucketload of actionable advice ranging from the super simple (install a plugin or choose better hosting) to the slightly more complicated (coding knowledge required).
If you need to get your website out of first gear, spend some time looking through the tips below. Significant gains in website speed can be made with a very minimal time and monetary investment in many cases. There’s really no excuse!
How to Optimize Website Speed: 42 Tips to Seriously Cut Loading Times
Here’s a quickfire overview of all of the ways to make your website load faster that were mentioned by the experts we got in touch with. These folks have built and managed thousands of websites between them, with speed always a priority. You could say they have some experience in this area. Anyway, here are the tips…
- Defer image loading
- Optimize your images
- Install the SmushIt plugin
- Use a caching plugin
- Reduce clutter – convey the most using the least
- Install WP Rocket
- Choose your theme wisely
- Optimize SQL queries
- Clean-up your database
- Use WordPress management tools
- Keep WordPress core, themes and plugins updated
- Steer clear of bloated themes
- Minify HTML, CSS and JS
- Use the SG Optimizer plugin
- Don’t serve scaled images
- Prevent image hotlinking
- Optimize videos if you’re self-hosting them
- Clean up revisions after WordPress Updates
- Use sprite maps
- Build your own theme with Elementor Pro
- Reduce redirects
- Review your hosting plan
- Take advantage of speed testing tools
- Install the Async Javascript plugin
- Be consistent (& accurate) with your url
- Use Cloudflare
- Deactivate/remove unused plugins in WordPress
- Invest in a custom designed template
- Minimise all HTTP requests
- Lazy loading technique
- Write smarter CSS/SCSS/SASS
- Avoid using an image where possible (use CSS instead)
- Optimize DNS options
- Configure your expire headers
- Remove redundant code (particularly in the backend)
- Conditionally enqueue styles and scripts
- Serve your media from Amazon S3
- Reduce the impact of Javascript on the critical rendering path
- Host videos externally
- Use SPA to improve user experience
- Strip the cruft from your theme
- Choose your web host wisely
Other Articles You May Find Useful:
What the Experts Said: Faster Website Tips Explained
“There’s more than one way to skin a cat” as they say. That’s definitely true when it comes to figuring out how to make a website load faster. The more in-depth explanations of the tips that were shared with us are in the section below. Read through a few of them, take action and implement them on your website, and I’d be amazed if you don’t see some speed gains. In fact, I’d eat my socks (as I don’t have a hat).
We’ve ordered the tips into some rough categories, which you can filter using the tags below. Good luck, and we’d love to hear about any improvements you manage to achieve in the comments section!
Matt Brubaker
Defer Image Loading
– “A technique I’ve been using for a lot of custom site builds, which gives a good performance boost is simple for site developers to implement: defer image loading. This method allows visible page elements to load faster. Basically you load a tiny image source, such as a base64 image, then after page load you use javascript to swap the base64 image for your larger image source we want to display. Doing this tricks the browser into thinking the larger images are not there, resulting in a page loading much faster.
Image loading (large images or a lot of images) is often a culprit of a slow page load. All page images compete for bandwidth as all other page resources such as javascript and stylesheets. To get around this we can defer image loading to speed up page load. To do so we can find image sources loading off screen, or below the page “fold” and load them differently.
Find the image source, add a base64 image and put your actual source into a data-src attribute like this:
Then add this jacascript to your page and you’re all set.
I will not take credit for this technique. All credit goes to Patrick Sexton at varvy.com. For a more in depth explanation, see this great article.
I have also learned some other very helpful pagespeed techniques on his site.”
Wendy Alessi
Image Optimization
– “Image optimization is a huge deal when it comes to the speed of your website. Many people find it tempting to upload large HD images to their websites, with the hope that the image quality will look amazing, but the truth is that large image file sizes can slow your website down considerably.
While it is extremely important for your images to look their best on your website, It’s equally important to ensure that your images have been re-sized prior to uploading. As a professional, I use Adobe Photoshop CC to re-size and compress my images prior to uploading to my client’s websites, but there are lots of cheap or free alternatives such as Pixlr.com for those who don’t have Photoshop.
There is a balance between using the lowest file size and retaining great image quality. As a rule, I recommend that images should be in .jpg, .png or .gif format, and re-sized to no larger than the size (in px) that you wish to display on your website.
If you are a WordPress user like me, you can further compress your image file sizes (without losing quality) by installing the WP Smush – Image Compression and Optimization plugin.
When developing a website in WordPress, I find that it’s common to upload images and then decide against using them, either because they don’t look good aesthetically or because the format of the page changes during development. When this happens, it’s important to keep on top of your “housekeeping” and remove any unused images from your WordPress media library. Leaving unused images sitting in your media library takes up storage and in turn slows down your website.
Finally, you can test your images by analyzing your website at: http://gtmetrix.com. GTmetrix provides a vast amount of information about your website optimization as a whole, but there is a section which reports specifically on your images.”
Zach Schwartz
SmushIt Plugin
– “High resolution Images are obviously vital for the design of your website. However, using images that are hi-res means taking up a lot of space on the server. This means it will take longer for your site visitors’ computers to load those images, thereby taking longer to load the website. SmushIt is a WordPress plug-in that allows you to cut off extra data in images that is not necessary. Websites also load entire pages at once, which means it loads images that are not in the viewport yet. For this, SmushIt has an option called “Lazy Loader”, which postpones the images from loading until the user scrolls to that point of the web page. See this link for more info.”
Dortha Hise
Use a Caching Plugin
– “WordPress is a great platform to easily create and maintain your website. In addition to using other plugins for security and other functionality, using a caching plugin such as W3 Total Cache is a great way to enhance your website’s performance. The W3 Total Cache plugin encapsulates all the features you need to cache your site and help it run faster. It’s as simple as installing and activating it in your WordPress dashboard.
Some of the other benefits of using the W3 Total Cache plugin on your WordPress site include improved search engine result page rankings, improved conversion rates, and performance of your site, which affect how you show up in Google rankings. Your pages render and can be interacted with more quickly. You’ll also see faster page load speed which will help with keeping people on your site longer and ideally, they’ll be clicking on to more pages of your site.
W3 Total Cache is very compatible with many hosting companies, offers mobile support and so much more.”
Hughie Wilmshurst
Reduce Clutter
– “Consider what you and your users actually need/want on your website. Far too often I receive requests to “just add this” or “just add that” – know your limits. The more you add, the slower your website will be. Do you really need your homepage to feature your Instagram feed, feefo reviews, featured products, featured brands, Facebook feed, Twitter feed, news articles, featured promotions etc?
Use tracking services such as Google Analytics, MouseFlow and HotJar to track which parts of your site your users actually pay attention to. If nobody uses a particularly resource-intensive feature, consider removing it, or moving it to somewhere else on your site.
It’s all about efficiency – convey the most using the least.”
Craig Murphy
Install WP Rocket
– “A friend told me mid-last year about a plugin called WP Rocket which is a plugin specifically for WordPress. As a user of W3 Total Cache I wasn’t too keen on looking at switching, but due to a few caching issues and seeing the metrics of my friend’s website I decided to give it a go.
WP Rocket is now used on our own website and every client who uses WordPress – it is that good.
What WP Rocket does is, besides offering incredible support, it allows you to set files such as CSS, JS and HTML etc to compress and cache – Without breaking your design & layout.
On all the page speed metric sites, such as Google Page Insights and GTMetrix, just through installing the plugin and enabling the basics it improved the percentage on average by 15-20%.
Once we dialled in the plugin and messed around with the settings we’ve found it on average to jump the Google Page insights metrics by 20-30%, Increase the GTMetrix score by around 30-35% and decrease page load time by around 1.5 seconds on average.
We highly recommend the tool, love it so much and you can find more about it and download a copy from: https://wp-rocket.me/”
Faye Williams
Choose your Theme Wisely
– “There are thousands of WordPress themes available. Choosing the perfect theme for your website is not just about picking something that you think looks pretty. Since speed is such an important part of the user experience, you will want to choose a theme that is regularly updated and optimised for speed. There is no point choosing a theme that looks wonderful if it adds seconds to your site’s load time.
Reading the theme owners description is an easy place to start. If there is no mention of speed or optimisation then it is likely that this isn’t a priority for the development team or individual. Asking for recommendations for themes that are fast is a good way to find out what others have used and liked.
You can also do a basic evaluation of your current theme by switching to a vanilla WordPress theme (like Twenty Twelve which is excellent for speed) and comparing the difference in load time. As a general rule, the more adds-ons and functionality you have in your theme, the slower you can expect it to respond.
My personal theme recommendation for WordPress is to start with Generate Press and customise it as needed. This is a very lightweight, but truly flexible theme that you can use to create some stunning designs. However, if you are looking for a super fast theme out-of-the-box then do your research (there are plenty of articles that compare theme speeds) and make sure you pick one that is tried and tested.”
Matthew Carver
Optimize SQL Queries
– “This is especially true if you have a custom built solution in place. The issue isn’t just a problem for my clients with custom content delivery sites. For instance, maybe you have your main site hosted on WordPress, but you need a connection to a custom API. If those API calls aren’t optimized, it could block the render of the page. Sometimes it’s not just the query that needs to be optimized, but the response. If your API responds with too much content or overly verbose responses, it can cause your site to lag while it parses the response.
The easiest way to address this issue is with a query optimizer. A query optimizer can cost anywhere from $30 to $130+ a month (personally, for SQL I like SolarWinds or Red Gate is a good overall SQL Toolset) and you’ll still need to rely on somebody to implement the solution and it won’t guarantee perfect results out of the box. For my clients I like to suggest a system audit first to rule out simpler fixes first. These can take as little as a week and be done with a one time up-front investment before committing to an ongoing expense and ensure the right solution is enacted.”
David Marmon
Clean-Up Your Database
– “It’s important to keep your site’s database as clean as possible. This will keep the database size to a minimum, which will not only help speed up your site, but also help important website processes (such as backups) happen at a much faster speed.
Often fresh theme installations will come with demo content hidden in places that your site might not utilize, such as a portfolio feature filled with demo content.
Spam comments may collect over time. Unused image variations will start to pile up in your media library. Unpublished draft content, no longer active users, and unneeded plugins can all take up unnecessary space in your database.
Clean it up every so often!”
Vee Ridgley
Use WordPress Management Tools
– “Having looked at the list of tip topics so far it was hard to think of a new one. We carry out as many of them as possible to help with site speed. Which led to me realise I do have a tip that is not yet listed. And that is to use WordPress management tools.
For example, no matter how many times you explain to a client that their images called ‘IMG_1234.jpg’ etc. at 3500px X 4000px and 300dpi will slow down their site, they often ‘forget’. Short of checking everything they do on site you cannot police this, especially when they insist on managing the content themselves.
WordPress Management tools can help. I’m talking about tools that give an overall picture of a site’s performance, with details that can guide you to where the issues are. Whether the problem is un-optimised images, poor hosting or poor code etc. There are premium tools such as ManageWP, which has recently been bought by GoDaddy and now included in their managed WordPress hosting packages I believe. Also MainWP, InfiniteWP, iControlWP and a few more.
For managing one or two sites, there are free online tools such as GTMetrix, Google’s PageSpeed Insights, Pingdom Website Speed Test and many more. These will often also give insights to help you find out what is causing any slow speeds.
Even Google Analytics can help. If you have a niche market and know where your customers/site visitors are coming from, plus what devices they tend to use, you can perhaps optimise your site design to reflect that. For example, if lots of visitors are from somewhere with poor broadband speeds and view the site on a mobile, then don’t waste time making them download a lovely big hero image.”
Danny Stone
Keeping WordPress Core, Themes & Plugins Updated
– “The WordPress core, your WordPress theme and any plugins you install are written in code that is meant to fuse together well – ultimately providing you with a functioning (and fast) website. As things move forward with new features, enhancements and upgrades, this means that the developers of the above will have been writing new code. These changes in the packages are the updates and upgrades that are released.
Keeping on top of this will improve the security and performance of your site.
One may argue that you should not update everything immediately when the new release is ready, rather instead – whilst WordPress does score the confidence of compatibility of the updates – it can be wise to set up a staging environment to test these out before launching the upgrades as a live site to the public.”
John Sheahan
Avoid Bloated Themes
– “One of the best ways to speed to up your site is to avoid using bloated themes that come packed with too many features, 80% of which you probably wont even use. Combine that with a load of plugins and add-ons and you are just begging for a slow site! On top of that, the majority of these themes use page builders, which also can add to the load and slow it down. At Egg we use a very lightweight framework and only ever use the very basics in functionality that the client will need, all the while making it as user-friendly and easy to use as possible.
We advise using custom fields plugins (such as the fantastic Advanced Custom Fileds) to create hard coded layouts that your client can then easily update themselves without the need for page builders which can lead to disaster at times if a client doesn’t know how to use them properly.
So at the end of the day, keep things as cut back and streamlined as possible with your theme.”
Dave Ashworth
Minify HTML, CSS & JS
– “Minify your HTML, CSS and JS files to remove white space and unnecessary or redundant code (such as comments) which in turn minimises code across your site’s pages and script files.
This will reduce file size which in turn reduces bandwidth usage and page load time. There are manual tools to help with this such as:
There are also resources available which will generate minified code dynamically. There are a number of plugins available for WordPress sites:
Whilst developers can find code to do this such as:
- https://gist.github.com/tovic/d7b310dea3b33e4732c0
- https://github.com/mrclay/minifyAlways
Always make sure you test your minified code to ensure the CSS and JS files still work.”
Derek Rippe
Use the SG Optimizer Plugin
– “I am someone who was late to the “Site Speed” game, largely because I always felt overwhelmed by the plugins available to WordPress users. The plugins I had tried undoubtedly worked well (based on ratings), but the user interfaces were so poor that I regularly felt overwhelmed and confused.
Toward the end of 2018, after acquiring a SiteGround VPS account and the clients on it, I was looking for easy ways to reduce server load. It was then that I learned of the SG Optimizer plugin.
While the SG Optimizer plugin is developed and maintained by the folks at SiteGround, the majority of features available will work on WordPress websites hosted anywhere (there are merely some extra perks for those who also host with SiteGround). What I love most about this optimization tool is not how well it works (and it does work well), but how incredibly easy it is to use!
After installing the plugin as you would any other WordPress plugin (it’s available in the WordPress repository: https://wordpress.org/plugins/sg-cachepress/), you will see the optimization options are broken into 4 categories:
- SuperCacher Settings
- Environment Optimization
- Frontend Optimization
- Image Optimization
SuperCacher Settings
This section has tools for enabling “Dynamic Caching”, which stores your content in the server’s memory for faster access. It includes tools for purging the cache, excluding specific URLs, and testing the cache status. SiteGround users can also take advantage of “Memcached” – powerful object caching for your site.
Environment Optimization
In this section you can enable GZIP Compression and Browser Caching. GZIP Compression compresses the content delivered to your visitors browsers and improves the network loading times of your site. Browser Caching adds rules to store in your visitors browser cache to keep static content longer for better site performance. There are also tools for enabling and forcing HTTPS, and settings your PHP version, although I have only had luck with these on WordPress websites hosted with SiteGround.
Frontend Optimization
This is a key section within the SG Optimizer plugin, and it offers a lot of options for reducing the load time your site visitors experience. You can minify your HTML Output and JavaScript files, and both combine and minify your CSS files. You can also load render-blocking JavaScript files “asynchronously” (preventing javascript from blocking your page from loading) and remove query strings from static resources (to improve caching).
I have seen rare instances where certain options here can affect frontend elements on a website (background images, forms, etc). Should you notice a display issue after enabling the Frontend Optimization tools, I’d suggest disabling them individually to find the culprit (then just leave that particular option disabled).
Image Optimization
Today’s websites are full of images, and images are full of data… data that your site visitor has to download. The primary purpose of this section is to optimize existing images (with minimal or no loss in quality) and automatically optimize any new images you upload. You can also select a variety of images to “lazy load,” meaning they won’t be loaded and displayed to the user until they come into view.
While the majority of client sites I maintain are on SiteGround, I now use the SG Optimizer plugin on every WordPress website I create or manage. For me, it’s a “set it and forget it” plugin with measurable performance gains.”
Erim Foster
Don’t Serve Scaled Images
– “I see this issue all the time with websites I test. Often it’s with thumbnails on an archive or index page. The individual images are displayed at 200X200 pixels for example, but the images themselves are much bigger, sometimes full resolution. I once tested a major news outlet homepage and found a tiny logo image being displayed about 100 pixels wide, but the source file was a full resolution PNG that clocked in at almost 6MB. All for an image that should have been about 800 bytes!
Your images should be scaled down to the largest size they’ll be displayed. With responsive design, this often means a larger size on a mobile device than on desktop. This is because responsive design will break a two or three column desktop layout down to one column and stack images and text on top of each other, making the displayed images larger.
Assuming you’re going to use the same images for different screen sizes, figure out the largest size you’ll need to display and use that for the image source file. If you’re building a WordPress theme with thumbnail images, create a custom image size and use that. Do not just pull the full resolution image or one of the stock sizes if they’re not appropriate. If you’re inserting images into posts or pages, use the image size that’s right for the column width, don’t just use the full size and let the CSS scale it down.
And when you’re done, test it with GTMetrix and make sure you’re not missing anything. Scaled images are one of the biggest performance issues I see with the sites I test, and I test a lot of them. And you see this all the time with high profile sites and sites I know somebody spent a lot of money on. A web page that should be 1.5 MB total is 10 or 15. That’s frustrating to users, makes a bad impression and is costing the website traffic, dwell time and search rankings.”
Wes Marlan
Prevent Image Hotlinking
– “Don’t let other sites steal your bandwidth and resources by allowing them to hotlink to your WordPress website’s images and files! Believe it or not, this can contribute to overall server load and slow things down a bit (depending on the number of sites that are stealing your content).
The best way to find out if other sites are hotlinking to your images is to use Google Images. Enter in the following line to instruct Google to search for your website’s images in other URLs:
inurl:yourdomain.com -site:yourdomain.com
If you see some images show up, then you’ll have your answer!<.p>
Thankfully, there’s an easy fix for this that involves adding the following code to your WordPress website’s .htaccess file:
/* Prevent image hotlinking */
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?instagram.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?other-website-urls-go-here.com [NC]
RewriteRule \.(jpg|jpeg|pdf|png|gif)$ – [F]The snippet of code above prevents websites other than yours, Google, Facebook, Instagram, and Twitter from having access to your website’s images and files. The second-to-last line is a placeholder/template for adding additional domains you might want to whitelist for hotlinking. The final line of code specifies what file formats you want to apply the hotlink prevention rule to (you can tweak the filetypes as needed).
Once you have this snippet of code in your .htaccess file, you shouldn’t have to worry about other sites leeching off your content while adding more stress to your server.”
Mike Sayenko
-
Video Optimization If Self-Hosting Them – “Video optimization is important, as it can affect the performance and speed of your website. Here are some tips:
- Video Formats – Convert to HTML5 Supported Formats. All modern browsers allow you to use MP4, with Chrome and Friefox supporting the newer format WebM. You want to deliver videos on your website with HTML5, which allows you to use both formats. Chrome and firefox will use WebM while other browsers will fallback to use MP4.
- Video Compression – The smaller the file size, the better the performance. You can use online tools such as Hand Brake or Online Convert to convert and optimize your videos.
- Removing Audio – If your video is being used as a background, or doesn’t need sound, by removing the sound you can decrease the file size.
- Using a CDN (Content Delivery Network) – Just like images and other website assets, you can use a CDN to deliver video to your visitors.
- Defer Loading of Videos – If the video autoplays when a visitor reaches your web page, defer the loading until the page load has completed. This will allow the page to load faster.
- Mobile Experience – If you have a larger video, then many visitors with slower connections won’t benefit from video. They’ll be waiting for the video to load, and this can cause a poor user experience. Hide the video for mobile and replace it with an image.”
Gene Armstrong
Clean Up Revisions After Updates (WP)
– “One of the most common mistakes I see people make, especially novice WordPress users, is not cleaning up revisions after updates have been made.
I’ve seen some sites having as much as 20 or more revisions for each page. Having too many revisions can greatly increase the size of the database and hinder the performance of the website.
Unlike other more technical techniques for speeding up the site, this one is easy to implement. You can limit how many revisions you want to keep by adding one line of code to your wp-config.php file.
define( ‘WP_POST_REVISIONS’, 5 );
For example, this code will limit the number of revisions to 5 and automatically remove older revisions, which will reduce the size of your database and lead to better website performance.”
Eric Atallah
Sprite Maps
– “In general, any way to reduce the number of round trips (http requests) to and from the server during page load is a good idea. Similar to JavaScript and CSS aggregation techniques, using a sprite map for collections of icons can help reduce server requests. Let’s say you need to render twenty small icons in various places on your web page. Instead of loading twenty small icons individually, use Illustrator, or your design tool of choice to lay all twenty icons next to one another on a single image file. Then you only have one image file to load. Now you have reduced twenty http requests down to only one. You can then use the CSS background rule to render each icon in the sprite map, individually, where you like on your page.
Here is a pretty good blog post on creating sprite maps:
Joe Gilbert
Build Your Own Theme with Elementor Pro
– “When building a website in WordPress, themes and page builders often come jam-packed with features and awesomeness, each trying desperately to deliver better features than their rivals. However, do you need all these features, packed into both the page builder AND the theme?
We build all of our websites using Elementor Pro, which not only comes packed with tonnes of amazing features, but also includes its own inbuilt theme builder. That lets us do away with needing a WordPress theme all-together, other than the “bare bones” Elementor theme which doesn’t contain any features at all, and so is unbelievably light-weight.
The attached screenshot shows the GTMetrix comparison of a website we recently built. On the left the site is built using only Elementor Pro, and on the right is an identical clone of the site using Elementor Pro + Astra theme (in itself a very fast and lightweight theme!) You can see the differences in speed and performance are remarkable.”
Pawel Laczny
Reduce Redirects
– “Redirects are instructions, which automatically take visitors of your website from one location to another. They are often necessary when you move or delete pages, and are the best way to eliminate issues with broken links.
Having too many redirects creates additional requests, which can significantly decrease the speed of your website, especially on mobile devices. This means, it’s best to keep them to a minimum. Google says that site owners should try to eliminate them completely.
There are two types of redirects: server- and client-side. Server-side use HTTP to direct the browser to the new location of the file. Client-side use HTML or JavaScript code in the user’s browser. If you can’t remove all redirects, make sure you use the server-side ones. Web browsers can handle them much quicker and can cache the correct location of the file.”
Simon Smith
Hosting Plan Review
– “Whenever I am asked to look at a slow performing website the first question I ask is “Who are you hosting with? “and “What hosting plan are you on?”
Generally, I find that the website owner has signed up to an entry-level, low-cost plan and that plan is known as ‘Shared Hosting”. Just by upgrading the Shared Web Hosting plan, I normally see a real big difference in website performance. Though that does not say there isn’t other performance optimisation you can do as well.
The reason hosting companies can offer such a cheap monthly hosting plan is they host many websites on one physical server. This server then has to share resources across 100’s and possibly 1000’s of other websites. So your site performance is affected by other websites’ usage, as they are pulling on the same resources, such as CPU and RAM from the server. Some hosting companies will even throttle usage on Shared Hosting, so if you get a spike in your traffic your website will run slow as it deals with the increase in resource usage. Unfortunately, it is a case of you get what you pay for with web hosting.
It is worth speaking with your hosting company to see what upgrades you can get to your hosting plan, as some shared hosting companies can guarantee your website an amount of server resource for an additional monthly fee. If they are unhelpful, then it may be worth looking to move provider or look at other hosting options such as Cloud Hosting, VPS or Dedicated Hosting.
In summary, it is really worth paying a bit extra to get your hosting optimised and performing as you expect. Your website is the first stop for your customers and a poor performing website is harmful to your business and negates all the other work you do to promote your business.”
Monica Pitts
Use Speed Testing Tools
– “Knowing how to make your website perform better is useless unless you know how to test if your performance updates are actually working. There are tons of great speed test tools out there. Google has two that I use pretty frequently. Page Speed Insights is easy to use and effective at telling you what is working and what is slowing down your site. If you’re a chrome user, Google Lighthouse is already built in! All you have to do is right click on an item and click inspect, once the google developer toolbar pops up just click on “Audits”. Then if that doesn’t satisfy your curiosity, Pingdom Tools is a third party testing site I use constantly to rate websites. It doesn’t give as detailed a report as Lighthouse, but it is still super useful for making sure your website is running as fast as it should.”
Roberto Severino
Install Async JavaScript Plugin
– “There are dozens of ways you can speed up your WordPress site, many of which are fairly straightforward. But there’s one tool that I would highly recommend any business owner or marketer look into, and that’s Async JavaScript. Among the WordPress plugins you can find, it can be a little bit intimidating to use at first if you’re not too familiar with web development itself.
However, as long as you follow these simple troubleshooting steps, you’ll be able to get it to work just fine for your business website.
The first thing you need to do is to install the plugin and enable it, and then on the front page of the admin panel, you will be able to see the plugin in action. It gives you a clear overview of what’s happening and what has been optimized. For example, you will see a status telling you whether it’s enabled or not.
There are also several other options available. I will go through the main ones that I always use and generate the most results. After all, the 80/20 rule applies to so much about digital marketing and web development. You only need a fraction of these tools to have the most impact on your site speed.
After you’ve gone through the installation process, hover over “Settings” on the left-hand corner of the screen, and click on Async JavaScript. Now, you will be able to make the changes that are going to speed up your site dramatically. This is getting good, but bare with me now!
Now on this screen, what you want to do is click on the checkboxes for the options you want to be enabled. When I work with this plugin, I always click on the very first setting to enable the plugin itself. If you run an e-commerce site, you should also enable the plugin for logged in users and cart and checkout pages. However, be sure to test those pages out to be sure nothing breaks. That’s going to be a common thing you need to do every time you decide to play around with these settings.
Scroll down to the Async JavaScript Method section and click on the radio button beside Async.
As for the JQuery part of the page, you have to be extra careful with this option. Most of the time, it’s best to enable the Defer option. I’ve tried Async here, and it usually has resulted in a lot of issues for me on the sites I’ve worked on. If you’re still having problems, you can also exclude JQuery entirely. I ran into a situation where deferring JQuery completely broke a custom menu I had to make for a client, so depending on the kind of work you need done on your website, I would double check to make sure everything’s working just fine.
Lastly, scroll down to the bottom. You’re going to also need to have the Autoptimize plugin installed, so go back and do that if you haven’t already. It’s also another incredible WordPress plugin I use all the time to make my clients’ sites incredibly fast, but I want to stick with how to get this plugin up and running specifically.
Click on the checkbox next to “Enable Autoptimize Support” and then click on Async for the method. This is why a lot of the time, you want to make sure that you have JQuery deferred already for this plugin. The Autoptimize plugin usually already takes care of it for you.
And there you have it! After you’ve gone through these steps, test out your site’s speed.
Combined with other popular WordPress plugins, your site should load much faster. If you’re having any technical problems, be sure to sort those out. Now you can really speed up your WordPress site’s JavaScript code without having to touch a single line of code yourself. It took several steps, but as you can see, it’s not that hard at all!”
Travis Smith
Be Consistent (& Accurate) With Your URL
– “If your site is at https://www.hopstudios.com, then make sure you ALWAYS use https, and you ALWAYS use www, in every place you link to your site, publish it, mention it, print it, etc. If someone tries to visit http://hopstudios.com/, that’s going to require at least one, possibly two redirects before they arrive at the final proper request to load your home page, and that can add a delay of several seconds to the initial page load. The current best practice is to have https as the default, and the non-www as the canonical URL, but regardless of what you choose, just make sure that you are consistent.”
Ty Fujimura
Use Cloudflare
– “No tool can save a website that isn’t built properly, so start there. Minimize the amount of code on the site to just what you need. Reduce the number of third-party libraries involved. Monitor any database queries.
After that… use Cloudflare!
Cloudflare acts as a middle layer between your visitors and your site. It’s like a waiter. Instead of your visitors going all the way to the kitchen to ask for what they need or to pick up their food, they ask Cloudflare.
The problem this solves is that your website’s server is _busy_. Every time a user visits, it has to prepare all the right files and send it over the internet all the way to the user’s location. This process is time-intensive and repetitive. Cloudflare stores the results of prior requests so that the next time somebody requests a certain file, Cloudflare can serve it to the visitor without even asking your web server.
What’s more, Cloudflare has servers in major population centers around the world, so your files are usually served from a location closer to the visitor than your web server is. This minimizes the time it takes to communicate between the visitor and your site.
These are all the traditional roles of a Content Delivery Network (CDN) – but Cloudflare is broader and delivers more features. With a traditional CDN, you need to change your website so that it links to the CDN’s version of a file rather than the one on your web server. Cloudflare sits transparently in _front_ of your website, so visitors can request files directly from their physical location and Cloudflare will intercept the hit without anyone noticing. Cloudflare requires a more all-in setup process and commitment to using their infrastructure for most of your content, so it can be overkill for some cases where a more basic CDN would suffice. You should evaluate both options in the context of your site’s particular performance profile.
Cloudflare operates by taking full control of your “DNS” – the primary settings that govern where visitors are sent when they request the site. It takes just a few minutes to set up, and your site will be instantly faster. DNS setup is particular and can take time to reverse, so it’s a commitment, but once set up properly, you’ll hardly notice that Cloudflare is involved in serving your site.
What’s more, this level of control means that Cloudflare can add additional features like making files smaller, taking advantage of the latest content delivery methods, and making your site significantly more secure.
And it does all of this for the grand total of $0. Their free product covers the basic features I just outlined, and you can pay for more advanced features as you need.
At Cantilever, we implement Cloudflare for virtually every project we do – usually the free version, but sometimes with their premium features too. We have no affiliation with them, we’re just grateful for their product and love to spread the word.”
Vernette John-Joiles
Deactivate/Remove Unused Plugins in WordPress
– “If you have a WordPress website that is currently online, then I extend the secret ‘WordPress club’ handshake to you! That’s just my way of letting you know that, like me, you have become part of a global tribe of WordPress website owners who are regularly on the hunt for tips and tricks about WordPress developments, and how to keep WordPress websites functioning well. WordPress has become so popular as an open-source platform that it is used for approximately over a third of all live websites on the internet. Your tribe is huge!
I have a WordPress website for my business, and have also built and manage many of them on behalf of my clients. So, I can say that I know WordPress quite well, and I also have to keep my eyes open about the different things that can be done to make the most of WordPress.
So, as you read this, I am going to assume that you are aware that plugins are a must to expand WordPress website functionality, so that we can do some sophisticated tasks online, but without having to do the heavy-weight coding work. Plugins are vital for any WordPress website, and depending on how you see things, they can be the lifeblood of your website or the bane of your online existence.
Let me explain that last statement.
Yes, when it comes to the plugins that are on offer to extend the functionality of WordPress websites, there are a ‘gazillion’ free ones available to install. This is great news if you are trying to build an online presence and you either want to try a few things out before committing long term, or if you don’t want to invest any money initially. Alternatively, there are premium plugins that can be bought from developers from many online stores and sources if you are seeking to build a website with more elaborate requirements. Lifeblood.
On the other hand, because there are so many plugin options to choose from, it can mean that you end up with ‘too many cooks in the kitchen’ which can cause unnecessary headaches. Sometimes, there are plugins that don’t like each other and cause conflicts… Or can drain on other resources present that your website might need… Or can have bugs and you have to spend time working to get the issue fixed, which is very time consuming. Bane.
If you are familiar with WordPress, I’m going to assume that you would have most likely visited the WordPress repository (or catalogue) from the admin dashboard and installed your ‘go-to’ plugins; the ones that are tried and tested, and are known to be useful and reliable. If you’re new to WordPress and unfamiliar with the ‘go-to’ plugins, it’s most likely that you’ll install a few of them, activate them and fiddle around to see how they work and if they help with your website build. I used to do this a lot when I first started out with WordPress.
So, when it comes to looking at aspects that affect the loading speed of our websites, the issue that can arise is that installing multiple plugins can create a loading delay. A good analogy would be to think of loading up a car with lots of stuff, which would make the car heavier and cause the car engine to have to use more petrol and power to get up a hill. When a website loads, the server that it’s hosted on also has to deliver all the plugins that may be installed or present in the website folder. Even if there are plugins that are not activated or in use on the website, having it installed can be a bit draining for the website server, and can increase the loading time for our websites.
Tips for Moving Forward
So, here are some suggestions about how you can do some work with your website plugins as part of ongoing work to improve your website loading speed, which can all be done once logged in to your WordPress dashboard. Please be sure to make a back-up of your website before you start.
- Check if your current active plugins need updating. If you are seeing a message under the plugin listing informing that an update is available, it’s normally a good idea to go ahead and update the plugin. The update will most likely include improvements which will be helpful for your website.
- Review the plugins that are currently active on your website. Check the plugin settings to make sure that it does what you ‘need’ it to do. Sometimes there are functions within a plugin that will be ‘auto-activated’ but might be unnecessary for your website and also affect the loading speed. So, give your active plugins a once over to make sure that all is as it should be.
- Review the plugins that are currently installed but inactive. If they are not serving a purpose for your website, delete them. It is better to have a ‘lean machine’ of a website. If some of the inactive plugins are premium ones, be sure to have a backup stored elsewhere before you delete from your website.
- When it comes to selecting the plugins to use for your website, be sure to take some time to read the reviews. You can check the reviews within the WordPress dashboard itself, from https://wordpress.org/plugins/ or from other sources online. This will give you an idea about the reliability of the plugin you are considering and will also save you time by not having to upload multiple plugins.”
Robin Clapp
Invest in a Custom Designed Template
– “If you want to accelerate the performance of your website, you should use a custom-designed template not a purchased template that is customized. There is a big difference. Let me explain.
A purchased template is a product. For this reason, it must appeal to many. This type of template has many variations: various colors, styles, layouts, tools, features, etc. The developers have built the code necessary to switch between these variations into the template.
A custom-designed website already includes your website content, style, layout, tools, etc. For example, with a custom-designed template, there is no need for code rendering color variations, such as blue verses pink or green or red. You do not have to make these decisions with a custom-designed template because the design is already set in stone. As a result, the webpage will be faster.
If you are hiring a website design company, ask the question “Are you creating a custom template for my website or are you purchasing a template and customizing it?” Don’t make assumptions: ask! The answer will help you choose wisely because there really will be a difference in website speed.”
Chris Anderson
-
Minimise all HTTP requests – “Around 80 per cent of a site’s load time is due to the loading of:
- Images
- Style sheets
- Scripts
- Other page components
Each of these elements can require a separate HTTP request, prolonging the page’s loading time.
You can reduce the number of such requests through your browser. Use Google Chrome’s developer tool to see how many HTTP requests your site is making:
- Right click on the page
- Click ‘Inspect’
- Click ‘Network’ tab (If you can’t see the tab, consider expanding Developer Tools sidebar)
- The ‘Name’, ‘Size’, and ‘Time’ shows the corresponding details of the files on the page
- Pay particular attention to the ‘Time’ since this shows how long it takes to load a file
- Down on the left corner is the number of total requests your site makes
You can now check and remove the files not necessary for your site’s loading. Otherwise, you may combine some of the files instead.”
Felix Michael
Lazy Loading Technique
– “One of the techniques we use here at Web Choice for speeding up websites is called Lazy Loading Technique also called Asynchronous Loading which will help images to load only when pages are scrolled down.
Jeremy Wagner who contributes to Webfundamentals says this:
The portion of images and video in the typical payload of a website can be significant. Unfortunately, project stakeholders may be unwilling to cut any media resources from their existing applications. Such impasses are frustrating, especially when all parties involved want to improve site performance, but can’t agree on how to get there. Fortunately, lazy loading is a solution that lowers initial page payload and load time, but doesn’t skimp on content.
Read his full article here
If you are using WordPress, Joomla, or Drupal- most of the SEO plugins and extensions may already have Lazyloading integrated into it. If you are using a bespoke solution, your web developer can use scripts like this.”
Chris Williams
Write Smarter CSS/SCSS/SASS
– “Lots of designers / developers talk about compressing CSS files into one document (and for good reason, that helps with page load), but very few people talk about being smarter with how those files are written BEFORE they are combined together
Too often do we see hyper-specific CSS sheets that are 8 selectors deep before their property is rendered, or the shameful, but sometimes necessary evil “!important” tag contained within your stylesheets. As website professionals, we can’t just rely on compression algorithms and hope that processors and internet speeds keep increasing. We need a fundamental shift in how CSS is written.
So what am I actually talking about?
When developers are writing the CSS for a site, many will be using a framework which contains some ground-rules to get the site looking good right away. The problem with these is that they are often rammed full of very specific selectors which can make it difficult to change how some elements look. Or worse still, they use 1 variable which is used in hundreds of places when you might only want to change a colour/size in one location.
This can lead to creating classes like: header > nav > .top-nav > ul > li > a > span.primary{ your classes }
What we really want to do is think about how we can potentially reduce those very specific selectors down to something more manageable, as well as strip away the fluff we don’t need. It’s not too hard to see a world where, with a bit more planning and mindfulness of how we write code, that we see something like: nav > ul > span.primary{ your classes }
CSS preprocessors are partly to blame for this as we often see neatly written code within a SCSS document, but rarely bother to check the final output to see if it makes any sense at all, often leaving hundreds of unused classes that have been generated by the final output.
How would this help your page load speed?
Being more careful about how CSS selectors are used within preprocessors (and just standard CSS code, too) will help in two ways:
- The File Size Will Be Smaller – the first and most obvious point is that we’re generating less classes, less code, and thus a smaller document. It may only save you a few KBs on a big project, maybe just a few bytes on a smaller one, but these add up over time in a web project to create a better, faster user experience.
- Faster Render Time – not only will your documents load faster (see above) but individual browsers will also be able to render your pages faster. Without having to go down hundreds of selectors and find the most !important !important!!! class, computers, phones and browsers will have an easier time painting your site.
- Manageability – ok so this isn’t load-speed related specifically, but a smaller code base makes it more manageable, easier to review and edit, and ultimately nicer to work with.
Concluding, our final goal is to get our sites looking exactly as we want, loading as quickly as possible, and providing a good user experience. Just shaving off a few selectors within code can make all the difference in the world.”
Chris Scheler
Avoid Using an Image When You Can
– “Avoid using an image as a decorative element if you can. Before using an image, be sure to consider whether or not you can accomplish the same result with CSS. In most cases, with CSS, the file size will be smaller and visually, the element will appear to be more crisp on screen. One example would be styling buttons, backgrounds and shapes with CSS instead of using an image.
Of course, there are many situations where using an image is appropriate, so use your best judgment to accomplish the desired result. Also, make sure you keep accessibility in mind when using images.”
Dustin Nay
Optimize DNS Options
– “An often overlooked aspect of site speed optimization is your Domain Name Settings (DNS). If you already own a domain (and maybe a website too), you may know where and how to do this. If not, I’ll try to give some instruction on how.
First: what are you telling me to do? There are two main types of DNS records used to tell a site visitor’s browser where to go to find your website. 1) the A record. An A record identifies the IP address for the server which hosts your website, and 2) a CNAME identifies a domain to lookup, which will take the site visitor to a URL, which will then redirect their request to your website.
Which one is faster? Well, the A record of course. There are legitimate reasons to use a CNAME, such as on shared hosting where the hosting company might move your site to a different server without telling you, and then your website would be down until you updated your A record. But for the most part, that is a rare occurrence: it has only happened to me once in 10 years, and my team corrected the problem within minutes.
Generally, using an A record will be the best option as it speeds up your load time. Sometimes this only saves a few milliseconds, but as you’ll find while optimizing your website, every single millisecond adds up quickly.
The most common way people do this is by using a CNAME for the “www” version of their website, and then they set the “www” version of the site to be the live version. They then redirect all other variations to that “www” version. The problem here is that even if a site visitor goes to their naked domain (e.g. mydomain.com, not www.mydomain.com), the site visitor is then redirected to “www” which goes through a CNAME and then finally redirects them back to the website. This all happens in milliseconds and you don’t see it happening generally, but understanding what is going on is important to speeding things up.
All you need to do to change this is to delete your CNAME for “www” and replace it with an A record directing people straight to your server’s IP address, rather than to a redirect (e.g. myhostingplan.hostingcompany.com, etc.).
I share this tip with this word of caution: if your hosting plan is shared hosting (which includes most managed WordPress hosting providers such as WP Engine), then you’ll want to keep a close eye on this, as they sometimes move servers around without telling you. The best way to do stay on top of this is to use a monitoring service such as Uptime Robot, which will send you a text message if your website goes down.
If you are just building your website for the first time and have not already built a lot of backlinks to your website, I recommend starting with the naked domain, not “www” sub-domain. This is sometimes counter-intuitive, as a lot of customers are so used to that, they think they still need that prefix in order to access a website (just make sure it redirects properly!). Not having that extra sub-domain simplifies things for you.”
Joanne Somerville
Configure your Expires Headers
– “You’ve probably heard about browser cache, so in other words when a user visits your website, the website files are stored on their computer so that your website loads faster for them on their next visit. What is not so well known is that the file header contains an expiration date that controls how long those files are stored on their computer.
Constantly downloading the same files when they are unchanged wastes precious load time, so Expires Headers not only reduce the load of downloads from the server, but also the number of HTTP requests for the server.
Expires Headers obviously won’t improve page speed for first time visitors, who will have to download all the files for the first time, but using them will definitely help decrease load times for returning visitors.
Expires headers can be set for specific files or even file types, so when the browser comes to the website, it can see the last time those were downloaded. If this was recent then it will display them from the cache. If the visitor hasn’t visited the site for a while, it will download the newest version from the web server.
Usually set to 24 hours by default, you can set the expiration date so that it doesn’t impact your server and page load time. The idea is to set late expiry times for items that don’t change on your website (logo, colours etc) and set short expiry times for things that change regularly.”
Jessie Bacani
Remove Redundant Code (particularly in the back-end)
– “This tip mostly applies to multi-language web applications that share back-end code. It could be done as one single package with each language or country as one module in the package. Each module could have the same code with the other modules like product listings and user session handling.
Let’s look at the products. Each localisation, a country or language, might have a different set of product attributes. Say in the US, a product could be using UPC (Universal Product Code) code as unique code and in Japan, it could be using JAN (Japanese Article Numbering). But both countries use the same core set of attributes: product name, product description, dimensions, weight, and price. Instead of creating two separate back-end codes for both US and Japan localisations, we can create a common code for the two, say base products. The base products could have its own module. Each localisation will then inherit the base product module and add their own unique set of product attributes.
What happens now is there is the base products module, the US products module, the Japan products module. Modifying the base products module is done only once, no matter how many localisations are there. Redundant code is now lessened. If you’re using compiled languages like C#, you’ll appreciate this improvement more. Each module is a DLL file loaded in memory. As the site gets bigger, you’ll notice a hit in performance or page loading speed. Removing redundant code that way is very helpful.”
Ashley N Cameron
Conditionally Enqueue Styles and Scripts
– “In addition to writing code that is clean and efficient, one way to optimize and speed up your WordPress website is by conditionally serving scripts and styles only when needed on a page. WordPress uses wp_enqueue_style and wp_enqueue_script to load your styles and scripts of your website for the best performance.
Let’s look at an example of how to enqueue scripts and styles conditionally in your WordPress theme functions.php. Say you have a Fancybox pop-up that only needs to be on a specific template page.
The following code shows how to write an enqueue function in your functions.php to load global scripts & styles (bootstrap & theme css) with a condition for enqueuing Fancybox only on the Gallery template page.
https://github.com/ashleycam3ron/functions/blob/master/wp_enqueue_scripts2.php
WordPress offers an extensive list of conditional tags to load styles and scripts anywhere – pages, posts, categories, archives, etc and as specific to the ID number. Here’s the full list of tags:
Suzanne Bird-Harris
Serve Your Media from Amazon S3
– “With our appetite for video increasing all the time, and our smartphones taking higher and higher resolution pictures, the media we use on our websites is taking up more and more space. Worse, it uses much more bandwidth for display and streaming, and that can bring site speed to a screeching halt with even the most minimal traffic.
The best way to avoid slowing down your site is to serve your media from servers built for media storage and streaming. I use and recommend an Amazon S3 account. You can’t beat the pricing, and serving images, video, PDFs and other media from your S3 account relieves your hosting account of this heavy load.
Create your account and then upload your media files to it. Use the URL generated for each item in your posts and pages, video plugins — pretty much anywhere you’d use a media URL.
If you want to get really efficient, and your site is a WordPress site, use a plugin like WP Media Offload to store your entire media library in your S3 account — automatically. The beauty of plugins like this is that your media library looks and functions the same as before, while the plugin actually moves and serves everything to and from your S3 account in the background.
Another benefit to using Amazon S3 is the increased security options available there. So all those PDFs and videos your membership site offers? They can be secured such that only your members can access them — even if a member shares the URL with a non-member. Sweet!”
Mary Putnam
Reduce Impact of Javascript on the Critical Rendering Path
– “With speed of web page delivery becoming more and more critical, you must pursue all options to minimize the impact of technologies used to display pages. Javascript is one of these technologies.
Using Google Speed test you can parse your webpage to review issues with JavaScript. For now, let’s focus on critical request chain and render blocking issues. Once you identify Javascript issues, you first want to define your critical assets and load them as early as possible. Then decide to eliminate, defer or load async non critical assets.
Critical Request Chains
This has to do with how many directories the code must traverse to fetch and execute. This is an easy solution to implement. Bear in mind you have to update the directories and all pages that point to the code.
EX:
/scripts/videos/videoscript.js
Vs
/scripts/videoscript.js [Better]Render Blocking Scripts
When Javascrpt is used, it actually blocks the parsing of the HTML document. The main thing you have to understand is that during script fetch and script execution; nothing else is being handled. Even when you have minified the code, it still has to be fetched and executed.
Eliminate Scripts that are not Necessary
Many developers load Javascript libraries which contain code not used for the current web page. The entire library will be parsed and compiled. Of course this wastes precious milliseconds of time to get your site to the First Contentful Paint.
In order to enhance page speed loading you will want to groom your scripts to eliminate calls that are not used on the page. Easy Peasy…
Run the Javascript using the Async Attribute
Using the async attribute is super helpful if you are using externally located script files. The result will allow html code to continue parsing, while the script is being fetched. The parsing will stop again as the script executes. Simply add the async attribute in your code.
Run the Javascript using the Defer Attribute
Using the defer attribute gives you the ability to continue parsing during script fetch, just like async. Additionally, it allows you to defer script execution once the HTML is fully parsed. When you defer parsing you want to be sure that the asset is not critical to a function of the webpage. Keep in mind not all browsers utilize the defer attribute.
When to use these attributes depends heavily on how they are used in the HTML code. One strategy is to place all Javascript at the end of your document. This will essentially defer parsing of the Javascript to the last step. This can be problematic when critical assets are needed for content display. Evaluate the wisdom of pulling critical assets and running them inline as needed.”
Linda Lovero-Waterhouse
Host Videos Externally
– “All the gurus are saying videos are really hot now and that everyone should be producing more videos. What they don’t tell you is, where should you be putting these videos so that users aren’t getting frustrated watching a frozen scene or a rotating circle?
You might think that it’s easiest to have everything on your website. After all, that’s where you already store your ebooks, whitepapers, cheat sheets and images, right? But although your website is a great place to store these resources, for most of us, we should take the extra step of uploading our videos to an external hosting platform and then embed them on our site.
There are a number of reasons why we should do this. First, most of us have our sites hosted on a shared server. Shared servers are cost effective, but they have limits on the size of our uploaded files, limits on the amount that we can store on the server, and a limited amount of bandwidth. If multiple people were watching your video at the same time, chances are they would be watching a lot of frozen video and would probably go to a different site.
So what’s the alternative? Hosting the video on an external platform such as YouTube, Vimeo or Wistia and then embedding it on your site.
YouTube:
The biggest benefit to using YouTube is that it is the second largest search engine after Google (and owned by Google). This means that your video has a higher chance of being found so you can reach a larger audience. It might even go viral!
Vimeo:
Vimeo is generally considered to be an “upgraded” version of YouTube. Its video player has a nicer look than YouTube’s and the Pro version has some privacy settings to make it nearly impossible for someone to download your video and then re-distribute it as their own. It has a smaller audience than YouTube, so your video will not have as broad a reach.
Wistia:
Many people are discovering that Wistia is great to use if your main focus is marketing. People don’t usually go to Wistia to search for content, so it’s not as easy for people to stumble across your videos. However, it has excellent analytics so you know exactly how users are interacting with your videos. It also has a customizable player so it will look less generic and can match your branding. The free version allows only three videos, however.
User experience is greatly enhanced by fast websites and one of the best ways to improve your site’s delivery of video is by hosting them externally. Define your priorities for your videos and pick the platform that can help you accomplish your goals.”
Praveen Kumar
Use SPA to Improve User Experience
– “Single Page Applications are becoming more popular now-a-days. There are so many good reasons why a SPA will be better than MPA in terms of making the overall user experience much faster and seamless. SPA is an evolution of the MPA+AJAX design pattern, where the only core page is generated on the server and all UI is rendered by browser based JavaScript code.
With the advent of AJAX, web apps started to refresh only the relevant portion of the page when a user submits new data or requests. For example, if a user selects county = Cornwall, then the web app can immediately use an AJAX request to validate whether the entered post code is valid for the county of Cornwall. However, once the user submits a form typically the web app takes the user to a new HTML page.
– Some or most of the data validation activity can occur on the client.
– The MVC implementation is on the server.SPA are quick, as the majority of the resources they use (HTML / CSS / JavaScript) are only loaded once throughout the user session. The only thing that is transferred and changed after user activities are just data in the form of JSON.
So this improves user experience because the view is already loaded locally and the data will be asynchronously loaded in the background from the server. Even during development, you can reuse the same back-end API for web application as well as native mobile applications that rely on API based flow.
Another advantage is leveraging the use of Offline & Caching. SPAs are more efficient in caching any local storage. It works as follows: a web application sends just a single reflex, collects the required data, and can function even offline at that point.”
Chris McMahon
Strip the Cruft from your Theme
– “One of the strengths of WordPress is the robust open source support that provides so many free plugins and themes for anyone to use. It can also be one of it’s weaknesses.
Most popular themes (free & commercial) become popular because they can do so much for so many. That comes with the cost of having a theme that can do way more than you need it to.
When I start a new project I always begin with an extremely stripped down theme that is nothing but the very basic template files and a few lines of code to remove sections of WordPress my clients very rarely need. I can then begin to add only the functionality their site will need, usually limiting it to only the pages or sections that will need it.
This greatly improves load time of the user facing pages, as well as keeping the admin section loading fast and without anything the client wouldn’t need.
I also find that I can build a site to the client’s specifications faster from this blank slate than by modifying a theme they have chosen, but want to add functionality or design changes to, saving them time and money.”
Lawrence Harmer
Choose Your Web Host Wisely
– “The web host you use greatly affects the load speed of your site. Each host houses your site on a server and the quality of that server dictates how fast your site loads. WordPress is the leading website development platform due to its high level of customisation and functionality. But all the bells and whistles require storage space, so basic hosting won’t cut it. You need a server that’s optimised and has enough space for the platform you’re using.
Think of a server like a shop, the bigger your shop is, the more people you can get through the doors to make a purchase. If your shop (or server) is too small, it gets crowded, people queue up, and they have to wait to buy.
And people don’t like to wait. In fact, 40% of people abandon a website that takes more than 3 seconds to load. A faster site means a better user experience, which in turn, boosts your ranking too. Keep your traffic moving and people buying with an efficient server.
You also need a server that’s local to your users to ensure your site loads as quickly as possible. If your business is European based, you need an EU server so your site loads quickly and you’re GDPR-compliant. If you have international traffic, you may need to consider a Content Delivery Network (CDN) to put your information closer to your customers and therefore, optimise your site speed.
So choosing the right web host is an important step in improving your site speed. What Say The Experts published an article recently outlining some possible hosts, their pros and cons. Also, if you’re a responsible business that’s trying to do your bit for sustainability, improving your site speed doesn’t have to be at the expense of the environment. Some web hosts offer eco-friendly web hosting, where servers are powered by 100% renewable energy.
The choice is yours, but choose wisely!”