Solved

Wordpress - Let's clean up that code! :)

Posted on 2009-07-14
11
585 Views
Last Modified: 2012-05-07
Hey guys,

I've created my Wordpress site and am using quite a few plugins for my site. The issue I'm noticing is when I open my page and look at my source code, there is a whole whack of code, CSS stylesheets, and JavaScript files that are being imported even if the plugin isn't being used on every page. As well, I just find that the code added by the plugin is looking a little messy.

I was wondering if anyone has any suggestions on how I can clean up the code or if possible, remove unnecessary code from pages that aren't using particular plugins (which I think may be causing my site to load slowly).

Any suggestions would be much appreciated. Thanks!

P.S. My site can be viewed at www.operationlifesaver.ca
0
Comment
Question by:Adam
  • 6
  • 5
11 Comments
 
LVL 17

Expert Comment

by:selvol
Comment Utility
Back up the site.. If you have winrar.  Select the files and rtclick and select "Add to archive". Coose "Store" as the method for the fastest way.
Go over the code and check  for redundent item. As I am sure you know...
Use a text file and document evey change.  except removing lines. SO you can put it back if needed.
Remove a suspected item.  and see if the site still works.  
Any thing you don't know where or how it got their. Remove it and see what happens.
Use Comments to tell you what is what <!-- the is a comment -->
Run each page thru hml tidy  Make sure you check the HTML TIDY box in th eoptions
http://validator.w3.org/check?
 
Selvol
 
 Below is how I try to keep my code.
 

analcode.gif
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks for the reply selvol. The only issue with your suggested approach is that most of the code gets "assembled" once you visit the site itself. I'm not sure if you have experience with Wordpress but the all of the site's code comes from a number of different PHP files. Also, all the plugins that I've installed automatically generate their code and add it into the page source. So as the content is driven dynamically, how would I be able to use your approach to clean up my code?

I've heard and have tested out HTML Tidy before but I'm not really sure how I can use it with my site seeing as how the code is being generated.

I'm obviously not really an expert in this matter. Would you be able to help point me in the right direction?
0
 
LVL 17

Expert Comment

by:selvol
Comment Utility
Are you worried about Speed? I assume so. Because I thought I was the only one Anal enough to care what 1% of the world see's.
LOL
Get this Plgin HERE FOR SPEED>....
http://mnm.uib.es/gallir/wp-cache-2/
"To speed up a WordPress site ,you must  install and configure WP-Cache correctly. This will caches the entire page, resulting in no PHP being run after initial run, and no database queries. Its smart enough to refresh the cache when the content changes, so its more or less transparent to the readers. If you are getting hit by links from a high traffic site, WP-Cache is virtually mandatory, as it will be serving static content at high speed instead of rebuilding your page every time."
 Install....
Upload to your plugins folder, usually wp-content/plugins/ and unzip the file, it will create a wp-content/plugins/wp-cache/ directory.
If you have Gzip Compression enabled turn it off (in Options->Reading).
Activate the plugin on the plugin screen.
Go to Options administration menu, select WP-Cache from the submenu, the plugin will try to autoconfigure everything. The plugin will try to autoconfigure everything and guide you through the process.
 
Selvol
 
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks again for the reply selvol. I am actually already using the WP-Cache plugin. My site was ridiculously slow before installing it. I still find it a little slow on pages with minimal graphics or content which is why I figured the excess of code might have had something to do with it.

But my main concern was more on how to "tidy" up my code as mentioned. I realize that very few people actually check the source code. It was more to satisying my own needs at becoming more efficient with my web development (yeah, I'm pretty anal myself with stuff like that).

I think I found another plugin that might help with cleaning up some of my code called Tidy Up (http://wordpress.org/extend/plugins/tidy-up/). It is essentially the equivalent of the HTML Tidy you mentioned earlier but specifically for Wordpress. I'm going to give that a shot.

If you have any other suggestions though on what I can do to improve my Wordpress code, I would definitely be open to them. Thanks again.
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
So I tested out the Tidy Up plugin I had mentioned but I don't think it works quite like I want it to. It only seems to check the code for things like pages, posts, comments, etc. It doesn't actually look at the output/page source for an entire page (i.e. header, nav, sidebars, footer, etc).

So I guess I'm back to square one. Once again, if anyone has any ideas on how I can "clean up" my code in my Wordpress site, I would really appreciate the help.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 17

Expert Comment

by:selvol
Comment Utility
I was waiting to see if anyone else had anything to say.....
 I use texpad
Free trial forever.
I used the macro's.
First I use the on that deletes blank lines.
Then I
Ctrl+a  then ctrl+shift+i
Then I do the Zig zag indent with a macro I made.
To make a zig zag indent macro. In text pad.
Get a page ready like I stated above. All lines should start in the #1 left position.
Put you cursor at the beginning of the first line.  THe select macro , record. It's not a speed macro so you can take you time,.  One recording. From the first line push your code over 1 space the from the 2nd line push it over 2 and so on for about 10 lines the start going back wards ending back in the #1 position on line 20.
Macro , stop.  
Then you should be able to replay that on you pages.
And it should repeat the zig zag
 
http://www.textpad.com
http://www.textpad.com/add-ons/macros.html
 
Regards
Selvol
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks for the reply selvol.

Sorry, I'm not entirely sure I understand how to use your Textpad with the macros suggestion to clean my code. As my page source is assembled from multiple PHP files and is only generated once you load the actual site by visiting the URL, how can I use text pad to fix this?

Unless I'm wrong, it sounds like your solution would be good for a long HTML file where the source code appears pretty much as is when you visit the live site.

I'm just a little confused as to how to use your suggestion for dynamic content. Can you please clarify. I really appreciate the help.
0
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
Comment Utility
You are correct about me being incorrect..
I looked at you page. Nice work.
Some things that are slowing it down are. The images.
The total weight of the page is 1.5Mb
The intro banner attached is 85KB on you page. Attached it 7KB
You have 2 of the "Did you know images loading" at 30Kb each
Attached is 11KB I changed it to a PNG. ANd  left the Intro A JPG due to the
flash association.  

You should optimize your images.  You can save a lot of page load time and not loose and quality in the images.  
Also you have a ton of css files..
Total files all together loading is 79.
Rename the Operation-Lifesaver-files.jpg to Operation-Lifesaver-files.rar to unzip.
That file contains everything that loads when your page is viewed.
 
Regards

did-you-.png
intro-ba.jpg
Operation-Lifesaver-files.jpg
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks again for the reply selvol. You are absolutely right, I should have optimized my images better then I did. I appreciate you taking the time to optimize them for me. I will look over the rar files sometime later tonight. That should definitely help speed up some load time.

As for all the CSS files that are loaded, those are generated from the plugins I'm using in Wordpress. That was one of the issues I was talking about. I am using quite a few plugins on my site and most plugins seem to add their own CSS and Javascript files to my header dynamically. The annoying part is that most of the plugins are only being used on one or two page. But I'm not really sure how I can prevent that or to only have CSS or Javascript files run on the pages that the plugins are being used on.

And then that brings us back to the messy code. Because the plugins are being loaded dynamically and because of all the random CSS and Javascript files, I find my code to be all over the place.

Once again, I would appreciate any help I can get.

Thanks again selvol.
0
 
LVL 17

Assisted Solution

by:selvol
selvol earned 500 total points
Comment Utility
What you need to do is post or search for a question. With PHP as the subject....
LIke PHP code clean up. How to Optimize my HTML.  PHP is an extremely versatile program.. I use PHP on the site I am creating. ANd Php saved me soo much time.
Ray_Paseur Wrote me some scripts that I modified to go threw 40,000 pages and grab the text 3 lines up from each image and the write that text as the img alt.
 
I am sure php can anal code clean.  But optimize the images. and you will see a change.
See the thing about PHP is. It may come from many SOurces. But in the end your server has the last say in the way it is displayed.
Selvol
 
0
 
LVL 1

Author Closing Comment

by:Adam
Comment Utility
Sorry for the late reply. Thanks for all your advice Selvol. Much appreciated.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Since I am currently running into this issue right now as I type this, I though I would share my experiences with moving a ModX Revolution site from one server to another.  It is not an easy task, but can be accomplished rather easily. The first …
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now