What would be faster - plugin, html or shortcode?

5
votes

I'm curious if anyone has experience with refining their WordPress site to make it as fast for page loading as possible and which approaches work better than others.

For example, lets take adding social media buttons to a footer. What would be fastest? What would be the biggest drag?

  1. Plugin - there are some plugins, including for Genesis, that allow the user to enter a social media URL and then the icon and link are generate in a widget. I'm wondering if this would be a big load in case the CSS and files for all icons sets are loaded instead of just those being used, plus any additional plugin code being run.

  2. HTML in a widget - With something this simple I thought that the code could be created and added to a text widget, with the images being stored in the theme folders. This can be a little risky because I've seen HTML code in a widget get blown out and clients can accidently edit the wrong piece.

  3. HTML in the theme - I try to avoid hardcoding elements that the client might want to update, but this seems very efficient, unless it's in a widgetized area by default, in which case would you un-widgetize it?

  4. Shortcode - with hardcoded elements that would need to be used in a couple of different places, I thought creating a shotcode could be a good option. But does anyone know if shortcodes tend to drag on a site? Do all of the elements within the shortcode file get loaded even if that shortcode is not called on that page? I'm trying to do away with unneeded CSS or scripts whenever necessary, but I don't know if shortcodes will only call the piece being called. Anyone know?

Thanks, any information or advice is greatly appreciated.

3
wordpressperformanceshortcode
Static HTML/CSS/JS will almost always be faster than running backend code. It's a question of the tradeoffs between speed and manageability/flexibility. - AlliterativeAlice
If you care about performance, then simply add the elements in question to the DOM (e.g. the social media buttons) but without functionality. As soon as the user sets a certain action (e.g. scrolls down the page, is assumed reading, clicks on the share widget, etc.) you load the share functionality and be done. - nietonfir

3 Answers

1
votes

Personally I use a theme options page which echos out HTML if the admin fills out the information. It isn't the fastest but its great for management and simplicity.

1
votes

Unfortunately, there's not a black-and-white answer here, because there's a variety of factors that come into play.

For example, server-side rendering of content is in many cases actually faster than rendering on the front-end, but that's largely dependent on the speed of your server. If you're on cheap, sharing hosting (like many of us are), server-side can be slower.

There are 7 things I recommend everyone do to improve site performance:

  1. Concatenate. Combining like files together.
  2. Minify. Removing the spacing, line breaks and comments from files.
  3. Smush. Removing unneeded data from image files.
  4. Icon Fonts. Icon fonts are a lighter, faster alternative to image-based icons.
  5. Compress. Reduce file size by up to 70 percent.
  6. Cache. Telling browsers to keep static assets stored locally so that they doesn’t have to be re-downloaded every time they visit your site.
  7. Page Structure. Adjusting the location of CSS and JavaScript files for faster rendering.

If you'd like to learn more about any of these, I've written a pretty detailed article on faster WordPress sites. I've personally used these tips to create multiple sites that load in less than 2 seconds on cheap, shared hosting.

http://gomakethings.com/high-performance-websites/

0
votes

1- Html & PHP : for social media you put them in other file like social-Blox.php then call it by 

    <?php include(locate_template( 'templates/social-Blox.php' ));?>

now you have the social in separated file you can use it in many places and it still very light no plugin load or any thing

after this inside the social-Blox.php you dont add only html NO . the parts that will be changed later you can use ACF or theme options ... to make them dynamic for example the links for facebook and twitter ... etc . 

<a href="<?php the_field("facebook",105); ?>" class="icoFacebook a_t" title="Facebook">
    <i class="fa fa-facebook"></i>
</a>

the fields that need change for example social media I add them to custom page like " general page " so the client change them from there this I use that values every where like in this and that files ...

here you are reusing blocks of files ... and reusing data ... with one control panel .

2- widget & short code : I don't like this it need more time to develop its not easy to reuse and to let client use it its a little hard

3- Plugin plugins always big problem for performance the less you use of them the better ...

  1. there is big famous plugins you can not replace or recreate like AFC , mailPoet ...
  2. there is small plugins but have some idea you need ok take the plugin its mostly 1 files take the PHP you need and the css & JS you need and add it to BOlX as I explain before ( in this case you will take max 50% of the plugin code ) and now the code is your not close box with process you dont need of problems you dont know ...