Tag Archives: Cascading Style Sheets

How to Speed Up Your WordPress Server (Part 2) … Plus Some Jokes

 

Wordpress Button Closeup

Welcome back, everyone. You coming back is proof that if we all stand together, come high water or demons gnashing their teeth or filibustering electric company representatives, we can make it in the Wonderful World of WordPress (now a theme park in Pumpkintown, South Carolina).

Let’s get right into it: speeding up our WordPress sites, with continuing thoughts from Jason McCreary at Pure Concepts. We looked at seven of his ideas in Part 1 and will survey eleven more below. Part 3 will get into several ideas from TekBrand on the same subject.

Note again that at Superb, we can give you a year and a half of WP hosting for the cost of a year! That’s a baker’s dozen, if there are 6 bakers at the Greensburg Muffin Emporium each throwing in an extra muffin. “One extra from each of us, Mrs. McCready.” “But I don’t need this many muffins.” “Mrs. McCready, we ask you kindly to respect our process, or we’ll be forced to have uniformed officers escort you off the premises.” “But I haven’t done anything wrong!” “That’s it, I’m calling 911. Run for it. Leave all the muffins here. We need to sell them to someone who appreciates them.” [Exit Gloria McCready at a full sprint.]

WordPress on Steroids: Faster Than a Ravenous Wild Boar

As a quick review of general comments from Jason in the first installment, WordPress is a “heavy” CMS, which means it is slowing down the Web on the whole. Speeding it up (perhaps by not giving it any food to increase its undomesticated swine rage) is essential to making the user experience as fast and efficient as possible: like fast food with no employee bathroom breaks, and no slowing down, ever, or we will be forced to have uniformed officers escort them off the premises. Here are more of Jason’s ideas (originally presented at WorldCamp Chicago and WorldCamp Louisville – neither of which should be confused with UniverseCamp Alpha Centauri Bb, which was cancelled due to fear that attendees would be incinerated).

  1. Content Delivery Network (CDN) Considerations – A quality CDN spreads your resources throughout the world, which speeds up your site and aids redundancy.
  2. Additional Domains – Typically a Web browser will perform a parallel download of two pieces of content at a time. If you have additional domains, additional downloads can occur simultaneously. Don’t go overboard though: it’s hypothermia weather. You want between 2 and 4 domains, one specific to static content such as style sheets and images. That will help cut down on cookies (which is good for you: remember what the doctor said, honey).
  3. Social Widgets – You want to be able to have social widgets on your site that don’t decrease the speed with JavaScript or CSS via an external domain. Understand them so you can optimize them for speed.
  4. Gravatar – If your blog allows comments, you can speed up the site noticeably (Jason says 10%) by going to Settings > Discussion and nixing Avatar Display: each one is a separate request.
  5. CSS Image Sprites – A CSS sprite can consolidate your images so that the site doesn’t require as many requests to load properly. Setup can be a bit of a pain (typically 8 on a scale of 10, according to sufferers of Sprite Setup Syndrome), but it’ll pay off in performance.
  6. Minify – Get rid of any characters you don’t need in the code. You can unify disparate files. Cascading Style Sheets (CSS), for example, can often be combined into one file. Condense to minimize requests.
  7. Compress – Use Smush.it to compress your images and gzip to do the same with your script (it’s safe, unlike removing two ribs to help you get the contortionist gig at the Bolshoi Circus). The latter reduces the strain on resources up to 70%, similarly to removing your slacker boyfriend from the checking account.
  8. Resource Cache – If you cache all the content you can, the static stuff (such as CSS, JS, and images – whatever applies to all site pages) will only be requested once, even with additional page loads. You may want to get rid of ETags as well: Jason and AskApache agree on this point.
  9. WP Cache – You don’t want WordPress code to load repeatedly, so make sure it’s caching as fully as possible. W3 Total Cache, unlike some WordPress plugins, is customizable and broad-spectrum.
  10. PHP Cache – Once you have cached WP, you can speed the site’s loading of WordPress further by caching PHP. The most popular way to cache PHP is via APC, which you can activate within W3 Total Cache.
  11. Hosting – Higher hosting costs will inevitably improve your site’s load times. We all like to keep our costs as low as possible (particularly when buying black-market arthritis medications), but you want to work with a hosting company that specializes in WordPress. To additionally boost performance, use a VPS (virtual private server).

Conclusion & Continuation

All right, now. Let’s keep on tucking. Why stop now? We’re almost to Texarkana, and that’s where we’re picking up the illegal arthritis medications to sell to the residents in your sister’s nursing home back in Chattanooga. Actually, we have another Part to this series as well, so while we drive, flip through the game plan for how we’re going to swindle the cartel guys into giving us the meds for half price. While you do so, I’ll give you a few more ideas from TekBrand to speed up your WP site. Let’s multi-task!

by Kent Roberts

How to Speed Up Your WordPress Server (Part 1) … Plus Some Jokes

English: WordPress Logo

Anyone in the mood for some speed? Not the kind you popped to pull all-nighters during college (remember the intervention? it was awkward): the kind that populates your site on all PCs and mobile devices in the tri-state area like lightning, without the electrocution part. At Superb, we host a heck ton (that’s how the kids say it, right?) of WordPress sites. Here below we will look at a few quick ways to speed up that server, courtesy of commentary at TekBrand and Pure Concepts.

Be aware, folks (space aliens, that doesn’t mean you), Superb Internet has something amazing in store for you and yours – 18 months of WP hosting for the price of 12. Hurrah! That’s like a baker’s dozen, but the baker goes completely crazy and throws in 6 extra (5 more than the standard 13 for a baker) doughnuts. “Kyle, take it easy,” says Jiminy, the bakery’s GM and financial wizard. “Doughnuts don’t grow on trees, except maybe an undiscovered tree in the Amazon. It’s right next to the tree with the cure for cancer. Grab me a paper towel, and go take a long walk in the hot sun.”

Speed Up Your WordPress Site, Now! (Or Tomorrow, or the Next Day …)

Here’s an interesting thought from Jason McCreary at Pure Concepts (note that his thoughts are excerpted from presentations he gave at WorldCamp Chicago & WorldCamp Louisville, neither of which involve actual camping, but both do exist in the world): WordPress is heavy, and so many websites run on the CMS that it is slowing down the entire Internet. Say what?! Let’s set an example for our children, our children’s children, and the free-spirited robots: let’s speed this sucker up. I’ll share a few of Jason’s thoughts first in Parts 1 & 2, then get into the TekBrand piece in Part 3.

  1. Generating a Faster Site – Optimizing your WordPress speed also involves some changes that would affect your site whether it’s on WordPress or not. The reason that’s important is because baby, WordPress doesn’t own you (unless you signed a really awful contract in a Tennessee motel room in 2009, as more than 16,000 Americans inexplicably did). When you move to another CMS, guess what? (Pause while you guess.) No, not quite: You will know how to make that site fast too. That’s what you said? My bad.
  2. Code Validity – Use this tool – the W3C Code Validation Tool –so that pages render correctly. Bad code will slow down your site or make it display incorrectly. A pox upon it.
  3. Permalinks – That’s my sausage brand. Original name: Chock Full o’ Preservatives. Note that WordPress uses permalinks to access each page of your site. You want your URLs to fit the WP structure well. In the new WP version, Jason mentions the site load time decreases only @ 1% between /%postname%/ and /%year%/%monthnum%/%postname%/. Note that Jason advises to always consider SEO over speed, so do what you gotta do (plus, it’s closing time).
  4. Nix Plugins – Streamline the site. Is your site constipated with plugins? Well, then let’s give it a laxative. Jason recommends a regularly scheduled plugin audit to ensure everything is worth the decrease in speed – it’s all weight, after all. (We could also invent a piece of software that goes in and clears out all the debris, but that’s like having your shifty cousin organize your condo for a case of beer.)
  5. 404s & Settings > Discussion – Do you want any of these? Jason advises “No” to all three. Get rid of 404s (pages that have nothing on them except your nutty 404 page copy – oh, you silly duck!). Pingbacks and trackbacks can be an open door for spammers to abuse your site; plus, they use up bandwidth and power. Go to Settings > Discussion and shut them off. Lights out at the ping party, let’s close our eyes and see what happens. Here’s more from WordPress on spam.
  6. Settings > Reading – You can display an excerpt rather than all of a post. Additionally, you want the settings to be at a mid-range: if it’s a larger quantity, pages will be more sizable; but if it’s too small, it’ll increase the pagination of the site and slow down the site with excess page requests.
  7. Code Placement – HTML requires CSS to be placed in the <head> section of your code. (Say that ten times fast to the nearest senior citizen, I bet you $20 they’ll call the FBI.) If you place CSS stylesheets anywhere else on the page, it’ll prevent progressive loading of the page, as does JavaScript. Those little wieners! Place all <script> in the footer of the page. Knock it down a few pegs; see how it treats you then. If it works with your mother-in-law, it’ll work with code. (Be aware these placements will help speed, but they may cause what’s called a flash of unstyled content, depending on what GUI you’re using).

Conclusion & Continuation

Hold on, hoss. I’m not done with you yet. Hopefully you don’t mind me calling you hoss; it’s a term of endearment here in Virginia City (I rent a cabin from the Cartwrights, really more of a woodshed or outhouse … okay, it’s an outhouse). We have two more parts in this series, and then we can all have a slumber party (a chance for us to relax in our pajamas and use those expensive sleeping bags, since we shut down the ping party). Everyone grab your flashlights and be thinking about ghost stories. No tickling.

by Kent Roberts

Tips to Save Bandwidth

Save the rainforests, and save your bandwidth – bandwidth, if you don’t know, is the amount of data that can run through your server at one time. Hosting companies will typically limit the amount of bandwidth you can use, and being careful means your site can keep operating as quickly as possible for anyone who visits it, including polar bears.

Bandwidth Usage

If your site loads more easily, that means you can process more browser requests at the same time and that you are generally conserving. No reason to run servers too hard and burn up energy – plus, obviously, it costs you money and slows down the speed at which your site loads.

For this piece I used information from a Jean-Baptiste Jung article for Cats who Code and an anonymous piece from Calomel.org.

Bonus Tip! Bonus bandwidth-saving tip: stop looking at the site yourself. You’re just using up your bandwidth. Also carefully vet people before allowing them to visit your site. Put up a pop-up on your landing page: “Are you sure you want to use up my bandwidth?” with “Yes, I’m Selfish,” and, “No, I’m a Good Person” buttons.

Tip 1: CSS Rather than Images

All the popular browsers are now able to pull up the complexities of graphics built with CSS, and CSS will use much less bandwidth than an image file will.

Some older browsers can’t view CSS graphics accurately. You can use the below piece of code to enable viewing for users of Internet Explorer 6. You’re forwarding them to an alternate stylesheet so that people who haven’t updated their software since August 27, 2001, can view your website just like everyone else. I still use IE6 myself. What’s all the hoopla about these new browsers and new versions? Twelve years later, I’m still sold. It’s called loyalty.

<!–[if IE 6]>

<link href=”ieonly.css” rel=”stylesheet” />

<![endif]–>

Tip 2: Compress Your Data

You want all the information on your site to be as tightly composed as possible. Data compression involves using code with fewer bits/bytes. (For the uninitiated, there are typically 8 bits in 1 byte, similarly as with letters and words. The functionality is similar to words too – to increase efficiency and memory by transferring data in small groups.) You can save up to 80% of bandwidth by compressing. You can also save up to 80% of room in your house by compressing your belongings.

Your server will typically have a module to allow for compression. For example, with lighttpd and Apache, the module is mod_compress (also a demand you can make to a “mod” individual to make themselves smaller and more manageable).  Newer releases of Apache version 2 also have a mod_deflate module (a very cruel thing to demand of a “mod”) that allows you to compress specified file types. You can compress CSS and HTML up to 90%. Do not compress the jpg’s though: they are already compressed.

Any page that you compress using mod_compress – and the reason this command is particularly useful – will be saved on the server. It compresses once and keeps the file for repeated use when it receives an additional request from another user.

Compression, unlike teaching emotionally-disturbed children how to steal from their parents without getting caught, has a downside. The server must package the data, meaning that encrypting and decrypting must take place locally. Your energy use on your server will still be affected then in CPU – but it’s not substantial. It doesn’t take more than a few seconds to compress a typical website. (A human being usually takes 7 to 12 minutes to compress, by comparison.)

Tip 3: Optimize Images

OK, so you’ve implemented CSS wherever you can. You still have some images though, because hey, everyone needs to see pictures of your custom dining sets (frankly, much less important than most custom dining set shops realize).

Optimize the images. Photoshop contains a “Save for Web” feature. This option reduces the size as much as it can without significantly losing quality. It’s like a brain without all the meat and blood – like a robot image size decider without a hormonal imbalance.

You can also use a free online service to reduce your image size. Here’s one called Smush It, per Jean-Baptiste. Here, as well, is a plugin for WordPress, if you use that (automatically “smushes” everything you upload). Men, here’s a good pickup line: “Baby, I want to make you an Internet star, but first I need to smush you … repeatedly.”

Tip 4: Caching & the Expires Header

Consider caching when you design your site. The way to control caching is via the Expires HTTP header. The header lets browsers know how long the content is valid, after which it re-accesses the server to check if the object has updated. OCD browsers, though, will keep checking and rechecking the server regardless whether it makes any logical sense or how many times you tell them they’re not helping.

Caching means that the data is stored locally on the site visitor’s machine. What this process allows is less reliance on your server to repeatedly deliver the same material. You not only minimize bandwidth usage with caching. You also greatly increase page load times, which is popular among people who aren’t using the Internet to develop patience so that they no longer need to use the stress ball their court-appointed physician demanded they use during probation until “marked progress” was evident.

Elements of the page that can be given longer expiration periods include logos, headers, and navigation bars.  Other parts of pages that change frequently should be given shorter expirations. Ranch salad dressing should be refreshed any time you have out-of-town company.

You can set expire times typically in three different ways: absolute, last access, or last modification. Absolute is a specified time without additional parameters, whereas access relates to when the data was most recently viewed by the user, and modification refers to when the server most recently updated the content.

The below code contains a sample tag for use on Apache servers. The tag would automatically refresh content after 2 hours, which would make sense in a case where you know that certain data will update at that interval.

# Expires mod

ExpiresActive On

ExpiresDefault “access plus 2 hours”

Tip 5: Prevention of Bandwidth Theft

It’s good to be generous with your bandwidth, which is why you should freely allow hotlinking on your site. A hotlink is when a person refers to your page and loads an image or other content located on your server to present on their own site. In other words, it means they are using your server to load elements of their own webpage.

The way to fight this is to create an image that says, “Don’t Steal My Image” or “Free Hotlinking Image – Please Post to Your Social Media.” You could either store it on your server or on a free image hosting site (the latter would be better because then they aren’t accessing the image even the first time it’s used).

Once you have created the image, save this code to your .htaccess file (updated with your own stuff of course – specifically, be sure to change “yourdomain.com” to “cutepicturesofkittens.xxx”).

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]

Tip 6: Minimize Connections by Users

Each object on the page represents a different connection. If you minimize your number of objects per page, your server will not be bombarded by requests every time someone accesses the site. For this reason, you probably just want to have some text in the middle of the page and that’s it. No media. In fact, you may not want to have anything on the site at all. Say to your customers, “There’s nothing on our website, because I respect your time.”

Number of connections doesn’t just apply to your own content. It also applies to advertising. If the server related to the advertising is not as fast as your site is, it will slow everything down. Typically, pages will load on a browser in order as they appear in the HTML file. Placing a bunch of ads at the top of your site will make your site itself look slow to whoever is viewing it. If ads are slow, consider placing a pop-up on your site that says, “Please wait while these guys I know try to sell you some stuff.”

Tip 7: For Huge Files, Use a Third Party

Obviously huge files take up a lot of bandwidth. No need to have those files on your server. A service like Dropbox can be used to host images that you’d rather move off your own server. Dropbox is a system built for large files, so it’s a great option when you don’t want to overload your own.

Examples of good files to host on Dropbox are all your customers’ personal information in unencrypted form in a file named “Highly Sensitive Information of Rich People.” You also may want to use Dropbox for your “Huge Amount of Uncompressed Nonsense” file.

Tip 8: Eyes Out for Bots

Bots like to look at your data as frequently as possible. If you do not want certain pages to be indexed, place them in the robots.txt file. You can keep the Google bot that looks for images from scanning yours, for example.

Your modified date/time is listed for each page, which is typically the last time you updated it. This information goes out to the bots as well as humans. The bot won’t recheck a page if it sees the page is unchanged. If you want bots to take another look, change HTML files to reflect the current time. The bots are awaiting your instructions. They are here to please you. All they ask if that you give them everything you have, except your heart. They will come later for your heart.

Conclusion

Hopefully a few of those tips will be useful for you. Save that bandwidth. Make yourself sleek and efficient. Smush everyone and everything in your path, including the bots.

by Kent Roberts and Richard Norwood

JavaScript Simulation Party

Why are simulations useful? They certainly can be interesting to look at. Today I have selected a series of fun JavaScript simulations to look at. These are programs written for your web browser to interpret onto the screen for you. Often they are combined with a level of interactivity upon things like mouse-over, mouse-drag, or on-click, perhaps even input fields from a query form.

When we look at our web-browsers, they are essentially reading code and serving image files, characters, and pixel points for us to view. Programmers who work specifically on the browser-side of code: JavaScript, HTML, CSS, etc, are the ones who understand the real potential of what we can see on the web.

What can be produced, in an appealing and functional sense, are not necessarily a useful measure, except to see where the limits are bound in terms of  the aforementioned ideas. This is where browser side programmers are testing the limits and helping redefine standards in browser code.

Take a look at this website:

Lonely Pixel

From lonely-pixel.com – March 28, 5:50 PM

A showcase of my Javascript, CSS and HTML experiments.

I don’t know his name, except to see that there is an exceptional amount of mathematical reconstruction to simulate drapery, fluid, bouncing balls etc.

To those unfamiliar with the amount of work involved in producing these simulations, what Lonely Pixel has achieved is to describe real motion in math using the principles of physics. This scratches the surface of the blocks of thinking that go into creating animated elements that we see in filmmaking.

 

Js1k.com – Demos – A jumpy js competition

The object of this competition is to create a cool JavaScript “application” no larger than 1k. Starting out as a joke, the first version ended with a serious amount of submissions, prizes and quality.

I thought I’d pick out a couple of cool visuals from this Spring’s entries Head on over to the website to see the whole selection of entries. It’s pretty amazing what can be done in 1 kilobyte of web browser code.
 

 
Springy
By James Allardice
( Website@james_allardice )
Springy is a simple Doodle Jump clone. Move your mouse to the left or right to control your spring and see how high you can jump! Now featuring mobile accelerometer support!

 
Spring is in the box.
By Anders Corlin
@esotericFX
Boxes and scrolling text. Second effect showing after 10s. Source is minimized but not compressed. No evals and stuff.

Keeping code lean is an optimization challenge. Minimizing the amount of code a web-browser has to interpret not only means you put less demand on your browsing device memory, but also minimizes the demand on the server side that’s hosting the bandwidth for all the file downloads called upon.

Find any cool Browser apps? let me know on Google Plus – Juliana

Are You Hosting A Dynamic Website?

In the last article I wrote, we explored the use of mobile websites, and whether the increasing trend for mobile devices would affect the way in which you need to reconsider your web presentation to your future clientele. In this article, I’m going to give you the pointers you need to help you really qualify what mobile and dynamic websites are all about.

Mobile internet access via an array of
Portable devices is a now a
part of typical  business persons day.

Business people will no longer wait until they get home before
they can log on…

Juliana Payson‘s insight:

This article gives you a broad overview on the scope of a mobile website, and how that falls under the umbrella of a dynamic website. Dynamic websites adapt their presentation either from the browser perspective, or provide usability for the owner to upload new information.

Even something as simple as a content management system [CMS] such as WordPress, Drupal and Joomla will allow rich content to be updated with ease and is fundamentally part of the dynamic website approach. You don’t want your visitors to be turned away by stale content, but at the same time not all CMSs  are built equal with slick themes for usability. You might want to test your site appearance on many platforms and browsers to see how well it adapts.

 

Even though many people are stating that responsive web design is taking more time and money to implement it isn’t at all true. It may be a statement of frustration to try to minimize the importance of RWD and start a movement against it.

Juliana Payson‘s insight:

Take your pick of webmaster tools to add to your repository. Here is the definitive list of tools to check your website’s compatibility across many platforms and user interfaces – visually! Each tool listed will serve a different preference, you may prefer a book-marklet, a browser based web client, or a downloadable tool. Now you can check things like whether your website CSS script is adaptable to the user agent, or screen size. Of course if this represents the possibility that you may have a lot of work on your plate to adapt the website, you could consider making things more simple… Mohit Verma in the following article examines usability from an All-Text perspective. It was made as a usability suggestion on a government website:

 

Today, while browsing through the web, I found a website named Office for Disability Issues. As mentioned on their website, “The Office for Disability Issues (ODI) is part of the Department for Work and Pensions and works …

Juliana Payson‘s insight:

Mohit Verma makes a succinct evaluation of the government website’s recommendations. A picture speaks a thousand words, and many mobile devices have text readers built into them for those more visually impaired on small screen browsing.

Are there any other subjects you’d like to see tested? Simply place a comment to get in touch with me or connect on Google Plus if you have tips you’d like to share via Superb.net – Juliana