Content management systems and blogging platforms such as WordPress provide an excellent, simple way for website owners to add content to their website without having much technical knowledge. There’s a few pitfalls for the novice though, and being aware of these things can have a big impact on the performance of your site.

People who know me will have heard my periodic rants about “the terrible code” in some website or another, and I can see you all rolling your eyes and thinking “who cares about the code, only geeks care about the code”. Here’s one of the reasons why I care about the code:

Ever been to a website that seems to take forever to load? All too frequently I’ll find a site that, despite having no large images or anything fancy, still seems to take forever to come up. Sometimes I check out the source code (you can do this easily by going to View>Source in your browser), and often I find huge, and I mean HUGE blocks of something that looks like this:

 

<mce:style><! st1:*{behavior:url(#ieooui) } --> <!--[endif]--> <!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman";} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> <!--[if gte mso 10]> <mce:style><! /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;}

 

“So what?”, I hear you say. What this person has done, is to write the text for their website in Word, and then copy paste it directly into their website. While you can’t see it when you paste the text into your editing box, Word has sent with it a whole bunch of formatting code that gets added to your page.  Why does this matter?

  • It can slow your site down enough to mean the difference between a visitor staying on your site, or giving up and leaving.
  • At times the formatting code can also affect the look of your site, as it may interfere with the styling rules already set up for the site.
  • It can affect your search engine rankings – the more extraneous code, the harder the search engine has to work to find the actual content of your site.

So how else can I do it?” you say. “I have to write the text up first, I can’t put it straight into the website!”

The safest ways to get your text from Word into your website are:

  • Copy the text first into a plain text editor such as Notepad, then copy again from Notepad into your website editor.
  • If you have a WordPress website or blog, copy using the Paste as Plain text button provided. If you are using another blogging platform or WYSIWYG editor, check to see if it has a similar feature available. In WordPress it looks like this:

Paste as plain text button

Copying by either of these methods will strip out any formatting code. Then you can use the tools that are available in your editing interface to add headings and any other formatting that you need. If you’ve already done your formatting in Word, it’s a little extra work to add it again, but if you get used to writing the material up as plain text and then adding formatting at the final stage, it’s a small change in your workflow that can have a big impact on the performance of your site.