WebPage Performance Tuning
WordPress Performance Tuning is like WordPress SEO, an anointed discipline akin to Alchemy – complex practices subject to many sub-disciplines. As a result, three WordPress performance experts agree [ Adam Connel at BloggingWizrds, TomDupuis at Online Media, and Staff at WPBuffs ] that there are a number of factors that can impact your website’s performance beyond the simple choice of performance optimizing plugins. As we shall see Performance tuning is a multi-faceted discipline
But it is also important to note the topic of this review – WebPage Performance Tuning versus Website Performance Tuning. The reason for the distinction is that many of the tools and techniques used to optimize website performance require specific webpage optimizations. But first, let us get a reading of the website performance our test website , Pixoftoronto.com. The page chosen for the speed test, is crammed with medium to large scale images and backgrounds. The testing tool is Gtmetrix.com, a free tool that provides a wealth of information about a webpage’s performance.
As you can see Gtmetrix provides a wealth of page performance info that turns out to be vital in tuning both your webpage and the overall website. There are 5 Gtmetrix tabs that allow website owners to trace caching strategies, image and media optimizations, minifying HTML, CSS, and JavaScript code plus deferral and lazy loading techniques among an array of page optimizing choices, In sum, WordPress Performance optimization can quickly become a tricky business. So what is the benefits of rigorous performance tuning?
Why Tune?
There is growing agreement on 3 key factors in website success – an attractive brand with supporting service strategy, well designed messaging of the brand + service strategy, and plus fast and responsive website delivery to clients. The benefits of optimizing page speed in Web development now stands on equal footing with brand/content marketing and consistent SEO messaging:
- Site speed plays a critical role in conversions and website success. As seen in the slides below 50% or more visitor will either leave a website when load time exceeds 3 second and/or a whopping 79% are likely to not return in the future;
- On June 9, 2018 Google added ranking penalties on slow mobile websites to those already imposed on desktops having slow response times; Website speed and performance became a ranking factor like security provisions are now;
- Fast response time creates positive impressions;
- The faster your pages load, the more time your users will spend on your website reducing the bounce rate;
- Site speed optimization will help boost your SEO efforts as Google and other site crawlers will scan more of your pages;
- If your website is faster than your competitors’, you win!
The following infographics from Neil Patel/Kissmetrics and Hubspot marketing show the many ways in which website speed and performance matters in the Web marketplace.
As can be seen from the infographic, Website Speed is as important as Content Branding and SEO Styling in achieving conversions and sales. Reviews from WPBeginner and KeyCDN help users understand the performance challenges and how to resolve them. But surprise, surprise – Content Marketing’s innovative pages and SEO inspired styling are working directly against better page speed and performance. That is the underlying story behind ever increasing web page loads which profoundly impact website performance.
Web Page Loads
Content Marketing and SEO styling do attract and help retain customers; but look at what this Oct 2018 report from KeyCDN tells us about the growth in average web page size over a 6 year period :
In just 6 years the average web page load increased by more than 3 times from 702KB/page to 2332KB/page and by the time the report was written in 2018 the average had increased nearly to 3000KB/page. By 2020, HTTPArchive.org was reporting web page size peaking at 4000KB/page.
But even more taxing was the change in the composition of the average payload. KeyCDN shows the 2010 payload by type:
But watch what happens in 10 years on the Web. The latest webpage load as reported by WPRocket Blog in Jan 2020. has brought about profound changes
First consider the total webpage size is up to 4132KB and 2/3rds of that is due to video pages which was just part of Other at 22KB in 2010. Radware confirms this trend tracking the performance of the top 100 eCommerce sites . The trend is to more complex, heavier webpages. The breakout of webpage load growth from 2010 to 2020 is imposing:
- Image usage doubled from 416KB/webpage to 861KB;
- JavaScript usage tripled from 113KB/webpage to 369KB;
- HTML dropped slightly from 34KB/webpage to 30KB;
- CSS usage doubled from 25KB/webpage to 52KB
- But Font usage ballooned to 105KB/webpage from 2KB in 2010;
- And Video usage skyrocketed from less than 22KB/webpage to 2735KB.
The major need is to trim video especially on mobile devices; then optimize images, CSS and JavaScripts. But as usage history shows, the very strategy fr optimizing website performance is changing too. Hence, consistently measuring website performance is essential for tuning optimization strategy over time.
Measuring Performance
Given the complexity, changing composition, and growing load of webpages, the question is how do you measure page performance. Two approaches have come to the fore. First, there are detailed Webpage Performance metrics that guide how to optimize your webpages. Second, there are broader Website Key Performance Indicators which tell how well your overall website is performing. Let us examine Website KPIs as they help to identify your plans for overall overall website improvements – i.e shaping webpage optimizations.
4 levels of Web KPIs are recommended by consultants :
- Audience Measures delineate key indicators:
- real visitors vs bot scanners or hackers seeking illegal access;
- new vs returning visitors including frequency and duration of visits
- bounce rate – no.of pages visited, duration and page spread [related pages visited],etc.
- Traffic Sources – origin of visitors including organic direct connect, referral cross links, marketing campaigns, paid ads, social media links. Obtaining this data often requires privacy invasive use of cookies and other access method
- Measure Conversions – product/service scans, signups for news letters /bulletins, info downloads, order cart activity including buys or cancels, warranty/support requests, etc;
- Website Overall measures of performance;
- track your website’s uptime and the operational error rate of your website apps;
- measure and record app response time profiles;
- do biannual assessment of web delivery costs versus conversions and sales.
- adjust offerings and delivery accordingly.
The use of cookies to gather Website KPIs has an intrusive downside, Cookies are sections of data and code that reside on websites you visit that store away both simple, inocuous usage data and unauthorized invasive info about visitors and The use of cookies often results in collecting & gather unauthorized information about users and their browsing actions and habits. There are 7 levels of cookies of increasing intrusiveness that have been subject to growing limitations especially in Europe and it GDPR regulations. Web owners and developers will have increasing limitations on what cookies can be use on their websites to gather KPI data. CookieServe.com will check for cookies on your website and shows how to manually remove them in 3 popular browsers.
Meanwhile, here is a list of cookies [sources makeuseof.com and Adrush]:
- Session cookies track user choices such as cart selections and form fills during session. They should expire when you leave the website; but do expire and are removed at browser closing;
- 1st party or persistent cookies are inserted by the visited website and stored beyond the browser close. They have a mandated maximum 1 year life, and can track you by recording & reporting info about your browsing habits for the entire time that they are active;
- 3rd party or tracking cookies are set by domains not directly visited by the user. This is triggered by ads, chatbots, social plugins, or notifiers inserted by. 3rd party tracking cookies can trace and report your your browsing history, online behavior, demographics, spending habits etc; By 2021, all the major browsers will allow users to remove them. But site owners allied with 3rd party domains can still solicit installing them.
- Secure cookie – are associated with HTTPS transactions, and have a flag set such they can only be read by secure connections. With Chrome 52 and Firefox 52 HTTP websites cannot set secure cookies protecting against deliberate disruption.
- Flash or Zombie cookies are set by Flash ads or interactions and they can reord and report your browsing habits and profile while active. They are hard to remove because the 3rdpart Flash bot has the ability to replace deleted cookies – hence the “zombie” name. Adobe is removing support for the Flash engine at the end of 2020.
Clearly use of cookies and the invasion of users information privacy has become an increasingly controversial topic. Europe’s GDPR initiative has lead the way and even in North America, the justification of cookies for providing valuable KPI info for website owners has become controversialt
Now the standard tool[55% marketshare ] used to do these KPI measures is Google Analytics, a freemium Google service. But there is a trade-off with using Google Analytics. Lots of 3rdparty tools [free and premium] make setting up and extracting information from Google Analytics possible but by no means easy for two reasons – first, Google is constantly changing its rules of processing ; and second, Google is not fully GDPR compliant and is engaged in running compliance skirmishes with the European Union.
The result is that some users/visitors do not want their actions traced/tracked by Google. because despite the fact that Google insists the their data is anonymized, third parties buy Google data to match it with specific consumers. Also both end users and marketers are increasingly leery of using Google because the company is foisting privacy control work on consumers and marketers..
Fortunately there are available diverse alternatives as proposed by the SearchEngineJournal. For example, Clicky has a wide array of services and links with WordPress, Drupal and Joomla. Like wise Statcounter is available as a WordPress plugin.
Fortunately there are benign sources of broad KPI data. For example, the KPI page from the free WP Statistics plugin:
There is a wide choice of freemium WordPress Analytics plugins that are easy to setup and use with reduced privacy concerns.
Measuring and Tuning Webpage Performance
Now we come to the heart of webpage tuning – using the many free sources of webpage tuning to come up with a plan to optimize web page load times. The good news is that there are a number of free webpage performance measuring tools which also provide detailed analyses of their readings. In addition there are excellent reviews of webpage metrics explaining what they measure and how they influence tuning.
Lets start with a list of the top webpage metrics and their tuning insights:
- TTFB -Time to First Byte– is the time the first byte of each file reaches the user’s browser after a server connection has been established. Use this measure to help make tuning decisions:
- if a CDN-Content Delivery Network is needed performance will vary with the length of the user-to-server connection. CDN has copies of your website’s static media, image, and script files at locations spread across the world- reducing the download time in these locales;
- minifying CSS, JS, and HTML files to speed loading;
- combining CSS and script files to reduce HTTP requests;
- separate and cache static files from dynamic code for speed improvements;
- TTT – Time To Title – occurs before TTI when the webpage title first appears in the user’s browser tab. It reassures users a connection to the website has been made;
- TTI – Time To Interactive measures when users can start interacting with items on top of the page fold [click on links, fill in text fields, scroll, etc]. The page is still loading but users can start interacting with the website but with no logo, no menu, no marketing bricks, etc. Instead the top 100 eCommerce websites rely on SPA, PWA [JSPWA or WordPress} and AMP to achieve blazing speeds. This marks a transition to TTI not full Page Load as Headless PWA/AMP powered websites lead the performance race.
- use preload in script. font, and CSS/style files to allow browsers to order prefetch for speed;
- also minify and compress CSS, JS, etc;
- remove media, scripts and styling not used above the fold line to footer code;
- optimize/compress media files – images, videos, pdfs, icons, graphics;
- FCP – First Content Paint measures point where browsers start displaying pieces of content like text or hero images, The emphasis is again on above the fold line web components and server push of HTTP2-like packages – bleeding edge;
- DNSLT – DNS Lookup Time measures how long your domain name server takes to lookup website URLs.. This time should be 50msec or less,
- HTTP Requests -Web Server gets of Media, CSS. Scripts, and other Web Objects for webpage display;
- Screening webpages for unused plugins and other resources;
- Request management means script and styling combinations;
- Server push using promises to combine loads and change timings;
- TTLB – Time To Last Byte represents full webpage load time.
There are a number of free Website Performance tools which will be able to not only report on webpage metrics but also provide targeted recommendations on how to improve webpage performance based on the above metrics.
Webpage Performance Measurement Tools
Fortunately, there is a rich set of free tools to do detailed website performance measurements – see this list. We have done a detailed analysis of the best free tools for webpage testing:
A big advanatge of PageSpeed insights is that it is from Google so it has mobile as well as desktop results. But PageSpeed Insights is sprawling with links to other Google website measures like Google Webmaster Central and Lighthouse. Unlike other tools, users are hunting and clicking around for key data, charts, and recommendations:
Although the intention is right, the implementation is awkward.
The only thing missing from free Pingdom is mobile website performance results. But Pingdom allows users to specify where the test are done in the world and allows for easy repeat tests:
Here we see the summary performance results [an impressive sub 1 second load time and only 33 page requests and a lean 1.34MB page load of the gallery aided by lazy loading of the images as users scroll down the page]. And immediately blow there are suggested improvements to the page.
But for developers there are the loading charts for all the components – this reveals DNSLT, TTFP, TTI and other critical metrics used in page optimization:
These Pingdom charts may be Greek to the average website owner, but they are vital to Web developers doing the webpage tunings.
WebPageTest is crammed with charts and easily accessed tips – just click on the measure boxes in the upper right; However, like Pingdom, WebPageTest lacks mobile display benchmarking.
This tool is really geared for CDN and international website testing. Users can pick up to simultaneous web test locations for a complete, worldwide picture of how well your website is performing Note how PicsofUSA fails most of the CDN tests because it is currently only target NortAmerican users. But given the Gtranslate plugin that mission may change – and MicroPageTest should provide the insights on how to optimize for an international audience.
GTmetrix free version provides data, timeline charts and advisories for webpage performance:
GTmetrix has tips and tutorial associated with every data result and chart. Each of the page load timings in the above screenshot has a timely tutorial. And GTmetrix Pro adds 3 major features to the program : 1)continuous following of chosen webpages; 2)tracking of more webpages from multiple locations in the world; 3)Developer API allows tracking different display sizes including mobile and tablet displays. The price of the Pro version stretches from $14.95/month to $149.50. Bu as this performance tuning video shows the need for the pro version is not required for most webpage optimization
Uptrends is a paid performance monitoring tool with constant daily monitoring from multiple world-wide locations and for mobile through a variety of device sizes.
Yellow Lab Tools provides webpage results for desktop, tablet and mobile views but does not allow configuration of testing browser or locatiom. Nonetheless, Yellow Lab Tools does provide graphic results and tips
Just click on any metric reading and Yellow Lab pops a full page avisory of what actions might be taken. Its tabletand mobile advisories are valuable.
As we have seen, free webpage tools often have Pro versions that add overall website performance monitoring to their feature sets so moving up to broad website performance tuning. But for webpage tuning users have a rich set of tools to identify where a webpage is underperforming. The data, charts and advisories are that good. So now the problem is to identify the WordPress performance tunings to fix any speed problem,
WordPress Optimizing Tools
WordPress has become the most popular CMS-Content Management System because it easy to setup and use. One could get your message out and provide a range of services with mostly DIY effort, minimal-coding-required, and low cost. But the Web has changed substantially. There are now fast growing competitors offering competitive DIY design and layout tools with cloud based backend services for backup, security protection, performance and program/add-on updates. As a result, smaller rivals like Shopify, SquareSpace and Wix are growing faster than WordPress on an annual basis. So now WordPress users need to deliver not only attractive services but also faster and more responsive websites.
However, just as important, the Web has changed from simple and benign, to much more complex and infested with malicious hackers seeking criminal advantage with data breeches, huge DDoS- Direct Denial of Service bot swarm attacks, and ransomware. These hacks are no longer stunts but growing criminal malfeasance. The result – delivering performance optimized and secure backend operations be come a continuing priority. Aand as we shall see optimizing performance also delivers more secure websites.
At last we arrive at the core of webpage performance tuning. As part part of an overall Website Performance Strategy, our performance goals should line up with that of the 100 Top eCommerce Websites, TTI -Time To Interaction on the webpage of 2 seconds or faster. TTLB – Time To Last Byte or full page load of 4-5 seconds. Ability to deliver attractive content in the form of full page hero images and headlines in 2 seconds or less. Deliver full page 4K or video above the fold-line in 2 seconds or less. Ability to deliver Pop-up ads or Slide-in sub menus in 2 seconds or less after TTI. In sum, content marketers and website designers are looking for delivery of their targeted messaging in 2-5 seconds or better – and all their subsequent operations will also perform at this highly responsive rate.
But the essence in winning the website speed wars is to make sure you have a responsive and speedy website before hiring on some performance plugins. This is the consensus advice among reviewers of webpage performance tuning – WPBeginners, WPBuffs and Indie Systems. Think of performance tuning as a “who dunnit” detective case with developers peeling back the layers of evidence on how well your website is performing. The first emphasis is on static processes that can be done
- Ensure your web hosting service can support your website workload .Typically shared hosting for 40,000 visitors/month with SSL and CDN costs $10-15/month. Managed Hosting for 40,000 visitors/month with SSL, CDN, auto backup & website security, auto updates of plugins, auto-migrations + staging, auto DB optimization, Google Gloud location – all of this for managed hosting typically costs $60/month.
- Verify that your hosting service can deliver in its 30 day moneyback warranty period by migrating a typical website and testing key webpages. All-in-one WP Migration or Duplicator Pro can do the migration and testing with GTMetrix in half-a-day. If a migration is not possible, use a simple “Hello World” test and the response time should be 3 seconds or less with less than 30 http requests and less than 250KB page load in GTmetrix.
- Identify the static processes that can be applied on your website at anytime. use the Page Weight chart to act as a guide to what should be optimized.
There are several Video compressors that provide either lossy or lossless compression. much like image compression routines. Most experts recommend that video should be optimized before uploading to the WP Media Library or to YouTube/Vimeo. Here are some of the compression options available in in the better video compressors listed below:
- Free Handbrake supports many video,containers, video and audio codecs, bit-rate+ screen-size options, video filters with lossy or lossless settings, and batch processing options;
- Wondershare UniConverter supports lossy and lossless compression with many video and audio codecs, bit-rate+ screen-size options. Wondershare has a video editor that allows trimming scenes while adding titling.
- Free Converter is a robust online conversion tool for images, pdfs as well as video – all with choice of lossy or lossless compression. The compression options are very rich with either video width or height options;
- PS2PDF is another amazing conversion swiss army knife with a very capable video converter. Again the options for video compresion include video size, bitrate, fps and audio options.
Yes , YouTube retired its video editor but there are 4 good standins with added compression capabilities. Vimeo has a premium plan that supports video creation, editing and compression. So in both cases, itpays to DIY your video edits and compression. But do not ignore the benefits of both video platform: file size savings, asset protection, sophisticated WP embedding , a robust channel system for to promote related videos, etc.
Image compression routines have a long history with Fireworks and Windows Riot available for at least a decade. But with images being an increasing burden on WP webpages, a number of plugins are available to optimize all newly loaded images plus your existing Media Library images [but mixed support for Nextgen and other special ized image galleries]. Image optimization is a static process that can be done any time before the image
| Platform | Compression | Batches | Formats | Metadata | Other | Price | Platform |
|---|---|---|---|---|---|---|---|
| Caesium Image Compressor – D, O | Lossy/Lossless | Yes | PNG, JPG, JPEG and BMP | choice | preview, resize, comp.slider | free | Windows, online & mobile in beta |
| Compressnow – O | Lossy | Yes | JPG, PNG, GIF | removes | preview, comp.slider | free | Web |
| Compressor.io – O | Lossy/Lossless | No | PNG, JPG, GIF, sVG | freemium choice | 20MB limit resize | freemium | Web |
| ewww-image optimizer – P | Lossy./Lossless | Yes | PNG, GIF, JPG, Pro WEBP | Pro, choice | resize, Pro CDB | freemium | Web |
| Kraken.io – O | Lossy/Lossless | No | PNG, JPG, BMP, GIF | freemium removes | 1MB free, 32MB | freemium $5 to $19/ month | Web |
| Optimizilla – O | Lossy | Yes, 20 | JPEG, PNG | removes | resize, comp.slider | free | Web |
| PNG Gauntlet – D | Lossless | Yes | PNG | none | JPG, GIF,BMP to PNG | free | Windows |
| PNG Optimizer – D | Lossless | No | PNG | removes | JPG, TGA,GIF, BMP to PNG | free | Windows 32 & 64bit |
| Resize Photos – O | Lossy | No | JPG, PNG, GIF. BMP, PSD | removes | resize, preview, comp.slider, sty | free | Web |
| RIOT – D | Lossy/Lossless | Yes | GIF, JPEG, and PNG | choice | preview, resize, comp.slider | free | Windows |
| ShortPixel – p | Lossy, Lossless | Yes, bulk + new images | JPG, PNG, GIF | removes | resize, lazy load, CDN | freemium, free 500 images/mo, $10 for 12k images/mo | Plugin |
| ImageOptim – D | Lossless | Yes | JPEG,PNG, and GIF | removes | free | Mac | |
| JPEG-Optimizer – O | Lossy | No | JPEG only | removes | resize preview | free | Web |
| TinyPNG – O, P | Lossy | Pro for20 pics, bulk for Media Library | JPEG, PNG | choice | resize, Woo+WPML, | freemium, $65/yr to grow5MB to 75MB | Web & Plugin |
| WP-Smush – P | Lossless | Yes bulk +new images | JPEG, PNG, GIF any gallery | none | resize. lazy loading | freemium, 5MB max image free | Plugin |
Here is a list of resources on image compression:
1) The 9 best WordPress Image Compression plugins;
2)Web and desktop 21 best image compression tools;
3)AI-based image optimizations;
4)General guide to image optimizatio
.Attention has to be paid to the fastest growing web loads – videos, images, scripts and the associateding web file requests that take time and may be subject to blockages. The best strategy is to make ensure that best bhat do the performance tunnng toools control these page loading costs.o toeDevelopers have to peel back the layers shared hosting managed Hosting forautoHere is a list of https://www.youtube.com/watch?v=HAZzCAHbgJ4 liespeed and namehero