Speed is Everything — WordPress PageSpeed Optimization Plugin

If you’ve got a slow loading WordPress website, you know awful it is waiting for your pages to load.  You wonder whether or not you’re losing visitors, an whether your search engine ranking is hurting because of it.

And you wish there was a simple solution, a simple plugin that just fixed the problem.

Well, we’re excited to announce that development has begun on the WordPress plugin version of the incredible Accelerator website plugin that dramatically improves Google PageSpeed scores.

Accelerator, as a website plugin, installs to a traditional website and in minutes it optimizes the web pages and “ticks off all of the checkboxes” that Google PageSpeed Insights recommends that webmasters optimize in order for their pages to load blazing fast.

All without the webmaster needing to know all the technical mumbo-jumbo.

And now we’re bringing that same functionality to the WordPress platform.  Development started April 3rd, and as of the time of this post (April 11th) it is already a week ahead of schedule.  Expected completion and release date is July 4th — expect some fireworks!

This plugin will include support for:

  • GZIP Compression
  • Browser Caching of static resources
  • Minification of HTML
  • Minification of CSS
  • Minification of JavaScript
  • Image Optimization
  • Caching of External JavaScript and CSS
  • Deferral of Render blocking Resources (CSS/JS)
  • Automatic detection and injection of critical above the fold CSS

The  best part of all of this is that it is expected that you’ll be able to take advantage of all of those features, just as easily as the Accelerator as a Website Plugin version, but right through the WordPress plugin interface.

Rasa Dreamweaver Tutorials: Menus and Navigation

In this segment of our continuing series of tutorials, we explore how to modify the menus and navigation of the Rasa website template for Dreamweaver.

Top Menu

Tutorial: Step by Step

The Top Menu is a bootstrap ‘dropdown’ menu component that allows for sub menus. We’ve further modified the bootstrap menu to allow for multiple levels of sub menus. Please consider mobile users when designing your Top Menu, as a large number of menu buttons will be more challenging for mobile users.

We’ve also included the OffCanvasMenu for both mobile and desktop users that way you have an alternate navigation method for sites with large numbers of menu links.

The Top Menu is a styled ‘bullet’ list. Indented items provide the sub menu buttons.

add or remove a menu button
  • open the Library / shared folder
  • open the menu-top Library page
  • edit current links
  • use the hyperlink tool to update
creating a sub dropdown
  • use the indent tool to create a dropmenu link
  • make sure the top level button is linked to a # sign as in:
    <a href=”#”> ../../pagename.htm</a>

**NOTE** Top Level Menu buttons that include a dropdown sub menu should NOT link to a page directly, as this will not work for users with touch screens such as tablets, and mobile phones. Watch the video for details.

Tutorial: Video Demonstration

Off Canvas Menu

Tutorial: Step by Step

The OffCanvasMenu is a simple bullet list with the list items linked to your web pages. Use the hyperlink tool to update the current links, or just add and remove bullet items, then link the bullet item to your new pages.

add or remove links
  • open the Library / shared folder
  • open the offcanvasmenu Library page
  • update, add or remove list items
  • link the list items to your web pages

Tutorial: Video Demonstration

Side Menu

Tutorial: Step by Step

The Side Menu is only used in two pages, and those pages are only included in the Pro Package. The Site Menu is a bullet list, where the main or top level menu item has a class of ( class=”downarrow” ) applied to it. The top level menu item can only link to the # sign, it can not link directly to a page as the top menu it used to trigger the sub menu to open, when clicked. A user on a touch screen would not see the sub menu open if the top menu was linked to a page.

add / remove and update the sidemenu
  • open the Library / shared sidemenu page
  • you can add or remove items from the existing bullet list
  • to add or remove menu items, switch to code view, copy/paste or delete the commented sections for each button

Tutorial: Video Demonstration

How many menu buttons should I have

Tutorial: Step by Step

You can technically include as many top level and dropdown menu buttons as you like, but there is a limit to the amount of space you have to fit those buttons. We’ve included 4 buttons, all using short button names. On a larger monitor resolution you can fit up to 8 menu buttons with short names, however on smaller monitors you can’t, you can only fit about 4 comfortably. This is also why we’ve included the offcanvasmenu, that way you can fit more menu items into a secodary navigation, and save the top menu for your primary links only.

As long as you continue to test and preview your web pages by either resizing the browser, of better yet, use your Google Chrome web browser, and the mobile testing option in the developer tools, and you’ll see how much room there is at different resolutions.

We’ve ‘upped’ the breakpoint for the bootstrap menu to collapse into it’s mobile view from 768px to 992px giving you a bit more room for menu buttons.

Tutorial: Video Demonstration

Change the font size and padding to fit more buttons

Tutorial: Step by Step

One of the tricks to fitting more menu buttons, aside from just reducing the amount of characters in your button names, by using shorter names is to reduce the actual padding or spacing between each button.

There’s about 30 pixels of padding on each side of a button, giving a total of 60 pixels of spacing. You can reduce this by following these steps.

change button padding
  • open the Shared / styles / shared.css
  • search for ( approx line 316 )
    .navbar-default .navbar-nav > li > a
  • locate the padding
    padding: 30px 15px 29px 15px;
  • change the 30px and the 29px to equal but lower numbers
  • save and preview
  • adjust some more if need be
  • repeat preview

Tutorial: Video Demonstration

Understanding Your Visitors for Better Conversion

When revamping, upgrading, or renovating your website, you absolutely must re-evalulate your ideal customer/buyer/visitor persona.

If you don’t know what an ideal customer persona is, it is essentially a description of your ideal customer, one who values your product or services, that somehow helps you achieve your end goal.

Now, you may actually have multiple customer personas, each with different needs, wants, and desires.  It is absolutely imperative that you understand who your ideal customers in order to effectively first target and market to, and then have a website that delivers what they need.

For example, say you had a holistic pet food store, specializing in all natural, specially tailored foods for cats and dogs.  Right there, you have two unique types of customers: dog owners, and cat owners.  Both are concerned about their pets, and are willing to spend top dollar for the best possible, balanced diet, for their cherished furry companions.  Understanding who your ideal customers are, you can begin to build your business and marketing appropriately.

You can also properly build out your website.  And this is a very important key point.

If you market your product to a particular segment, but your website doesn’t match that particular customer’s needs, wants, and desires, you’ve just wasted a boat-load of time, energy, and money on your marketing.

Many do-it-yourself website operators believe that how THEY want their website to operate is how their customers need and want it to operate.  In reality, website owners need to really dig down and take a good hard look at your customer personas, and then determine what is important to those ideal visitors.

If you’re going to be marketing to Millennials, it is important to do your market research to find out what device they are likely to be using to browse your website.  If you’re targeting the 50+ crowd, should you be providing links front and center to your research and benefits, or to your “about” and “contact” pages.

Every customer type is different, but understanding who you’re targeting is the first step to building a successful website.  Because, while you may think your preferences for your website are what should be built out, in reality, you may not be your own preferred customer.

Check out these links to figure out who your ideal customer personal is:

Speed is Everything — Second Step to a Faster WordPress Site

Last week I wrote about the very first thing you should do to speed up your WordPress site: install a caching plugin the Pegasaas Accelerator automated Google PageSpeed optimization plugin.

Now that you’ve done the most critical thing that will help to improve your website performance, you should now move on to optimizing your WordPress site for Google PageSpeed you’re more than half way there.

Continue reading