Tactics to optimize your site’s speed

No one likes a slow website, but that might not be enough to spend the time and money to optimize your website. There are three main reasons to justify the work entailed with optimizing your website.

Speed Optimization for Your Website

Why Optimize

No one likes a slow website, but that might not be enough to spend the time and money to optimize your website. There are three main reasons to justify the work entailed with optimizing your website.

The first: folks are impatient, and that equates to bouncing and a loss of conversion.

Amazon sees a 1% crease in revenue for every 100ms increase in load time

Another reason: increasing a site’s performance lowers the cost to host the site. The smaller and more efficient the website is the easier it is to serve.

Netflix saw a 43% decrease in their bandwidth bill after turning on GZip

For more statistics like these see: https://wpostats.com/

The third reason to optimize the network speed of your site is the cost to your audience. If you’ have an unlimited internet access plan, this might not occur to you, but many people in your audience may not. How much your site costs to download? Find out here: https://whatdoesmysitecost.com

What can you do?

Create a data budget

One tactic people use is to create a data budget. For example, you might set the parameter that the entire site can’t be more than 1MB. Where can we save?

Analyze current state of optimization

Google Speed Insights: https://developers.google.com/speed/pagespeed/insights/

Google has some great information on web optimization. Take the Google course: https://support.google.com/webmasters/answer/6001102?hl=en&utm_source=wmx&utm_campaign=links

Utilize tools in the browser

https://developers.google.com/web/tools/chrome-devtools/

Get Extensions like the Web Developer Extension for Firefox

https://chrispederick.com/work/web-developer/

Get a developer browser like Firefox Developer Browser

https://www.mozilla.org/en-US/firefox/58.0a2/whatsnew/#devtools

Optimize Images

In Photoshop

  • Reduce size
  • Reduce quality
  • Use the correct format

Try an image optimization service

Be sure to set the src attribute

If you have an empty src attribute in your image tag, e.g. <img src=””>, the browser looks for the file the code is on in the directory it’s in. It serves the page again.

Optimize Typography

Optimize web fonts by using only the ones needed and only fonts optimized for the web.

Use the right fonts and sets

https://fonts.google.com/

Or, better, do away with them all together – add web safe fonts.

https://www.cssfontstack.com/

Optimize CSS

One HTTP Request – No inline styles.

One caveat – make your above-the-fold content available earlier

Consider splitting your CSS into two parts: a short inline part that styles above-the-fold elements, and an external part that can be deferred.

Check it with this online tool:

https://varvy.com/tools/css-delivery/

Minify JavaScript and CSS

https://htmlcompressor.com/compressor/

Note: HTML minification can sometimes increase download time.

Server Side Optimization Tools

GZIP

Zips web assets. More information on these techniques below.

HTTP/2 PUSH

Allows for developers to allow server to send needed resources prior to being requested.

More information:

Caching

Monitor Progress

Once you’ve done the work, monitor your progress with these tools.

Tracking

Two options for monitoring site speed over time:

This can be a start for you to increase sales, reduce infrastructure overhead, and reduce the cost for your visitors, all leading to a better user experience.

For Further Reading

 

Facebook JavaScript SDK

Want to make your website or web app more engaging? Consider utilizing Facebook’s JavaScript SDK to personalize and socialize your audience’s experience. In this article I’ll break down Facebook’s JavaScript SDK documentation to explore how to integrate the data in Facebook with your page or app.

Why use Facebook Data?

Facebook for developersThe Facebook open graph api is a method to integrate Facebook data into your website or web app. This is good because you can personalize your website experience for your audience. Utilizing the SDK is also useful as a method to have folks login in. It’s a super convenient method of authentication and according to Facebook’s documentation increases conversions.

The documentation can be a bit overwhelming. I’ve tried to break it down for you here.

What can it do?

Facebook JavaScript SDK (Software Development Kit) is one way (of many) to interact with (i.e. get  from and post to) the data in Facebook.
Their main quick-start documentation can be found here: https://developers.facebook.com/docs/javascript/quickstart

JavaScript LogoFacebook offers a few main categories for integration.

    1. Social Plugins
    2. Facebook Login
    3. Facebook Graph API
    4. Dialogs
    5. Game and Page Tabs

Social Plugins

Social plugins are easy-to-use bits of code that you plug-in to your webpage. Things like adding a like button or a embedding a page/post into your site are made very easy with just a small amount of web programming knowledge.

This page will guide you to adding social plugins on your site: https://developers.facebook.com/docs/plugins/

Facebook Login

The Facebook Login allows you to establish a connection with Facebook. Want to serve up someone’s name and birthday? You’ll need to login first.

Account Creation: people to quickly and easily create an account in your app without having to set a password.

Personalization: Facebook login lets you access information which would be complex or arduous to collect

Social: Highly retentive apps let people connect with their friends in order to enable shared in-app experiences.

Some advantages of utilizing the Facebook Login include:

  • Real Identity
  • Cross Platform Login
  • Offers Another Signup Option
  • Granular Permissions
    https://developers.facebook.com/docs/facebook-login/permissions
       Offers people control over what they share
  • Gradual Authorization – you can re-request information later or request partial information to further enhance the experience.

Login ReviewLogin with Facebook Graphic

Apps may ask for the following permissions from any person without submitting for review:

If you want more information, you’ll need to submit your permission for review.
Permission Review Request URL: https://developers.facebook.com/docs/facebook-login/review

While in developing your Facebook Login experience, anyone listed in the Roles section of your app’s dashboard will be able to grant any valid permission without approval from Facebook.

Facebook SDK for JavaScript

With the Facebook SDK for JavaScript you can make calls to the Facebook Graph API.

The Graph API is the way to read and write to the Facebook Social Graph.

The graph is a low level HTTP-based API (https://en.wikipedia.org/wiki/Web_API). What that means basically is that you get or post the information using a program that has an HTTP library. One example of this would be a browser (e.g. Chrome, Edge, Firefox, Safari).

The Graph API is named after the idea of a social graph that consists of:

  • Nodes – the “things” such as a User, Photo, a Page, a Comment
  • Edges – the connections between those “things,” such a as a Page’s Photos, or a Photo’s comments
  • Fields – info about those “things” such as a persons birthday, or the name of the page.

The Graph API is HTTP based, so it works with any language that has an HTTP library.

Most Graph API request require the use of access tokens which your app can generate by implementing Facebook Login.
https://developers.facebook.com/docs/facebook-login/access-tokens/

Almost all requests are passed to the API at graph.facebook.com – the single exception is video uploads which use graph-video.facebook.com

Each node has a unique ID which is used to access it via the Graph API.

GET graph.facebook.com
/{node-id}

GET graph.facebook.com
/{node-id}/{edge-name}

The Graph API has multiple versions available to access at any one time. Each version contains a set of core fields and edge operations. You can make a call to a specific version by prepending the version identifier.

GET graph.facebook.com
/v2.2/me

The easiest way to understand the Graph API is to use it with the Graph API Explorer, a low-level tool you can use to query, add and remove data.

https://developers.facebook.com/tools/explorer

https://developers.facebook.com/docs/graph-api/using-graph-api/

Dialogs, Games, App Tabs

Facebook SDK for JavaScript Allows for dialogs that let people perform various actions like sharing stories.

Facilitates communication when you building a game
https://developers.facebook.com/docs/games/gamesonfacebook

or

an app tab
https://developers.facebook.com/docs/pages/tabs

Facebook JavaScript SDK Tools

The Explorer

The explorer is a way to “play” around with permissions, and equally important see how the data is passed to JavaScript.

https://developers.facebook.com/tools/explorer/

The Console

The console is a place to put your code to test it.

https://developers.facebook.com/tools/console/

Getting Started with the Basic Setup

https://developers.facebook.com/docs/javascript/quickstart

The Facebook JavaScript SDK doesn’t have anything to download or install, simply include a bit of JavaScript in your HTML and it will asynchronously load the SDK into your pages.

<script>
   window.fbAsyncInit = function() {
    FB.init({
     appId      : 'your-app-id',
     xfbml      : true,
     version    : 'v2.8'
    });
   FB.AppEvents.logPageView();
 };
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

If you set status to true in the FB.init() call, the SDK will attempt to get info about the current user immediately after init. Doing this can reduce the time it takes to check for the state of a logged in user if you’re using Facebook Login, but isn’t useful for pages that only have social plugins on them.

You can use FB.getLoginStatus to get a person’s login state.

https://developers.facebook.com/docs/facebook-login/web

https://developers.facebook.com/docs/javascript/reference/FB.init/v2.8

Examples

Trigger a Share Dialogue:
https://developers.facebook.com/docs/javascript/examples#dialogs

Facebook Login:
https://developers.facebook.com/docs/javascript/examples#login

Call The Graph API
https://developers.facebook.com/docs/javascript/examples#graphapi

Using Frameworks
https://developers.facebook.com/docs/javascript/frameworks

Facebook Reference
https://developers.facebook.com/docs/javascript/reference/v2.8

Connecting to Social Media APIs

Connecting to APIs makes for a better experience

 

As I have spoken about in the past, the social media modality triggers deep aspects of our psychological nature. Through social media you are exposed. People know what you’ve posted and what you like. You know how many of your friends, and what friends, like a product or idea. It activates cognitive biases like in-group favoritism and the consistency principal.

This is good for the owners of social media platforms. Clicking into cognitive bias is addictive. This fact is not lost on these owners. They utilize web technologies like JavaScript AJAX to display in new posts without the visitors to the site having to take any action, a la the endless news feed. That constant (re)inforcement of in-group and consistency principals combined with the Zeigarnik effect (see https://en.wikipedia.org/wiki/Zeigarnik_effect), where folks are inclined to finish an uncompleted task, makes for an extremely compelling case for adding social media elements and techniques to your content.

This is great. Utilize social media in your messaging and you too can tap into this amazing marketing resource. The only problem is that Facebook and Twitter and all other social media platforms are doing it on someone else’s website. Visitors are not clicking on your buy now button if they’re on the facebook.com domain.

 

Social Media Platforms are Sharing Too

 

Luckily for us it is to the advantage of social media platform owners to share their content. They do this through a standard web development mechanism called the application programming interface (API – https://en.wikipedia.org/wiki/Application_programming_interface). As per Wikipedia, “an application programming interface is a set of subroutine definitions, protocols, and tools for building software applications.”

Whoa, what does that mean? APIs take the content from web services and break it down into discrete pieces. For example, you can connect with the Facebook’s Graph API and get information about users on facebook.

 

As facebook describes it on their overview page (https://developers.facebook.com/docs/graph-api/overview) The Graph API “is a low-level HTTP-based API that you can use to query data, post new stories, manage ads, upload photos and a variety of other tasks that an app might need to do.” That’s a long way of saying that you can get (literally using the GET method) information from Facebook through http. HTTP is most commonly utilized in a browser. The webpage you’re looking at was delivered to you via HTTP (look at the start of the location in the location bar at the top of your browser… http or possibly https (s is for security)). That means with a browser you can see information from the Facebook Graph API. You can also get this information via programming languages like PHP, JavaScript, etc. Check out the reference here: https://developers.facebook.com/docs/graph-api/reference/.

 

That’s a lot of information to grab from Facebook and other platforms have APIs as well. You can take information from one API and mix it with another to create new ways to interact and consume with content.

Raising a child (Theme)

Raising your first child theme

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Raising your first child theme

First off, what is a child theme?

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Why should I use a child theme for my WP site?

  • Developing a child theme is an excellent way to begin learning how to develop themes for WordPress.
  • It is a great way to rapidly develop themes.
  • Developing a child theme allows you to “lean” on the development of other programmers (some of whom are more detail-oriented than you are). It allows you to develop highly advanced themes in very little time.
  • It’s trendy.

Before you get started:

First off I’m assuming you have some experience with PHP, MySQL, and WordPress. This includes some experience theming for WordPress.

Ready, Set, Go!

The first step is to go to WordPress.org and download a fresh WordPress code base (click on the blue “Download WordPress” button).

Fire up your local web development environment using XAMP or similar service. I have an actual LAMP (Lynux Apache MySQL PHP) stack on my development machine. I find this to be a bit cleaner and less buggy. However you do it, install and get WordPress running in an environment you have access to.

Find a theme you’d like to work with. In this tutorial we’ll work with the twenty thirteen theme that shipped with WordPress. The most recent version of WordPress does not include Twenty Thirteen. To get it click to: https://wordpress.org/themes/ and search for twenty thirteen. Download it and add it to your themes directory in the wp-content/themes folder.

Getting down to it…

  1. Select a theme you’ll make a child of.
  2. Create a folder and give it a name that matches the parent theme. Place this folder in the wp-content/themes directory of your installation. In this example, I’m using the twenty thirteen theme that ships with WordPress. My folder name is twentythirteen-child.
  3. In your new folder create a style.css file and add information to the top of the page, so WordPress knows which theme is the parent.

/*

Theme Name:   Twenty Thirteen Child Theme
URI:    http://example.com/twenty-thirteen-child/
Description:  Twenty Thirteen Child Theme
Template:     twentythirteen
Version:      1.0.0
License:      GNU General Public License v2 or later License
URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentythirteen-child

*/

(This bit of code in your css file tells wordpress about the theme)

Note: The Template should be the same name as the parent theme directory, and the Text Domain should be the same name as the child theme directory.

4. Create a functions.php file and add it to your theme directory.

Add the following code:

<?php
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is parent’s style.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

(This bit of code points any parent javascript or css to your new theme.)

Don’t forget to add the opening and closing php tags: <?php … ?>

5. That’s it. You now should see your child theme in the Themes directory.

Well, that’s great. Now what??

Now you start making modifications to the theme. For example, in the twenty thirteen theme there is a tan color for the navigation bar background. If you wanted to change that to a different color, add a rule for that style.

Yikes! How do I find what the rule is called??

Firefox and Chrome both have a code inspector. If you’re using either of those browsers, right-click on the element you’re interested in, than click “inspect element.” A split screen will appear showing you the html and css for that spot in the code. It’s a super handy way to inspect site designs.

Once you’ve determined what the class for the nav bar (or whatever element you might want to style), add the new rule to your style.css file (under the header that you added in a previous step) in your child theme directory (e.g. wp-content/themes/twentythirteen-child/style.css).

For changes in the structure of pages, you’ll create template files in your child theme directory. For example, if you wanted to change the format of the footer, you’d copy the footer.php file from the twentythirteen theme directory into the child theme directory (twentythirteen-child). Your child theme directory would now have three files (style.css, functions.php, and now footer.php).

Any template file in the child theme directory will overwrite the parent template file. Just like any rule in the child theme’s style.css file will overwrite any rule in the parent style. If the file is not there the child theme defaults to the parent’s files and rules.

…and that folks is how it works.

For further reading…

This is just scratching the surface of theming for WordPress, but it’s a great way to get started.

Please see the following links for more information about theming:

Codex Page for child themes: https://codex.wordpress.org/Child_Themes
WordPress Codex Main Page: https://codex.wordpress.org/Main_Page
Theme Development: https://codex.wordpress.org/Theme_Development
Template Files: https://codex.wordpress.org/Stepping_Into_Templates
Infographic on the Anatomy of a Theme: https://yoast.com/wordpress-theme-anatomy/