Q: So how does website performance affects sales for an average online business?
Here are 11 free tips for lowering your website load times:
Step #1: Image Optimization
As a general rule of thumb, larger files take longer to download than smaller files. Web page download time, also known as the Page Load Time depends on the total size of content assets being downloaded from hosting servers to the requesting browser. High-quality bulky images are the largest contributors to web page size, degrading page speed and agitating visitors eagerly waiting for the web page to load.
According to HTTP Archive, as of December 2017, images make up on average 66% of a total webpage’s weight. The following image optimization best-practices go a long way in reducing the negative impact of images on website speed:
Format Selection: Use JPGs when quality is a high priority and image modifications are not required before uploading it. JPGs can take limited processing and modifications before image quality degrades sharply. For images with icons, logos, illustrations, signs, and text, use PNG format. Use GIFs only for small or simple images and avoid BMPs or TIFFs.
Proper Sizing: Save valuable bytes of image payload and match the dimensions (width) of your Web page template. Use browser resizing capabilities to make images responsive by setting fixed width and auto-height instructions.
Compression: Image compression should be a thoughtful tradeoff between image size and quality. For JPGs, a compression of 60-70 percent produces a good balance. For retina screens, increase (JPGs) image size by 150-200 percent, compress by 30-40 percent and scale it down again as per the required dimensions.
Fewer Images: Keep the number of images to an absolute minimum.
Leverage image optimization plugins such as Imagify, ShortPixel Image Optimizer, Optimus WordPress Image Optimizer, WP Smush, TinyPNG, EWWW Image Optimizer Cloud. It’s even better if you go with the ones that compress and optimize images externally, which reduces the load on your own site.
And for more tips check out this in-depth image optimization guide.
Step #2: Optimize CSS Code
Yet, modern websites coded in CSS are better at downloading content from hosting servers to requesting browsers efficiently and accurately. Optimization, therefore, isn’t all about minifying file size. The following best practices ensure a speed-optimized CSS delivery:
Shorthand Coding: Cut down the size of your code by using fewer declarations and operators. Fewer lines of code mean fewer processing cycles and efficient delivery of website files to requesting browsers.
Axe Browser Specific CSS Hacks: CSS is in danger from endlessly complicated browser specific hacks – or correctional declarations as they’re called – adding unnecessary weight to CSS script files. Speed optimized CSS code is both light and simple for servers to process efficiently.
Minify CSS: Almost all website speed monitoring tools give a common suggestion of reducing the weight of CSS code to improve speed. Lightweight and compact code helps to speed up downloading, parsing and execution to drastically reduce page load time.
CSS Delivery Best Practices:
Do not use @import call.
Remove unused CSS.
Do not use CSS in HTML such as H1 and DIV tags.
Use inline small CSS.
Step #3: Minification
However, overindulgence in HTML Minification potentially leads to loss of fidelity of the website code, with user agents taking excessive memory cycles and CPU power in “guessing” the missing resources required to parse HTML files. Monitoring page load performance changes in response to implementing each minification process individually ensure that only the unnecessary code and spaces are deleted.
Step #4: Plugins – Less is More!
Additional website functionality with plugins comes at a price: performance degradation. Unfortunately, webmasters deploy a myriad of plugins to add attractive but often unnecessary features such as gravatar, profile tools, website stats and font tools – some even use 10 different plugins for social media integration. The only benefit here is successfully avoiding manual coding.
Many popular websites carry as much as 80 plugins. Yet, the number is not entirely a concern if the installed plugins are developed well to avoid complex actions and expensive server processing.
Four major areas to look at when it comes to selecting high-quality plugins:
Does it perform complex operations?
Does it load many content assets and scripts?
Does it increase the number of database queries to each page request?
Does it perform requests to external APIs?
If the answer to all these questions is YES, your reaction to the plugin in question should be a huge NO!
Now to the big question, how many plugins is too many?
While there’s no comprehensive answer to this question, limitations are unique to every website and plugin. A lot of WordPress experts recommend not using too many plugins. But many well-performing websites host over 80 plugins, until they install one low-quality plugin that adds half a second to page load time.
Similarly, using 10 plugins for simple and unique tasks is much better than deploying one plugin to perform all of the complex tasks by itself. Exceptions include high-quality plugins by credible developers, such as Yoast WordPress SEO Plugin, All In One SEO Pack and the likes.
Use the following solutions to keep a check on WordPress plugins performance:
Revision management is one of the perks that WordPress has to offer. The CMS automatically keeps track of the content created on the CMS and makes all of it available for future changes.
To the server, this costs unnecessary processing through additional database entries not actually required in the first place. Controlling the number of revisions stored relieves the website core of useless burden.
Writing the following code snippets in the wp-config.php file helps to get around this issue:
define( 'WP_POST_REVISIONS', false );
define( 'WP_POST_REVISIONS', 10 ); // limited to 10 revisions
Step #6: Optimize Databases
WordPress CMS stores posts, comments, pages and other forms of textual and encrypted data within a single database – except for images and videos that are stored in the ‘wp_content’ folder instead. This database gets crowded over time, not only with unnecessary content and post revisions, but also with garbage data.
Garbage content includes:
Comments in the spam queue
Trashed items such as posts and pages
Database optimization revolves around getting rid of garbage data and useless content from cluttered databases, shrinking them in size and making it easier for website hosting servers to fetch requested content efficiently, within minimum processing cycles. This can also involve ensuring that you are using InnoDB for your MySQL database tables, as opposed to MyISAM. Learn how to convert myISAM to InnoDB.
The wp_options table is also often overlooked when it comes to overall WordPress and database performance. Especially on older and large sites, this can be the culprit for slow query times on your site due to autoloaded data that is left behind from third-party plugins and themes. Check out our guide on how to cleanup your wp_options table.
Limit, disable and delete post revisions.
Automatically purge trash by adding the following code in the wp-config.php file:
define('EMPTY_TRASH_DAYS', 10 );
10 is the number of days before garbage data is automatically deleted. Change as appropriate.
Step #7: Compression
According to Google, every day the cyber world sees 99 years of human years wasted due to uncompressed Web content. And although most of the latest Web browsers support content compression capabilities, not every website delivers compressed contents.
Visitors to these bandwidth-hogging websites experience insanely slow interactions with Web pages. Primary reasons for this unfavorable (and mostly unintentional) website behavior include misconfigured hosting servers, Web proxies, old or buggy browsers and antivirus software.
Uncompressed content hurts bandwidth-constrained users receiving the Web content in agonizingly lengthy page load times. Here’s the transcript of a common browser-server communication in delivering uncompressed content:
Browser: Hey, GET me /HeavyWeightChampion.html!
Server: On it! *server skims through the server and finds the file*
Server: There you go, 250 KB of response code.
Browser: Ouch! *end-user sweats, ultimately receiving the requested content in a few tens of seconds*. (Okay, client-server communication is perhaps a bit more formal and less dramatic than the above narrative.)
Most of the problem lies in the way client-server communication goes in the HTML world. HTML files (making almost the entire Web content) includes several redundant code instances. <Tags>, <Alts>, <HTML> and the likes are all the same stuff materializing repeatedly.
Google recommends the following compression tactics to deliver website content efficiently:
Ensure consistency in CSS and HTML code with the following techniques:
Consistent casing – mostly lowercase.
Consistent quoting of HTML tag attributes.
Specify HTML attributes in the same order.
Specify CSS key-value pairs in the same order by alphabetizing them.
Enable GZIP compression. GZIP finds similar strings and code instances, replaces them temporarily with shorter characters. Browsers decompress gzipped files, bringing them back to their original shape.
A few words of caution though:
Do NOT GZIP (already compressed) images, PDF or other binary data.
GZIP data only in the range of 150-1000 bytes in size. The speed of compression must be faster than the time taken in delivering the content uncompressed.
Do NOT compress content for old browsers.
Not following the above recommendations actually increases file size and page load times due to the overhead of compression and decompression.
Enable GZIP compression using W3 Total Cache plugin.
The best way to enable GZIP compression is at the server-level of Apache or Nginx. Check out this GZIP compression guide.
Step #8: Cache
Developers crave simplicity in website design code. Website code easier to create, read and maintain leads to efficient website development processes. This includes using the available code functions frequently to cut short extensive coding for specific website functionality.
However, adding too many extraneous loops and unnecessary code lines increases page rendering times by a few milliseconds. Influx a torrent of website traffic, and the milliseconds compound to plunge page speed well below acceptable standards.
Webmasters can reduce these response times by delivering cached copies of the requested content instead of rendering it repeatedly in response to every single user request that pings their server.
Web cache is the mechanism of temporarily storing copies of web content to satisfy subsequent user requests from the cache database when specific conditions are met. This process reduces the number of client-server round trips taken in delivering (static) website content to requesting browsers.
Website owners can enable caching with the following add-ons and configurations when hosting service providers do not provide server-side caching:
W3 Total Cache
FastCGI Cache for Nginx and Drupal servers.
Along with static cacheable content, websites also host dynamic information containing unique attributes changing regularly for every end-user. Storing cached copies of non-reusable dynamic content, therefore, doesn’t make sense, even though rendering non-cached content is a painstakingly slow process.
This is the art of caching smaller elements of non-cacheable dynamic website content. When Web pages containing static and/or dynamic content are loaded, hosting servers process PHP code and query MySQL databases to fetch the requested content.
These time-and-resource consuming processes are circumvented by delivering the desired output stored as a cached copy.
Fragment caching stores the output of some code blocks that remain unchanged across varied versions of the dynamic content. When the code runs and reaches the code block cached for a predetermined time, the server queries and delivers the cached output of this code instead of executing it repeatedly until the time limit reaches.
The end result is a cache-optimized website content for maximum page speed even for ecommerce and membership-based websites handling intensely dynamic content.
Step #9: Content Delivery Networks (CDN)
CDN is an extension of cache optimization designed to supercharge website performance aimed specifically at globally dispersed web traffic. CDNs consist of a network of servers hosting cached copies of web pages. Internet visitors requesting this information are directed to the nearest server within this network based on their geographic location.
Traditional benefits of CDN including performance boost, high availability, and page rank collectively lift business bottom line.
Step #10: Switch to Managed Hosting!
WordPress essentially democratized the web by empowering citizens of the cyberworld to create their own blogs and launch products and services online with minimal investments. In general, website owners leverage one of the following hosting services to keep their websites up and running:
Free hosting: Favorite to hobbyists.
Shared hosting: Favorite to individuals developing an online business presence at the lowest cost.
Dedicated or managed hosting: Favorite of serious small and midsize firms setting up an online presence.
Collocated hosting: Favorite to large enterprises or government institutions with in-house IT teams to manage websites.
Among these, employing managed for end-to-end website development and management services is the most cost-effective and productive option for maintaining an ultra-high performance website. Features of managed hosting services impacting page speed and website performance include:
Performance optimization – compression, code minification, server-side caching, etc.
Content optimization for performance – image optimization, controlling garbage data, etc.
Search engine optimization.
Regular software updates.
Plugin compatibility and deployment for best performance.
Content delivery networks.
Performance testing and monitoring.
Lightweight and speed optimized servers.
Server and website configuration and maintenance to minimize client-server roundtrips.
Latest versions of PHP and MariaDB
Step #11: WordPress is Faster With PHP 7
With the release of PHP 7 came huge performance gains! So big in fact, that it should be a priority over a lot of the small optimizations you might play around with on your WordPress site. PHP 7 allows the system to execute twice as many requests per second in comparison with the PHP 5.6, at almost half of the latency.
PHP 7.3 could execute almost three times as many transactions (requests) per second as compared to PHP 5.6 🏆
The performance gap between PHP 5.6 and the later versions of PHP are evident.
Conclusion: Website Speed Matters. A lot.
Phew, you’ve made it through the guide! Congratulations and thanks for reading it. We hope you found at least a couple of great bits of advice that you can act upon now!
Last, but not least, if you found this guide helpful please share it with your friends and followers!
👋 Additional New Blogger Resources
These articles will help you avoid the growing pains when it comes to your first blog – enjoy!: