[Support request] Speeding up site (Dispatch theme)

[Malin]

Hi,
I’m wondering if I can ask for some advice. I changed to Generate Press and also Site Ground (from Bluehost)to increase the speed of the website (also upgraded the theme which was 7 years old).
Now, the page speed has not increased by much, a lot of the pages are still around “50” out of 100, and a lot of the content is still in the red / painful area.
See screenshot of measurements over time:
https://snipboard.io/irKB80.jpg

This is the website:
https://www.alternativephotography.com/

What can I do to increase the speed? I have used Smushly on all images, so they are fairly compressed.

The main issues reported are these:
Eliminate render-blocking resources 1.78 s
Reduce initial server response time 0.91 s
Reduce unused CSS 0.45 s
Reduce unused JavaScript 0.45 s
Serve images in next-gen formats 0.3 s
Efficiently encode images 0.15 s

I’m also thinking perhaps some settings that increase lead-times?
I have Jetpack installed but have not switched on “Enable site accelerator” or “Enable lazy load”

On SiteGround I have switched on:
-NGINX DIRECT DELIVERY
-MEMCACHED
Not exactly sure what Cloudflare does, and it’s not switched on.

I’m also thinking it may be the number of plugins I use, I have these:
-Akismet Anti-Spam
-Better Search Replace (Inactive, only activate it when I need it)
-Broken Link Checker
-Classic Editor
-Code Snippets
-Easy Digital Downloads (for selling books)
-GenerateBlocks
-GP Premium
-Jetpack
-Lightweight Social Icons
-NextGen Gallery
-Post Grid by PickPlugins (will try and replace this with WP posts)
-Site kit by google
-SiteGround Optimizer
-Smush Pro
-VaultPress (backup)
-WP Show Posts
-WP Sitemap Page
-Yoast SEO

The GP premium models I have active are:
-Blog
-Colors
-Copyright
-Disable Elements
-Elements
-Site Library
-Spacing
-Typography
I have no idea which ones I need really.

The elements I have are:
-Archive header block
-Magazine Grid
-Post navigation block
-Secondary navigation
-(Disabled) Single post hero
-WPSP Close Wrapper
-WPSP Open Wrapper

I have added some CSS in the “Appearance CSS” but not a huge amount…
Any ideas what could cause the site to be so slow? Any advice would be appreciated.

[David]

Hi there,

first place to start is to get a better picture of whats causing the delay.
The Reduce initial server response time is something you should take up with your host.
Next is to expand the Eliminate Render Blocking Resources opportunity to see what resources they are.

Start with identifying any resource over 5kb ( ignoring jQuery for now ). And the major culprits are FontAwesome and JetPack.

JetPack – i am not sure what you use it for, as it does so many things, but it is known to add a lot of code. Unless you need all of its options, its better to use single specific plugins in place of those features.
FontAwesome – i am not seeing any being used on your site, not sure what plugin is making the request for them ( it could be JetPack ).

I would begin by looking at removing or replacing those plugins, and any others you feel are slowing things down, before the next steps of optimization.
You may want to get Siteground to set up a Staging Site for you, so you can test out disabling/replacing plugins without affecting your live site.

Happy to look at the next steps after this.

[Malin]

Hi David!
Thank you so much!

The Reduce initial server response time is something you should take up with your host

The site was not caching and it was a plugin (Easy digital download) that caused this. I will replace the plugin or see if the developers has a solution.

Next is to expand the Eliminate Render Blocking Resources opportunity to see what resources they are.

I have disabled Jetpack, but things are still very slow. And it says there is still font awesome present. I thought it may be the “Lightweight social icons” but when I deactivate it and run a page speed check it still comes up with “…css/v4-shims.css?ver=5.8(use.fontawesome.com)”, so it must be somewhere else, and I think it may be the dispatch theme, if you look at this image it uses icons for categories (look next to the text “Mordancage photographers”), I guess there is no way to switch that off? I guess it’s used for the angle brackets in the menu and the search icon too…
https://snipboard.io/nrUYGA.jpg

I use Jetpack for:
-Site map for Google (I guess this can be done some other way)
-Visibility of widgets (for example showing one on a specific page and one on another one, maybe there is a better way? Please advise if you know of one.)
-Social media sharing (when I post it automatically goes to Twitter etc, I guess I can do this manually)

This is the info I get when I expand “Eliminate render-blocking resources” (and Jetpack is off): 1.75s

URL
Transfer Size
Potential Savings
/css?family=…(fonts.googleapis.com)
2.6 KiB
780 ms
…fancybox/jquery.fancybox-1.3.4.css?ver=3.14(www.alternativephotography.com)
2.8 KiB
150 ms
…css/v4-shims.css?ver=5.8(use.fontawesome.com)
5.1 KiB
780 ms
…css/all.css?ver=5.8(use.fontawesome.com)
11.3 KiB
300 ms
…components/widget-areas.min.css?ver=3.0.4(www.alternativephotography.com)
1.6 KiB
150 ms
…css/main.min.css?ver=3.0.4(www.alternativephotography.com)
5.6 KiB
150 ms
…jquery/jquery.min.js?ver=3.6.0(www.alternativephotography.com)
32.2 KiB
600 ms
…thumbnails/nextgen_basic_thumbnails.js?ver=3.14(www.alternativephotography.com)
1.7 KiB
150 ms

This is the info I get when I expand “Reduce unused JavaScript” (and Jetpack is off): 1.35s
…m202…/show_ads_impl_with_ama_fy2019.js?client=…(pagead2.googlesyndication.com)
94.0 KiB
57.3 KiB
/gtm/js?id=…(www.google-analytics.com)
40.1 KiB
28.3 KiB
…js/adsbygoogle.js(pagead2.googlesyndication.com)
49.5 KiB
27.9 KiB
/gtm.js?id=GTM-NPQVDRH(www.googletagmanager.com)
33.9 KiB
24.3 KiB
/gtag/js?id=UA-1949563-1(www.googletagmanager.com)
40.8 KiB
21.2 KiB

This is the info I get when I expand “Preload key requests” (and Jetpack is off): 1.2s
URL
Potential Savings
…fonts/fontello.woff(www.alternativephotography.com)
1,200 ms

I don’t know if this helps to solve the mystery? 🙂

[David]

The Font Awesome fonts must be from another plugin, as LSI uses the fontello.woff – which shouldn’t be causing an issue. We can circle back that if it remains a problem.

Widget visibility – options:

1. This plugin:
https://en-gb.wordpress.org/plugins/custom-sidebars/

OR

2. If it is the First or Last ‘widget’ in the Sidebar you can use a Block Element to add your own content.
https://docs.generatepress.com/article/block-element-overview/

There are two hooks before_right_sidebar_content and after_right_sidebar_content which can have their own display rules.

Auto Post to Social Media

there are a couple of plugins that just do that:

https://en-gb.wordpress.org/plugins/social-media-auto-publish/
https://en-gb.wordpress.org/plugins/blog2social/

Reduce unused JavaScript

Those scripts can be deferred so they don’t interfere with the initial loading. I would look at deferring the: adsbygoogle.js ( advert ) script – which can be done with many of the optimization plugins or this specific plugin:

https://wordpress.org/plugins/flying-scripts/

Top of the list i would find where Font Awesome is being loaded, if those Icons are require FA provide an SVG option which isn’t a performance hog, but you would need to find the plugin thats loading them and check with the author if its possible to convert to SVG.

[Malin]

Hi David!
Thanks for quick reply. I will work on your suggestions. 🙂
Just to clarify: So, it’s not the Dispatch theme that uses the Font Awesome? Is it using SVGs for the folder icon, search icon etc?
I switched Jetpack on, and the site speeded up. Most likely because not every single one of the widgets was on every single page. 🙂

[David]

Nope Dispatch doesn’t load Font Awesome. I avoid it as its sooooo heavy lol
The icons you see for the theme ( hamburger, search, folder icons etc ) are loaded by the theme, they’re our own custom icons that uses SVG.

[Malin]

Ah, so you have coded and design the Dispatch theme? Well done! 🙂

I found the culprit. The NextGen Gallery plugin adds FontAwesome. The website is about photography, so I need it. I found a code snippet to disable FontAwesome here:
https://wordpress.org/support/topic/disable-awesome-fonts-in-nextgen-gallery/
It has removed Font Awesome and the galleries still work! Yes! 🙂

Eliminate render-blocking resources – the biggest load seems to be Google fonts and css:
URL. Transfer Size. Potential Savings
/css?family=…(fonts.googleapis.com). 2.6 KiB. 780 ms
…block-library/style.min.css?ver=5.8(www.alternativephotography.com). 11.6 KiB. 150 ms
…css/wp-show-posts-min.css?ver=1.1.3(www.alternativephotography.com). 1.9 KiB. 150 ms
…css/main.min.css?ver=3.0.4(www.alternativephotography.com). 5.6 KiB. 150 ms
…jquery/jquery.min.js?ver=3.6.0(www.alternativephotography.com). 32.2 KiB. 300 ms
…jquery/jquery-migrate.min.js?ver=3.3.2(www.alternativephotography.com). 5.1 KiB. 150 ms

I have cleaned up the css as much as I can already. I will try to use the Simple CSS to move css only used on a couple of pages. That may make a difference.

Reduce unused Javascript – Seems to be google adding a lot of code, I removed Google tag manager and Google optimize, but it still shows tag manager. I have installed Flying scripts and added
adsbygoogle.js, which leaves this:
URL. Transfer Size. Potential Savings
/gtag/js?id=UA-1949563-1(www.googletagmanager.com). 40.8 KiB. 21.2 KiB
…jquery/jquery.min.js?ver=3.6.0(www.alternativephotography.com). 32.2 KiB. 21.0 KiB

Can I add those two as well to Flying scripts?

I have also started moving stuff from Widgets to Elementor, so they only show on certain pages – good idea!!! – … but I can’t use the WP show posts inside a block? See picture:
https://snipboard.io/6UDewo.jpg

[David]

I did 🙂

So let’s deal with the fonts.
1. Light Weight Social Icons font, we can try preloading that.

Create a new Hook Element.
Add this to the Hooks text area:

<link rel="preload" href="https://www.alternativephotography.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff2" crossorigin>

Set the Hook to wp_head
And set the Display Rules to Entire Site.

2. Google Fonts
a) Eliminate unused variants – see this doc:

https://docs.generatepress.com/article/google-font-variants/

The only font-weights i see being used are 300, Regular, 600, 700, 800.
The rest you can remove from you Customizer > Typography > Body.

b) Load the Fonts locally. Options:

Automatic with Plugin: https://wordpress.org/plugins/host-webfonts-local/
Manually: https://docs.generatepress.com/article/adding-local-fonts/

Now onto Flying Scripts.

GTAG Script you cold – BUT some users have reported that this can lead to incorrect analytics reporting.
I don’t like recommending lots of plugins but you can serve the GTAG scripts yourself with this one:

https://wordpress.org/plugins/host-analyticsjs-local/

And jQuery i would not move as your plugins rely on that to be loaded before their scripts are called.

Elements for Sidebars.
Are you adding a Shortcode Block to add the shortcode ?

[Malin]

Ah, that explains why you know everything about the theme, I’m glad I’m getting support from the right person then! 🙂 And, thank you again for an excellent theme!

1. Light Weight Social Icons font, we can try preloading that.

I did this, see screenshot (set to “entire site”) but still I get this from PageSpeed:
“Preload key requests
Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. Learn more.
URL. Potential Savings
…fonts/fontello.woff(www.alternativephotography.com). 750 ms”
Here is my settings:
https://snipboard.io/91Whjq.jpg
Did I do something wrong?

The only font-weights i see being used are 300, Regular, 600, 700, 800.
The rest you can remove from you Customizer > Typography > Body.

I installed the plugin (the other way was just too complicated), but can’t figure out if I should preload or not.
But pagespeed still complains about the size:
/css?family=…(fonts.googleapis.com) 2.7 KiB. 780 ms
Also it slowed down quite a bit. I will remove it all and start again…

GTAG Script you cold – BUT some users have reported that this can lead to incorrect analytics reporting.
I don’t like recommending lots of plugins but you can serve the GTAG scripts yourself with this one:

I think I’ll live with the GTAG then, the list of plugins is getting very long! I did offload one more, called:
show_ads_impl_with_ama_fy2019.js which I’m guessing is also google ads.

This still shows up even though I added both of them to Flying scripts…
URL. Transfer Size. Potential Savings
…m202…/show_ads_impl_with_ama_fy2019.js?client=…(pagead2.googlesyndication.com). 94.0 KiB. 57.6 KiB
…js/adsbygoogle.js(pagead2.googlesyndication.com). 49.5 KiB. 27.8 KiB

Something I did wrong here too? See screenshot:
https://snipboard.io/vFuZl6.jpg

Not having much luck right now. 🙂

Elements for Sidebars.
Are you adding a Shortcode Block to add the shortcode ?

I’m not sure I understand what you are asking. I took the widgets that used the jetpack visibility feature, then
Elements –> Create hook –> Show in right hand column –> Visibility Page: Whichever page i wanted.
LIke this:
https://snipboard.io/tr9ARb.jpg
And this:
https://snipboard.io/Ujmcd9.jpg
It didn’t display the WP_show_posts so I commented that out as a temp solution.

Thank you again for helping. It’s getting better, only one of my control pages still showing “red” in PageSpeed Insights the other ones “orange”. No green one yet. 🙂

[David]

1. Lightweight Social Icons
I don’t see that warning regarding the preload font. It still asks for it Remain visible on loading but i would ignore that. As its asking the font should be swapped for a system font whilst its loads… and you cannot swap an icon for a system font.

2. Google Fonts.
Preloading fonts – i generally don’t bother. Might be worth checking with the OMGF Plugin author, he’s a GP user and Fan 🙂

3. Flying scripts.
Not sure here – it may not like underscores in the script name, could try just a part of the name eg. fy2019

4. Doh! – ignore me. In the Hook Element make sure you check: Execute Shortcodes.

[Malin]

Lightweight Social Icons (but i would ignore that)

Ok, great! Done then.

Google Fonts. (i generally don’t bother)

Ok, I’ll run a few more tests with the plugin on and off, it does not seem to make much of a difference. I will contact the author too if he/she has any ideas. Thank you.

Flying scripts (try just a part of the name eg. fy2019)

Done. Though it also ignores adsbygoogle.js which has no underscore. I will post in the support forum to see what they say.

In the Hook Element make sure you check: Execute Shortcodes.

Perfect, thank you!

Thank you so much again! Hopefully, I’ll be all set now and won’t bother you again. 🙂

[David]

You’re welcome 🙂

[Frank]

Hi, It appears that lightweight social icons is abandoned. Is there a recommended alternative for GP? Thanks!

[Elvin]

Hi Frank,

In some sense, GenerateBlocks is the successor of LSI.

GenerateBlocks has a button block. You can use this Button block to add your icons and their respective links. 🙂

[Malin]

Hi Elvin,
Ok, so I should remove the Social Icon Plugin and replace it with a block / hook? 🙂

[Author]

Posts