Fixing Page Size Issues Caused by Jetpack for WordPress

I have always been concerned about the performance of web sites that I work on, and especially those that I own, after all who wouldn’t be. We all want the web sites that we create and use to be quick, efficient, and optimized.

Recently when analyzing my own web site I discovered that the pages sizes on my web site were coming in at around 1.2 MB to 1.5 MB total in size. These page sizes completely shocked me! I don’t use an overabundance of graphics, nor did I consider my content to be extremely heavy, so I was a little concerned about what was causing the increased bloat.

So, to begin, I started looking at the possible culprits, and worked to identify what was causing the insanely high page sizes, and I encountered a shocking find. A single plugin was contributing to the shocking page sizes, and that plugin was Jetpack for WordPress.

So I set about on a task to decrease the amount of bloat that Jetpack for WordPress was causing, and I happened upon a few notable things, and will suggest a few best practices, that I think can be configured for any site to reduce the size of pages from sites that leverage Jetpack.

1. First, only activate the Jetpack for WordPress modules that you actually are leveraging. This seems common sense, but it seems a lot of web sites out there simply activate everything available in Jetpack for WordPress without giving it a second thought.

2. I found the number one culprit of the page size issues on my blog was related to two specific Jetpack for WordPress modules. Those two modules were:

  • Notifications: The Notifications module is simply a toolbar notification system for adminstrative users working within WordPress. It allows for notification, viewing, and moderation of comments made, and shows you on which articles those comments were made.
  • Sharing: The sharing module allows for the display of various social media web site buttons allowing visitors to share your web site content with sites such as Facebook, Twitter, LinkedIn and Google+. It also includes a variety of display options such as button style, sharing label, and where to show the module on your web site.

3. Disable Notifications. Even though this is an administrative user module, I would recommend that you disable the Notifications module within Jetpack unless you use this module consistently and find that you couldn’t live without it. Disabling this module will save page render time, as well as reduce the size of the Javascript your page requires.

Disabling this module will save you roughly:

  • Compressed: 220 KB
  • Uncompressed: 543 KB

4. Configure Sharing Settings. I truly believe that enabling social sharing of your web site content is required in today’s web; however, optimizing this experience can produce big savings on the load and render time of your web site. The Button Style options have the largest impact within the Sharing module on your page size and render time. The numbers shown below are page size increases when the Sharing module is enabled, and the Button style option shown is selected.

Button Style: Icon only

  • Compressed: 15 KB
  • Uncompressed: 55 KB

Button Style: Icon + text

  • Compressed: 15 KB
  • Uncompressed: 56 KB

Button Style: Text only

  • Compressed: 12 KB
  • Uncompressed: 53 KB

Button Style: Official buttons

  • Compressed: 230 KB
  • Uncompressed: 607 KB

After looking at the numbers above, if you’re looking for the absolutely the smallest impact from enabling the Sharing module, you’ll want to use the Text only button style; however, choosing Text only, Icon only, or Icon + text button style the differences will be negligible in the page size increase added. The only recommendation I really have is to stay away from the Official buttons button style. While the official buttons are sweet and look good, the page size increase is huge, especially when focused on optimizing page sizes to decrease the total load and render time required for your web site.

Do you have any further suggestions?, please comment below!

Author: daharveyjr

I’m a solution architect responsible for the design, development, implementation, testing, and maintenance of e-commerce operations and applications using the Hybris and WebSphere Commerce product suites and other web technologies such as Java, J2EE/JEE, Spring, PHP, WordPress and more. Twitter | Facebook | LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *