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

 

Make an impact at your next meeting using social psychology

Often, I hear that the people who advance fastest are not the smartest or most hard working, but the most liked. What if told you there are a few things you can do to be more likeable?

Make an impact at your next meeting using social psychology

Are you looking for a job or trying to secure your next big deal? Employers often tell me the most important qualities they look for in potential employees are professionalism and the ability to work as part of a team.  Often, I hear that the people who advance fastest are not the smartest or most hard working, but the most liked. What if told you there are a few things you can do to be more likeable?

First things first

Of course, actually being professional, a team player, and likeable is key. Once you’ve got that base covered there are a few techniques you can utilize to make your first meeting (and subsequent meetings) flow better.

We’re going to take a look at some social psychology techniques you can utilize to be more successful at your meeting. This is in addition to preparing for whatever meeting with the facts at hand. If you’re going for a job interview, look up potential interview questions. Find out who is on the committee, look those folks up on LinkedIn or Google. Try to find common ground; find a connection to utilize if you have the opportunity. Find out about the company. Have a comprehensive idea of what the company is about. Look up their mission statement. Right? Do your homework in addition to this stuff outlined below.

Social Psychology Techniques to Bring to Your Next Meeting

We’ve got the same wiring and it’s fast

StopwatchWe all have similar tools in our minds to make sense of the world. Tapping into how people determine the answers to important initial questions can give you an advantage when trying to persuade someone to hire you.

You have seven seconds before someone determines a variety of things

  • Are you different
  • Are you someone to approach or avoid
  • Are you friend of foe
  • Do you have status and authority
  • Are you trustworthy, competent, likable, and confident

Thin Slicing

This rapid decision process, or as Malcom Gladwell calls it – thin slicing, allows us to sort out tremendous amounts of information hitting us every moment. If you haven’t read it, I highly recommend his book on the topic Blink – The Power of Thinking Without Thinking. There is evidence that suggests that rapid decision process produces better decision making. With only seven seconds it pays to take a moment to be sure you’re collected prior to entering a meeting.

Before the meeting

Prime yourself to connect with people from the first handshake. To optimize your first encounter, you’ll have to do a bit of work prior to the meeting. Here are a few techniques that might help you. Before you walk in the door take a moment to get yourself prepared.

Prior to every important meeting, it’s helpful to determine what success looks (and smells) like.
Here’s an analogy: Someone gets into a taxi and the driver asks, “Where to?” The passenger says, “Don’t take me to the airport.” It sounds silly, but it’s often how we navigate our lives.

One tool you can use that might help is what’s called the Outcome Frame.

A well-formed Outcome Frame involves answering the following six questions. For the purposes of this exercise our goal is wanting to be more persuasive at our first meeting.

Answer these questions to form your own Outcome Frame

  • What specifically do you want?
  • How will you know when you’ve achieved what you want?
  • Under what circumstances, where, when, and with whom, do you want to have this result?
  • What stops you from having your desired outcome already?
  • What resources will you need to help you create what you want?
  • How are you going to get there—and what’s the first step to begin to achieve this result?

Just like your taxi ride, your fist meeting will go a bit smoother if you’re prepared with answers to these questions.

There are some key factors for success to developing a strong Outcome Frame. For one, the goal must be stated in positive terms, chosen by you, and within your control. It must be described in a sensory-specific way, and have a manageable size and scope.

Some helpful questions to ask yourself might be, “What will I see, hear, or feel when I’m feeling and being more persuasive?” Or, “What might other people notice if I were feeling persuasive?”

Next, consider what the outcome of the outcome will feel like.

Try success on. Give it a test drive. How do you feel?

The Circle of Excellence

The Circle of ExecllenceNow that you know what you want and some keys to how to get there, another technique that might be helpful to you to find success at your meeting is the Circle of Excellence. This is a method of brining your most relaxed and successful self to your meeting…

Imagine for a moment the time in your life that you experienced success, a feeling of flow. When were you at the top of your game? What did that feel like? Imagine it. While you’re feeling those sensations of success, imagine a spotlight on the floor, something you could easily stand in and be completely illuminated. Change the color to your favorite color, make it sparkle if that’s your wish. Keep in mind your feelings of success. What sounds are associated with those feelings? Live it again. Once you have your feelings of success fully in your mind, step into the spotlight. This is your Circle of Excellence.

As your standing in your circle, consider your meeting or future event, take a moment to hear and feel what that meeting will be like. You can step into this circle at any time. This is now yours.

When you get to your meeting, step into it as you walk in the room.

Rehearsal

The Circle of Excellence is a great way to bring your best self to the meeting. A related technique that may be very helpful is the idea of rehearsal.

There was a study on this topic that showed some pretty amazing results. Basketball players were separated into groups. One group spend an hour a day practicing free throws. Another group did not practice, and the third group imagined throwing free throws. The folks who did not practice showed no improvement. The players who practiced on the court had a performance increase of 24%. The players who only imagined practicing improved 23%! By imagining, or rehearsing in your mind, a task you can improve your ability almost as much as actually doing that thing. This is directly analogous to your performance in a meeting.

 At the Meeting

Ok, now that you’ve done the work prior to the meeting, it’s show time. You’ve got your first seven seconds worked out prior to entering the room. You’re dressed appropriately, you’ve done your homework (you know about the company and the people you’re meeting with). You have rehearsed. You’re walking into your circle of excellence as you open the door and connect with the people in the room.

Embodied Cognition

Photo of an emotional heat mapEmbodied cognition is the idea that you can influence how you feel by changing your posture or facial expression. One might consider this related to cognitive dissonance (the state of having inconsistent thoughts, beliefs, or attitudes, especially as relating to behavioral decisions and attitude change). Generally, we don’t like it. We’ll do what it takes to confirm our beliefs. We can use this to influence how we feel. For example, if we’re smiling, the resistance to cognitive dissonance, influences our mind to be happy.

The Power Pose

It may sound silly, but there is evidence to suggest that by striking a power pose (this includes standing tall, sticking your chest out, having your hands on your hips, taking up more space than you normally do) convinces your mind that you are more powerful, which makes one more confident. Studies show that two minutes of a power pose is enough to significantly increase chemicals in the brain that increase your confidence. Being confident is key to making a good first impression.

Of course, this is something you’ll want to do just prior to your meeting. Striking a power pose, with your feet on someone’s desk and your arms stretched behind your head is not the sure way to land that job. Strike your pose out of view 2 minutes prior to entering the room. Or, if that’s not possible… imagine you’re striking a power pose.

Smile and be sincere

People tend to smile when their happy. Did you know when people (including you) smile it makes them happy. Sounds strange, but it’s true. It’s another facet of embodied cognition. The smiling triggers the brain to be in a better mood. When you’re in a good mood you’ll perform better.

Another great benefit of smiling is that it encourages other people to smile, making them happy too. Right off the bat you’re both happy. This is a good way to start an engagement.

Mirroring

One of the keys to showing your likability and ability to work in a team is to build rapport. Rapport is the idea that two or more people understand each other’s feelings and motivations. As much of our emotions are embodied in our body language, a technique to build rapport includes an idea called mirroring.

Successful mirroring includes subtly matching the other person’s body language, rate of speech, or breathing (among other things). Be very careful not to mimic the other person.

Some keys to successful mirroring

  • Consider what’s happening with others around you. Set your intent to focus on being interested, not interesting.
  • To signal that you are safe, use your body language and slightly extended eye contact to show that you’re open and interested.
  • Pay particular attention to other people’s nonverbal communications and subtly mirror one or two of these behaviors by matching their posture, gestures, rate of speech, or tone of voice.

Match Representational Modalities

Another technique to build rapport is to identify a person’s representational modalities. A representational modality is how someone relates to the word. For example, someone might say, “I really feel what you’re saying.” In this case, they have a kinesthetic modality. Another example might be, “I really hear you.” In this case, they have an aural (or auditory) modality. Matching this modality in your speech, again subtly, can have an impact on the level of rapport you attain.

After the Meeting

You did it. You had your meeting. You went in prepared. How did it go? What was good? What could have gone better? How can you use this to improve your next meeting? Take some notes while the experience is still fresh in your mind. When you get back to your desk, take a moment to write a thank you note. Email is ok, but a handwritten note is as impactful as ever. Even if you don’t have any chance for this job, the fact that you took the time to show appreciation to another person will demonstrate your professionalism, ability to work in a team, and likability. That can help for the next time a job come up.

For further Reading

Blink – The Power of Thinking Without Thinking

NLP: The Essential Guide to Neuro-Linguistic Programming

The Well Formed Outcome Frame

Embodied Cognition

 

Adding custom fonts to your web page.

CSS offers a variety of ways to modify whatever font you’re using. For example, you can change the color, size, and add an underline (there’s more than one way to do this – my preferred method is illustrated below). First, identify what text will get this treatment. Then add the style declaration.

Adding a font and some typographic treatments to your website text can have an important impact

Start with modifying the fonts you have

CSS offers a variety of ways to modify whatever font you’re using. For example, you can change the color, size, and add an underline (there’s more than one way to do this – my preferred method is illustrated below). First, identify what text will get this treatment.  Then add the style declaration.

 h2 { 
/* ^ This is an h2, but you can replace it with any element, class, id, pseudo-element, pseudo-class,      child-selector, anything you can target. */

            color: rgba(0, 128, 0, 0.88); 
            /* ^ This is using RGBA (red, green, blue, alpha (or transparency)). You can use RGBA to color any element - transparency can create some cool effects */

            font-size: 1.5rem; 
            /* ^ Here the font is styled to be 150% of the base font size. You can use rem, em, percentage, or px on anything you can target */

            border-bottom: 1px double rgb(0, 128, 0);
            /* ^ Here the RGB (no alpha) is being used, other options include HEX, keyword (e.g. green), HLS */

}

This is just scratching the surface

There is so much you can do to modify a font. For further reading on the subject, I’d recommend taking a look at the W3Schools.com page on Fonts and their page on Text

Don’t want the default browser font?

Sometimes the default browser font just won’t do. Well, you’re in luck. CSS allows you to specify the font you’d like to use. The basic method is to utilize the font-family declaration. Again, W3Schools does a great job explaining it on their font-family description.

There are three ways you can do this

Use a web safe font

What this means is that you’ll rely on a font that is known to be on most computers. See Dan’s Tools great table on os compatible fonts.

Another resource to look at on the subject includes Web Design Dev’s 16 Gorgeous Web Safe Fonts . This is first on this list because there are some distinct advantages to using a font that’s already on your visitors’ computers, namely speed.

Download a font and embed it into your web page

Services like https://www.fontsquirrel.com/, http://www.dafont.com/, and Adobe’s Typekit are great sources for fonts. Once you have the font (be sure to check the license), utilize CSS3’s @font-face to get it into your site. For more information on using @font-face check out the w3schools.com page on the subject. You can really have a unique and high impact typography utilizing fonts found on these services.

Not all font formats work with all browsers

Font Squirrel has a great tool called the generator. You can use this to reformat your fonts into formats that most browsers can read. With the generator you upload your font and Font Squirrel prepares a package with the formatted fonts and the CSS code to use in your project. It’s pretty awesome.

Google Fonts

Google has an amazing service called Google Fonts. With it you can link to Google’s servers to deliver your fonts. It’s super intuitive, just select the fonts you want to use, then follow their direction on getting it into your web page. Google give you a link to a css file and the name of the font. Simply add the font-family wherever you want to see your font.

Have fun with fonts

Your font selection has a huge impact on the design of your site. As with any media, it’s better to have just a few fonts (no more than 3 on a page), and that those font’s coordinate with the message.

Inspirational Web Typography

20 Best Web Fonts from Google Web Fonts and @font-face

Typography in Web Design

 

Enjoy the journey.

 

 

 

Utilizing Social Media to Network

Social media is not just for venting political beliefs or goofing off. If you’re smart about your approach you can leverage social media strengths to achieve your professional goals.

Social media is not just for venting political beliefs or goofing off. If you’re smart about your approach you can leverage social media strengths to achieve your professional goals.

Don’t sell it

Photos of social meida icons
Social media is a place where people go to learn and connect. It is not your personal sales funnel. It’s a place for leisure, connecting, and learning. You can develop your profile as a thought leader and industry professional. It’s important to frame your posts as an offering for the public good, as opposed to a direct sales call.

Utilize the Network

Social media is the place to network. Utilize LinkedIn’s introduction feature to meet folks in the industry or companies you’d like to work. Again, even on LinkedIn, the objective should not be a hard sell. Frame your introduction request with an effort to bring something to the table.

Consider learning as a major objective of spending time on Social Media Platforms. Follow folks who will contribute to your professional development. Goof off, ok we all do it, but goof off partly by looking at inspirational work.

Portfolio Networks

Utilizing social media technologies as part of portfolio platforms is becoming more mainstream. People will be looking at your work, so be sure that your pieces are up to the quality that you’d expect to see from others. Look, they’ll always be better designers or more skilled tacticians in whatever field. Put up your best work and have it tell a story.  These platforms are not just galleries of work, they’re social platforms. Solicit feedback and give it.

A few portfolio websites to be aware of:

A little thing called usability

There is no surer way to establish the intuitiveness of your work than to have someone else use it. You can take the usability very far (https://en.wikipedia.org/wiki/Usability_testing). If you’ve got the time and resources to do this, great, but most of us don’t commit to true usability testing. And, if you can’t, then have a friend click around a bit in your own portfolio website and/or show them your portfolio and get some responses.

Add value (and avoid the rant)

If you like to rant, social media can be an excellent platform for it. Ranting, however heartfelt, also leaves a trail of potentially off-putting comments and assertions. If you must express yourself in ways that might seem untoward, create a new account that is strictly for your professional life. Creatives are welcoming and by nature open minded… being a part of the culture may require a shift in your communication style. Employers are looking at social media to get a grasp of who you are.

Get on the local train

Local is huge. The ability to travel to your client easily and have some face time makes a big difference to many people. Look the part. Does your town have a vibe? Is there a way you can incorporate that into your online persona. Connect with local networking groups (both online and in-person) and participate.

Emulate your heroes

Take some time to analyze how the people you follow utilize social media.

  • What do they post?
  • How often do they post?
  • When do they post?
  • What’s the length of their contributions?
  • What does their profile picture look like?

Determine what works for you and why. Then do that.

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