Speed is Everything — First Step to Faster a WordPress Site

If your website doesn’t load fast, you’re kissing your visitors goodbye before they even get to you.

Let’s face it, we’re all impatient when it comes to web page load time.  We’ve become accustomed to the internet being fast, and when we go to our local search engine, click on a link, and come across a website that doesn’t load in under 3 seconds, we’re very much inclined to hit the “Back” button and try out the next result in the search results page.

Because we’re all about not wasting a second, because life is too precious to waste on a slow loading site… even if it has better content, or a better product or service.

This is why you should do EVERYthing you can to speed up your website.  But, when your website is running WordPress, it is prone to running slower.  You’ve probably noticed that your site may not load as fast as other “static” websites.

Why is that?

There’s A Lot Going On

Well, there’s the WordPress engine core which has, at last count, over 484,000 lines of code in it.  When you throw a theme on top, there’s bound to be another 10,000 more lines of code for the theme framework.  Then there’s all the plugins that enhance the WordPress system that you install over top of the core and theme.

Before you know it, you’ve got a fantastically feature rich and robust site… that is slower than molasses.

And when I say slow, I mean slow to generate the HTML that gets sent to the browser.  I’m not even talking about optimizing for Google PageSpeed, which is a whole other topic.

What I’m talking about is just the time it takes to compile and render the HTML code that the browser uses to render the web page.

And with all of the code and database access that it takes to build the HTML, it can take a few seconds before the page is sent to the requesting web browser.

So how on earth can we speed this up?

Glad you asked.

Speed It Up

The very first thing you should do is install a “caching” plugin.

A caching plugin basically stores a static version of your Page and Posts so that there is virtually no build time — it just requests the “saved” copy of the page and serves that to the end user.  And as many pages and posts don’t get updated ‘often’, you can store a cached copy of your pages and posts until your content is updated.

If you don’t have a WordPress plugin that caches your content, you absolutely MUST get one.

If you need some place to start, we would recommend you look at either WP Total Cache or WP Super Cache.  Both have their own set of features that you can configure, and we’ll let you decide which one works best for your situation.

But you need to have one or the other.

It could mean the difference between keeping and losing those precious visitors that need your product, service, or content.

i3dTHEMES TV://interactive 29 – “Tough Problems and Simple Solutions”

Truly.

Sometimes the hardest problems have the easiest solutions, which is why you should never give up.

Working through a problem, just putting in the effort and persevering through whatever challenge you’re up against, whether it’s in working with your website, or in business, or in life, is key.

Continue reading

RASA Dreamweaver Tutorials: Logo and Branding



Change the website name ‘Rasa Web’


Tutorial: Step by Step

  • open the Library folder
  • open the Shared folder
  • open the website-name page
  • select the ‘Rasa Web‘ text with your mouse
  • type in a new name for your website
  • click on the File menu
  • click on Save

Tutorial: Video Demonstration


Change the tagline ‘tagline goes here’


Tutorial: Step by Step

  • open the Library folder
  • open the Shared folder
  • open the tagline page
  • select the ‘tagline goes here‘ text with your mouse
  • type a new tagline or delete
  • click on the File menu
  • click on Save

Tutorial: Video Demonstration


Change the fontawesome ‘leaf icon’


Tutorial: Step by Step

to replace the leaf icon
  • go to the fontawesome website
  • find a suitable replacement icon
  • open the Library folder
  • open the Shared folder
  • open the website-name page
  • switch to Code view
  • select the ( fa-envira ) icon name
  • type or copy in your replacement name
  • click on the File menu
  • click on Save
to delete the leaf icon
  • open the Library folder
  • open the Shared folder
  • open the website-name page
  • switch to Code view
  • select <i class=”fa fa-envira fa-2x” aria-hidden=”true”></i>
  • delete
  • click on the File menu
  • click on Save

 

Tutorial: Video Demonstration


Add a graphic logo


Tutorial: Step by Step

  • open the Library folder
  • open the Shared folder
  • open the website-name page
  • switch to Code view
  • select <i class=”fa fa-envira fa-2x” aria-hidden=”true”></i>
  • delete
  • drag or Insert your own image into the same location
  • add to the <img> tag .. ‘class=”img-responsive”
  • click on the File menu
  • click on Save

Tutorial: Video Demonstration


Change the logo/tagline font size / family


Tutorial: Step by Step

There are several different locations in the shared.css style sheet where you can change the font properties for your ‘website name’. There are separate classes for the index page and template pages, and we also include separate properties for mobile and desktop. You may be changing 4 or more different styles.

The best way to do this is to use the ‘search’ command in your editor, search for a specific style, then change the properties for each instance of that style. For a detailed explanation and walkthrough, watch the video to the right.

change the website name font family / font size
  • open the Site folder
  • open the shared folder
  • open the shared.css
  • search for the class name**
    .website-name
  • look for the property
    font-family: ‘xxx-xxx’,
    font-size: xxxx;
  • update each .website-name class with your new property
change the tagline font family
  • open the Site folder
  • open the shared folder
  • open the shared.css
  • search for the class name**
    .tagline
  • look for the property
    font-family: ‘xxx-xxx’,
    font-size: xxxx;
  • update each .tagline class with your new property

 

**learn more about the scalable font size ( 5.9vw ) in the tutorial below

**most editors can access their ‘search’ function by pressing CTRL+F on the keyboard

Tutorial: Video Demonstration


Remove the logo side accent bars


Tutorial: Step by Step

  • open the Library folder
  • open the Shared folder
  • open the shared.css
  • search for the class
    .website-name
  • look for the property
    background: url(‘../graphics/logo-xxx.png’) …;
  • delete the entire line in each .website-name class you find

Tutorial: Video Demonstration


UX ( User Experience ) Design Tips

Working with font sizes that scale


Information:

For the website name and tagline on the index page, we used a font-size property value that is based on the width of the screen, and not a fixed pixel, point or em size. This allows the font to scale up or down in relation to the monitor resolution the page is being viewed on.

Where most fonts are based on a fixed font size such a px, pt or em. We use the vw font size, with is based on the vertical width of the page, or monitor resolution.

You can learn more about it from the smashingmagazine article here.

When working with the vw font size value you just need to preview your page in a web browser, adjust the vw number, and then ‘test’ in different resolutions to make sure it’s visible on smaller devices.

Best to test with Chrome, and use the developer tools to help mimic the display of your website on a mobile phone. You can learn more about this tool here. We’ve included detailed information in the section below.

Tutorial: Video Demonstration


Previewing desktop / tablet / mobile


Information:

Previewing your website with the best tools, is a must for all web designers, web masters and web developers. If you are not previewing your site as you go you may find a bit of a hot mess when you first view your site on your mobile phone.

You can preview your site using the Developers Console included in Both Google Chrome and Firefox. For the purposes of this article we’ll stick with Chrome.

  • install Google Chrome if you haven’t done so already
  • right click on the web page you want to preview
  • select Preview in Browser
  • select Google Chrome
  • with the page open in Google Chrome, press ( Shift + Ctrl + I )
  • pressing these 3 keys together will open the Developer Tools panel
  • to detach from the main browser and open in a separate window click on the three vertical dots located in the top right
  • then selecting the ‘detached’ option as highlighted in blue above
  • now click on the Mobile Icon in the top left

Tutorial: Video Demonstration


Working with larger logo names


Information:

Something we’ll often see is a website with quite a few words or characters in their website name, and it can be a bit of a trial and error trying to fit a small paragraph into the website name / branding area.

Usually the first thing I suggest is to create a graphic for your logo so it will scale better on mobile devices, in this case we already use a scalable font size. But what happens when there are so many characters in the website name that it becomes unreadable on smaller devices?

Watch the video to the right and we’ll walk you through some of the scenarios that you may run into, and the solutions we recommend.

Tutorial: Video Demonstration

Save

Save

RASA Dreamweaver Tutorials: Getting Started

Introduction Video


Installation (all packages)


You really must go through this tutorial as it is extremely important to open up your website template correctly.
View Tutorial


Planning & Preparation (all packages)


Making a plan can save you an INCREDIBLE amount of time. Follow this tutorial to learn a couple of key steps to save yourself a bunch of time.
View Tutorial


Working with Pages (all packages)


Everything you need to know about creating new pages, working with header regions, adding and removing columns, plus much more is found here in this tutorial.
View Tutorial


Publishing (all packages)

In this tutorial, you will learn how to publish/transfer your files out to your web space.
View Tutorial


FontAwesome Icons (all packages)


We take advantage of the FontAwesome icon set. Learn how to update the icons in your site.
View Tutorial

Speeding Up Your Web Pages: A Google PageSpeed Checklist

When Google PageSpeed first hit our radar, it seemed there was a lot of vague and sometimes contradictory information available on how to optimize web pages to load and render faster.

It was hard to tell where to start, and in which order to proceed. We wish we had had a simple checklist telling us exactly what needed to be done.

If you’re one of those webmasters that loves to follow a checklist, we hope this will help you out.

Google PageSpeed Checklist

  • Enable GZIP Compression
  • Enable Browser Caching
  • Optimize your Images
  • Minify all CSS files
  • Minify all JavaScript
  • Defer or Asynchronously load all JavaScript links
  • Asynchronously load all CSS links
  • Inline any Critical Above-The-Fold Styles
  • Minify the web page itself (HTML)

If you can get through that, you should be getting a 95 out of 100 for Google PageSpeed.

In A Little More Detail

Enabling GZIP Compression

With this step, you would turn on your server’s compression technology with instructions in a special control file.

Enabling Browser Caching

Here, you would provide specific instructions in a control file, that would tell the server to tell the visitor’s web browser, how long to keep static resources (JS, CSS, Images) cached.

Optimizing Your Images

This is actually one of the most important and easiest things you can do to improve your PageSpeed score.  Run your images through tinypng.com

Minify your CSS Files

This is where you strip  your CSS files of any white-space and comments.  By minifying, you can often reduce the file size of your resources by half.

Minify your JavaScript Files

This is where you strip  your JS files of any white-space and comments.  This step is a little trickier than that of the CSS minification, as JavaScript is very sensitive to an incorrectly minified file.  Be sure to test your code once you’ve minified your JavaScript.  Always keep a backup of your non-minified JS.

Defer or Asynchronously Load all JavaScript Files

JavaScript files are considered “render blocking” resources, which means that the HTML page will not “render” until all “render blocking” resources have loaded.  To speed up the rendering of your HTML, to have your page appear to load faster to the visitor, you need to “defer” or “asynchronously load” all of your JavaScript resources.

Asynchronously Load all CSS Files

Just like the JavaScript files, CSS files are also considered “render blocking”.  By asynchronously loading the CSS files, you will have the HTML render immediately.  The trouble with doing this step, however, is that the page will show as unstyled until the “asynchronously loaded” CSS files are loaded.  This is called the “Flash of Unstyled Text” (FoUT).  You can overcome this by implementing the next step.

Inline any Critical Above-The-Fold Styles

Determine which styles are critical to the rendering of the above-the-fold content, and inline them into the HEAD region of your HTML Page.  If done correctly, this will eliminate the FoUT.

Minify your Web Page (HTML)

Last thing to do is to minify your actual web page.  This can reduce the size of your web page by 50%.

See How You’re Doing

Each one of the above tasks is worth a different “weight” of score depending upon  what else may or may not already be completed.  You can test out to see how your page is working by going to superaccelerator.io