Implementing site fixes

We're running Multisite on this domain.
One of the site owners paid to have a review done of their website, and sent it to us to see what could be done to improve the problems in the report.
This is the report they sent:
https://drive.google.com/file/d/1fNDWY767FZe0L2S_JcpF4GBQ-vOzEQ4g/view?usp=sharing

I also did a site checkup for their domain on WPMUDev. Below is the resutls:
https://drive.google.com/file/d/1J38LdSamLkw5St5Ffvp-5bMiqtiZ1ly8/view?usp=sharing

I was wondering if someone might be able to help me make some sense of what I need (or could) do to improve the problems in these reports.

Since this domain is part of our Multisite installation, I'm hoping that anything we can fix for this site will also be fixed on the other network sites (but I'm not sure if this is the case).

I really appreciate any help you can provide. A lot of the things in these reports is above my head.

  • Adam Czajczyk

    Hi Kevin,

    I hope you're well today!

    There are two main "sections" of that report that your client got: "performance" and "seo". Most of the issues can be addressed with our three plugins: Hummingbird, Smush Pro and SmartCrawl.

    Let me start with "performance" part. I'd suggest starting with installing and network-enabling Hummingbird plugin and then on "Network Admin -> Hummingbird Pro -> Dashboard" page set "Asset Optimization" option to "Only Super Admins can configure Asset Optimization".

    This will let you address issues like "render blocking resources" and JS/CSS minification etc. With this setting your client won't be able to "mess around" with it - while it's a great tool it's also easy to break the site so it's better to set that for them.

    You would then want to go to the dashboard of the site in question and on Hummingbird -> Asset Optimization page first let the wizard run, then open the site in a separate browser and browse it for a moment (to let asset optimization "build up") and check if the site's working fine. If yes, you can run performance test again to see if those issues got a bit better now. Afterwards that can also be fine tuned by switching Asset Optimization to "Advanced" mode where you can manually control which JS/CSS files should be minified and/or combined and/or moved to footer and/or deferred/loaded after the page has been loaded. That might take some time and experimenting to find an optimum "balance" between as much optimization as possible and the site not breaking but it's worth the effort.

    Note: that's "per site" configuration so it won't address other sites but other sites can be optimized the same way.

    Then the second step would be to make sure that gzip compression is enabled. That's "per entire multisite" so you don't set it separately for each site; you can do it via "Network Admin -> Hummingbird Pro -> Gzip compression page".

    Next step would be to enable caches. That's another "per multisite" tool: go to "Network Admin -> Hummingbird Pro Caching page" and first enable browser caching there and second enable Page Caching there. For Page Caching I strongly recommend setting "Include logged in users" to "off" and "Clear full cache when post/page is updated" to "on".

    That all together should address most of the "performance type" issues but not - also performance related - images. That's a bit different story and the Smush Pro plugin will help here. That would work "per site" and your client - as an admin - would have access to it.

    Smush will optimize (compress and also resize) images. However, after that a test (e.g. PageSpeed Insights or Hummingbird Performance Test) should be run again. It's possible that some images will still be reported as needing to be "Compressed and resized" even though they were already processed by Smush. This would mean that they actually need to be manually resized. This shows up in cases when an image is physically bigger than it is displayed on site.

    For example: a logo image is displayed on site as 150 x 150 pixels but the image used is in fact 300 x 300 pixels. It is then dynamically resized by browser and that - even though the image was already optimized by Smush - will still trigger the report. Such an image should manually be edited (e.g. with Media Library editor) and resized/cropped to correct size - the same size it's displayed on the site.

    The "SEO" part is a bit different. Our SmartCrawl plugin will come with help but from what I can see the most issues reported are actually related to content more than to "tech aspects" which means that SmartCrawl will provide "tools" but your Client will have to take care of the issues - setting up correct meta data (titles, descriptions, keywoards etc). SmartCrawl adds dedicated settings and additional boxes to post/page editor for that and additionally some analysis so your Client would be able to set that.

    Also, the "backlink" part of the report - that's something that you can't address with the plugin. Backlink is a link from outside to your site (your Client's site in that case) so it's mostly a matter of making site popular enough for people to link into it from their sites/blogs/social media etc. There are other ways of doing that too but it's about "strategy" and "marketing" rather then any "technical issue".

    There is also a "third aspect" of the report which is "mobile" part, where things like Mobile Rendering and Touscreen Readiness are reported. That is related mostly to the theme so making changes/improvements here would require some (maybe even quite serious) customization of the them used by your Clients site. That would probably involve at least a child theme with some custom template files, created specifically with mobile/responsiveness in mind. So, I'd say that's mostly the task for a designer and then developer.

    If you have any follow up/additional questions, let me know please.

    Best regards,
    Adam

    • Kevin

      Hi again Adam,

      I'm going through your steps one at a time - trying to be as careful as I can be. :grimacing:

      On the users site, (https://sunandsoulfitness.com/) I ran the performance test twice as you mentioned. It looks like the only improvements have to do with optimizing images (see attached screen shot). Would installing Smush Pro take care of this?

      I looked at the Asset Optimization section on the users site, but I'm honestly not sure what to do there. If I enabled support on the site would someone be able to take a look at give suggestions?

      Also, I enabled Gzip compression and caching. However, after doing it I noticed that some of the icons on the users site are not showing up anymore (see other screen shot files). I disabled the Gzip compression and caching, but it didn't seem to help. Also, other sites don't seem to be affected (icons are showing OK), so I'm wondering if anything happened during the performance test I ran for the site?

      I went ahead and enabled support access for the site. Would it be possible for someone to take a look and see why the icons are not appearing for this users site anymore (since installing Hummingbird)?

  • Larry Levenson

    Adam, this is a fantastic write-up. Saving it to my GDrive. One of the issues I have with my multisites (3 small ones) is that as your plugins mature, I don't necessarily go back and update settings, improve processes, or generally take advantage of the new goodies baked into the latest releases.

    Your response to Kevin spurs me to walk through the steps you outline, AND revisit all my other WPMU plugins (I use them almost exclusively) to see how I can tweak and improve things. Thanks!
    Larry

  • Predrag Dubajic

    Hi Kevin,

    Let me answer you here instead of as a response to the above question, it's going to be a long answer and easier to read than in that narrower reply :slight_smile:

    On the users site, (https://sunandsoulfitness.com/) I ran the performance test twice as you mentioned. It looks like the only improvements have to do with optimizing images (see attached screen shot). Would installing Smush Pro take care of this?

    I've checked speed report for your site and Smush will help here, but there will be additional actions needed, let me explain this further below.

    Page speed tests has two types of reports for image optimization.

    1. Compressing - This one's is telling that image can be optimized, there are two of these reports on your site and it's what Smush will take care of by optimizing the images.

    2. Compressing and resizing - This tells us that image is larger than its actual HTML holder.

    There are 3 reports for this, and this will show even if the images are optimized because the images loaded are larger than its holder.
    For example, your logo holder is only 109x80 pixels but the size of the image loaded is 4968x3639, that means that unnecessarily large image is loaded on your page and your loading speed is affected by that.
    Other two are Mark's picture under testimonials, and 7 day free trial image, which seems to be loaded for a popup but I'm not sure which one :slight_smile:

    Unfortunately, resizing is not something Smush can deal with right now and you would need to manually replace those images with the smaller ones in order to remove those reports.

    You can read more about this on this blog post:
    https://premium.wpmudev.org/blog/compress-resize-images-wordpress/

    I looked at the Asset Optimization section on the users site, but I'm honestly not sure what to do there. If I enabled support on the site would someone be able to take a look at give suggestions?

    This is actually what's related to icon issue you mentioned, so I'll cover that all here.
    Asset Optimization is kinda tricky to configure and there's no easy "out of the box" solution, that's because each installation is pretty much unique with the combination of theme and plugins its using.
    Combining and Minifying files can lead to some issues, like your broken icons for example, and this happens because some files don't work properly when minified or when combined with other files.
    So you would need to tweak their settings to find the best combination, where as many files are minified but nothing is broken on your site.
    I would suggest doing this in batches, for example, minify 10 files and check your site, if everything is ok them minify 10 more, once you see something breaking then unminify them one by one until you find which one is causing the issue.
    This is a lengthy, trial and error, task and I'm afraid that we can't do this for you but following above explanation should help you setting this up properly.

    Hope this helps :slight_smile:

    Best regards,
    Predrag

    • Kevin

      Thank you for your help!

      I agree with your suggestion about trying the files in batches.

      However, what we found is that - after just activating the Hummingbird plugin - the mobile versions of ALL the sites on our network were very broken. Not just missing icons, but whole sections looking distorted.

      As I mentioned, this occurred after simply installing and activating the plugin. I did not alter any settings on any of the other sites. Hummingbird just broke a lot of things right out of the box.

      I'm all for doing a systematic test of which files to combine/minify. But, that becomes difficult when so much of the site becomes broken right after activating the plugin. It's like I need to go back and try to figure out what got broken somewhere, but I don't really know what to change because I didn't make any changes (if that makes sense).

      I was hoping to be able to utilize the plugin because of the performance improvements it claims to help with, but I don't know how to do this when so many things get broken right out of the gate.

      Fortunately, simply deactivating the plugin solves the issue. But, to be honest when paying $50/month for access to these plugins I was expecting that if they are breaking so many things right out of the box I would be getting some help to at least get it activated without breaking every site.

  • Kevin

    Thank you for your help!

    I agree with your suggestion about trying the files in batches.

    However, what we found is that - after just activating the Hummingbird plugin - the mobile versions of ALL the sites on our network were very broken. Not just missing icons, but whole sections looking distorted.

    As I mentioned, this occurred after simply installing and activating the plugin. I did not alter any settings on any of the other sites. Hummingbird just broke a lot of things right out of the box.

    I'm all for doing a systematic test of which files to combine/minify. But, that becomes difficult when so much of the site becomes broken right after activating the plugin. It's like I need to go back and try to figure out what got broken somewhere, but I don't really know what to change because I didn't make any changes (if that makes sense).

    I was hoping to be able to utilize the plugin because of the performance improvements it claims to help with, but I don't know how to do this when so many things get broken right out of the gate.

    Fortunately, simply deactivating the plugin solves the issue. But, to be honest when paying $50/month for access to these plugins I was expecting that if they are breaking so many things right out of the box I would be getting some help to at least get it activated without breaking every site.

  • Predrag Dubajic

    Hi Kevin,

    As I mentioned above, asset optimization could be tricky to tweak, but the plugin itself certainly shouldn't be breaking your installation that much as you mentioned in your last comment.

    Is it ok if we activate Hummingbird and investigate this further?

    Also, can you give us some more information about what exactly you see after activation, what's broken?
    And perhaps attach some before and after screenshots, so we make sure that we don't miss anything.

    Best regards,
    Predrag

  • Kevin

    That would be fine.

    I activated support access in the backend. When you activate Hummingbird, it's going to break things on the site. So I'm hoping to not leave things broken for an extended period of time. If it takes longer than an hour or so, could you please deactivate it so that the sites return to normal.

    I also want to mention something that might help. I'm also running Hummingbird on another site I manage - fitranx.com. Hummingbird is installed and activated on this site, and there is no issues there. This site (fitranx.com) uses the same theme as the multisite installation where we are having the problems. However, the plugins installed on the sites are not the same. Both these sites have the WPMUDev dashboard enabled, so if you need to look at a site running the same theme that's working let me know.

    I'm attaching some screen shots of the things I know of that get broken on the desktop view of the site. The icons in the top nav bar as well as the search icon in the main nav bar. Also, the icons in the footer get broken as well.

    In addition to those things, the mobile versions of the sites are just plain out of whack. Images and videos don't show properly, and entire sections as well as the navigation hamburger menu are effected. It's really too many things to get screen shots for. You would probably need to just pull up a site on a mobile device.

    I'm not sure if this will help either, but we're running the blog template plugin and domain mapping plugin from WPMUDev as well.

  • Predrag Dubajic

    Hi Kevin,

    I was doing some tests on your site but I'm afraid that I was unable to see any issues, I'm not sure if I'm missing something here.
    I activated Hummingbird on your network panel, went to sunandsoulfitness subsite and checked the site on both desktop and mobile mode, but everything was displayed fine.
    I even tried different browsers, clearing browser cache and cookies, etc., but still couldn't see any issues.

    Is this happening to you as soon as you activate Hummingbird or after you make some changes in Asset Optimization panel?
    Could you tell me exact steps you are doing so I could be sure that I don't miss anything and hopefully that will show the issues for me as well so I could investigate it further.

    P.S. I've disabled Hummingbird after I finished testing.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello @kauwarter!

    I have accessed your site, checked it with Hummingbird disabled and then I enabled it, made sure that the Asset Optimization, Gzip Compression and page caching are enabled and checked again.

    I admit I'm confused now. I didn't see any difference in how the site looks and behaves with and without Hummingbird: all the images were loading, the icons in navigation and in footer were there the same as they were without the plugin, the videos were loading and working the same way. I checked this in Chrome and Firefox and mobile view as well.

    I believe I might still be missing something but there's also a chance that this is actually a different case - when you tested it, did you try different browsers in both regular and incognito mode? Did you try clearing browser's cache? Sometimes what appears to be broken is actually a result of data "messed up" directly in browser due to its caching. If you're using any browser add-ons, did you try to disable them too?

    Also, can you tell me what browsers (with their version numbers and on what OS) did you check it with?

    Kind regards,
    Adam

    PS. I have disabled Hummingbird after testing so the site is set exactly the same as it was when I was accessing it; no permanent changes made at all.

  • Kevin

    I apologize Adam. I'm wondering if there was something I did wrong when enabling Asset Optimization, Gzip Compression and page caching.

    The icon problem is something I noticed. But the problems with the mobile view is something that was reported to me by other users for their sites.

    Would it be possible for you to go in one more time and enable those things? Like I mentioned, I'm thinking that the only possibility is that I did something wrong when trying to enable them. I'm not exactly sure what, but I was thinking that if you could enable them on your end I could go in after and see how you did it?

    I went back into the site an re-enable the support access :slight_smile:

    I know this is going above and beyond. So I wanted to let you know that I do appreciate the help!

    Kevin

  • Predrag Dubajic

    Hi Kevin,

    Caching and GZIP compression don't really require any additional setup, you pretty much enable them and that's it.
    I did this for you now and checked the site on multiple browsers and everything seems to be in order.
    I also enabled error log in caching so in case that some issue does happen we should be able to get some more info there if there are any caching problems causing it.

    What usually can affect your site look is the Asset Optimization, this is kind of a tricky tool as mentioned above and it could affect site functionality if some of the files used on your site are not handling well being optimized.

    I've disabled the Asset Optimization for now and left the caching and GZIP compression enabled, so can you keep an eye on your sites for few days so we can see if everything works fine and if it does we can continue with setting up Asset Optimization after that.

    Best regards,
    Predrag

  • Kevin

    Hello again!

    Thank you for all of your help with this. We've encountered the same problem I was describing before on the mobile view of sites. Specifically we had a report of one that I'm adding screen shots that were supplied by the site owner.

    I've left Hummingbird enabled so that you can view the error log and troubleshoot.

    Hopefully it's something that can be fixed. Thanks again!

  • Kevin

    Hello again,

    In addition to the problems I reported above on mobile, there seems to be a lot of issues with network sites when viewing on a desktop.

    I cleared the cache on Chrome, and I tried viewing the sites in Chrome and in Microsoft Edge.

    Both browsers have problems when you view the sites, the problems are a little different depending on the browsers.

    Here's a link to a screen cast of what I see for a couple sites: https://www.screencast.com/t/1JNZg7BYgZlp

    The Body Tailors personal training site seems to have cleared up some, but the VicFitranx site still has a lot of problems when you view it.

    I'm not sure what you're seeing, but there are definitely problems when I view the sites on desktop and mobile. And there are problems being reported by site owners for these things as well. So I don't think it's isolated to my computer.

  • Adam Czajczyk

    Hello Kevin

    By watching the screencast that you shared, I could see the issues but none of them I was able to see "live" on site with Hummingbird active when I was checking it. I admit that's quite "weird" issue and I'm not quite sure what might be causing this and, in fact, how to even see it on my end.

    I understand that this is a live site and "experimenting" on it could cause troubles, especially for your site's users/visitors. In that case it might be better, indeed, to keep Hummingbird disabled for now.

    However, if you could setup a staging site we could investigate it further, without affecting live site performance and afterwards relevant settings/solutions could be then applied to a real site.

    Such a staging site should be a "one to one"/"mirror" copy of a live site, set up on the very same server/hosting account - possibly in some sub-folder, sub-domain or some spare or temporary domain. Would it be possible that you'd set up such site and provide us with a full access to it?

    That would let us look into it deeper and in a safe (for your live site and its users) way.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.