alogo
Main Menu

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:

  1. 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;
  2. 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;
  3. Fast response time creates positive impressions;
  4.  The faster your pages load, the more time your users will spend on your website reducing the bounce rate;
  5. Site speed optimization will help boost your SEO efforts as Google and other site crawlers will scan more of your pages;
  6.  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:

  1. Image usage doubled from 416KB/webpage to  861KB;
  2. JavaScript usage   tripled  from 113KB/webpage  to 369KB;
  3. HTML dropped slightly from 34KB/webpage  to 30KB;
  4. CSS usage doubled from 25KB/webpage to 52KB
  5. But Font usage ballooned to 105KB/webpage from 2KB in 2010;
  6. And Video usage skyrocketed from less than 22KB/webpage to 2735KB.
The growth in video usage was powered  by the move from desktop to mobile platforms as the  primary means of  web browsing .HTTParchive.org also shows that Server Requests/webpage load rose from 58 in 2010 to 85 in 2018 but then dropped to 70 in 2020 as web developers worked religiously to curtail the time penalty costs of server requests.
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 :

  1. 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.
  2.  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
  3.  Measure Conversions – product/service scans, signups for news letters /bulletins, info downloads, order cart activity including buys or cancels, warranty/support requests, etc;
  4. 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.
But gathering some of  these KPIs has become a controversial in Europe and a tarnished practice in North America as we shall see below. Suffice it to say, but for the pandemic diversion,  privacy issues would be at the top of legislative agendas worldwide. As you shall see gathering website KPIs ethically is a tricky business.

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]:

  1. 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;
  2.  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;
  3. 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.
  4. 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.
  5. 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:

  1. 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;
  2. 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;
  3. 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;
  4. 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;
  5. DNSLT – DNS Lookup Time measures how long your domain name server takes to lookup website URLs.. This time should be 50msec or less,
  6. 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;
  7. 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

First, it is important to note that Webpage Performance tools are geared to measuring webpage not website speed and performance.  Second, the same website, PicsofUSA.com., has been used in all our speed tests. PicsofUSA has a logo+menu based header, a hero background image sitting behind a a justified gallery with 48 images of  800×600 pixels average dimensions with lightbox display of full size images. In addition there is the 4 languages supported by the GoTranslate plugin plus footer text. All in all, PicsofUSA presents a challenging speed test:
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 tipsJust 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 

    1. 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.
    2. 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.
    3. 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. 
In general there is a rich set of video compression tools available to web developers – just take a look at the following list of tools –  given the complexity of the task, these tools offer some innovative options. Finally do not ignore the opportunity presented by   YouTube and Vimeo.

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

PlatformCompressionBatchesFormatsMetadataOtherPricePlatform
Caesium Image Compressor – D, OLossy/LosslessYesPNG, JPG, JPEG and BMPchoicepreview, resize,
comp.slider		freeWindows, online & mobile in beta
Compressnow – OLossyYesJPG, PNG, GIFremovespreview, comp.sliderfreeWeb
Compressor.io – OLossy/LosslessNoPNG, JPG, GIF, sVGfreemium choice20MB limit resizefreemiumWeb
ewww-image optimizer – PLossy./LosslessYesPNG, GIF, JPG, Pro WEBPPro, choiceresize, Pro CDBfreemiumWeb
Kraken.io – OLossy/LosslessNoPNG, JPG, BMP, GIFfreemium
removes		1MB free, 32MBfreemium
$5 to $19/ month		Web
Optimizilla – O LossyYes, 20JPEG, PNGremovesresize,
comp.slider		freeWeb
PNG Gauntlet – DLosslessYesPNG none JPG, GIF,BMP to PNGfreeWindows
PNG Optimizer – DLosslessNoPNG removesJPG, TGA,GIF, BMP to PNGfreeWindows 32 & 64bit
Resize Photos – OLossyNoJPG, PNG, GIF. BMP, PSDremovesresize, preview,
comp.slider,
sty		freeWeb
RIOT – DLossy/LosslessYesGIF, JPEG, and PNGchoicepreview, resize, 
comp.slider		freeWindows
ShortPixel – pLossy, LosslessYes, bulk + new imagesJPG, PNG, GIFremovesresize, lazy load, CDN freemium, free 500 images/mo, $10 for 12k images/moPlugin
ImageOptim – DLosslessYesJPEG,PNG, and GIFremoves freeMac
JPEG-Optimizer – OLossyNoJPEG onlyremovesresize previewfreeWeb
TinyPNG – O, PLossyPro for20 pics, bulk for Media LibraryJPEG, PNGchoiceresize, Woo+WPML,freemium,
$65/yr to grow5MB to 75MB

Web & Plugin

WP-Smush – PLosslessYes bulk +new imagesJPEG, 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 

Related posts:

  1. New Surge Performance Plugin
  2. Toronto WordPress Group Mobile Performance Meetup
  3. WebP with WordPress
  4. WordPress Speed Matters – A Free Meetup
  5. Cloudflare Performance Anomaly

We’re a full-stack Web Development shop based  in Toronto ON. From strategy to implementation, we’re here to help make your Website shine.

Facebook-f Twitter Linkedin-in Instagram Dribbble

© 2024 JBSurveyer All Rights Reserved.