Solved

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

Posted on 2009-07-14
11
591 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
ID: 24857369
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
ID: 24858563
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
ID: 24858992
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:Adam
ID: 24859330
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
ID: 24861544
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
 
LVL 17

Expert Comment

by:selvol
ID: 24862101
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
ID: 24862199
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
ID: 24863077
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
ID: 24863330
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
ID: 24864079
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
ID: 31603546
Sorry for the late reply. Thanks for all your advice Selvol. Much appreciated.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

792 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