The new site was built completely from the ground up. We developed the custom theme with primary goal to have the fastest load time while keeping all of required functionality and ability to display unique page layout for each of Bluelounge’s 30+ products. I invited Rizqi Nizamil Putra into the team to help with the front-end development as time was of the essence as well. We completed the project on time and boy, the results were better than our expectations. Thanks for Shopify’s solid infrastructure, most of the web pages loaded in less than 2 seconds. A critical factor when you are building an e-commerce site.

Bluelounge new website with Shopify

You always want to make it better and faster…

Move forward to June 2016, Bluelounge came with a very specific but interested request. In order to improve the site’s SEO even further, they asked whether it was possible to get the PageSpeed score above 90 for both Desktop and Mobile from Google’s PageSpeed Insights and an A from GTMetrix website performance tool.

To be honest, I initially considered the request quite difficult considering one of Shopify’s major limitations was that we did not have full control of the server and apps. After a bit of research on Shopify’s forums, this was a very common issue as found here, here, and here. There are many suggestions there which you could take to improve the site’s performance bit by bit, mostly were already applied on Bluelounge website, but probably not enough to make it get >90 PageSpeed score.

I took on the job nevertheless, the challenge intrigued me.

Performance analysis

When trying to improve a website’s performance, whether for SEO, load speed, or conversion rates, the first thing to do is to breakdown what have been done correctly and what’s still missing. That was exactly what I did.

Theme related items done:

1. Avoid CSS @import; except for the web fonts which are loaded from MyFonts
2. Valid HTML structure; no console errors

Content based items done:

1. Optimize images
2. Specify image dimensions
3. Serve scaled images

Important items done by Shopify by default:

1. Leverage browser caching
2. Enable gzip compression
3. Enable Keep-Alive

Critical items to improve:

1. Minify CSS
2. Minify JavaScript
3. Eliminate render-blocking JavaScript and CSS in above-the-fold content

Even with the fast load time, PageSpeed still considered the site’s performance below standard and only rated it 83/100 for Desktop and 66/100 for Mobile.

Bluelounge website PageSpeed score result before optimization

The first two items were relatively easy to do, with the right tools.

Minifying and combining CSS files

The website’s stylesheet had been built using SCSS with Bootstrap for the framework, so minifying the output file alone was not enough to make PageSpeed happy with the file sizes.  I had to improvise. Using Bootstrap for Sass, I rebuilt the CSS by hand-picking Bootstrap components that were actually used and eliminated the rest. I also carefully merged individual CSS files into a single master stylesheet for most of the pages.

After minified, the final bluelounge.v42.css  is about 123KB in size.

Minifying and combining JavaScript files

Same as CSS, minifying alone was not enough if they files were still fragmented. PageSpeed really factored in the number of calls it had to make to load a web page. This time it was a bit more tricky though, as with JavaScript a small error or wrong order could break critical shopping cart functionality. It took extensive trial and error tests to get the desired output.

Luckily PageSpeed is more forgiving when it comes to JS files and I did not have to merge everything into a single file as I had done for the CSS. I still managed to combine 7 JS files into one to reduce the number of requests.

You could use these tools to combine and minify CSS and JS files:

• JSCompress
• shrinker
• Refresh-SF

Tip: always do thorough tests after merging and/or minifying CSS or JS files. At the very minimal, make sure you could still add items to cart, view shopping cart, and proceed to checkout.

Eliminating render-blocking elements above the fold

What is render-blocking content? In my own words: files or elements that delays the HTML page to be loaded as quickly as possible. Most JavaScript and CSS files are usually inserted within the <head> . This means your browser will try to download all linked files while it tries to complete loading the rest of the page, thus creating a delay from the of first byte received until the page is rendered on your screen.

Above the fold means the initial area of your browser’s viewport before scrolling further.

The concept is simple: to get the browser to render above the fold content as quickly as possible by reducing as many unnecessary elements as possible. Unfortunately, it’s really easier to be said than done.

Eliminating render-blocking CSS

For quick and lazy approach, you could always move all your CSS calls to the bottom, before the closing </body>  tag. The problem with this is, and you probably have seen it on some sites, you would see the page shown with plain content first before it quickly shifted to the stylized version a second later. For Bluelounge, this was not an ideal solution. They did not want to sacrifice form over function, which was understandable.

The solution was to use inline CSS for essential above the fold styles within the <head>  and call the rest of the stylesheet from external CSS file at the bottom of the page. I needed to create a mini version of the CSS and only include classes used to render above the fold content.

Why not inlining the entire CSS file and save the trouble from having to rebuild an entire CSS block? Because you want to keep the HTML code light. Inline CSS is not cacheable. If I put the entire CSS inline, I would add 74KB on every web page and PageSpeed would not like it either.

At the end my inline CSS was around 21KB, mostly from Bootstrap’s grid classes.

Eliminating render-blocking JavaScript

The final part was to optimize the JavaScript calls. I had been saving the hardest part for last. Shopify’s shopping cart functionality depends on JavaScript, specifically using jQuery library. What this implies is that I could not just move all JS calls to the bottom like with CSS. With the template structure at the time, some shopping cart ability like adding an item into cart works by loading the script block within the body of the page. If the jQuery library was called after the function, it would simply not work.

I had to restructure the JavaScript calls, removing any function made inside the content and combining them into an external JS file to be loaded at the bottom of the page. Some functions still needed to be retained as inline though. They required to call dynamic variable from Shopify’s liquid language. For these, I just move them further down.

After setting the right order of the scripts to be called, my work was done.

The outcome

The numbers speak for themselves.

Bluelounge Homepage – PageSpeed score 94/100 for Mobile

Bluelounge Homepage – PageSpeed score 95/100 for Desktop

Of course PageSpeed score is different from page to page and you should not just measure the Homepage. In this case, most of the pages have the score of >85. Mission accomplished.

These steps may not be applicable to all Shopify powered sites, but hopefully you will be able to pick up a point or two. Also keep in mind that if your site uses many third party apps that add calls to external assets, it is almost impossible to control those.

Interested to optimize your Shopify website? Please do not hesitate to drop me a line.

The post Shopify PageSpeed Score: Pushing the limits on Bluelounge website appeared first on Michael Sunarlim.

Nowadays, businesses have become more aware that having great looking websites is just not enough. With every competitor also owning a website, it takes more beyond good development for this particular digital channel to be able to contribute to the business. It needs to be discoverable, incorporates interesting content to make potential customers or clients stay and browse, and ultimately have proper call-to-action elements to convert them.

The work after a website is launched is much harder and requires more dedication to achieve the targets. While all those elements above were already considered during design and development phases, it is almost impossible to create the right formula without field tests and make data driven decisions based on the site’s analytics results.

All these lead to 3 components in general: online marketing, search engine optimization (SEO) and e-commerce strategy. The first problem to tackle is, most people (read: clients) may not be aware of the differences and consider them as the same. They might come to you and mention any of the terms and expect it covers everything.

Different agencies or professionals may have different interpretations to give explanation of each of those. Some just want to make the client’s life easier by not bothering about technical definitions and just provide a “full digital service”. These are really smart guys. However there are times when you really need to draw lines regarding each of these services to define scope of work and priorities between them.

Online marketing

I consider it as a marketing effort if you need to create an outline to be done in order to generate traffic to the website. Usually involving consistent actions over a course of time period.

In general, I classify online marketing into 4 categories:

1. Organic or non-paid online marketing
   This is done by promoting the website through different networks to gain some backlinks. Few examples:
   • Posting links to landing pages or blog posts on online discussions/forums
   • Notifying bloggers to review or feature a product or service offered on the website
   • Offline promotion (word of mouth) to lead customers to the website
2. Social media
   No company these days will be able to generate massive inbound traffic without the help of social media. By setting up a good social media profiles and consistently posting latest news and updates through these channels, it would increase the brand awareness faster than any other channel.
3. Email marketing
   Still one of the most effective channel. Never ever take this one out from your online marketing strategy, unless no ones literally uses email anymore.
4. Paid online marketing
   This can be done by creating ads on multiple networks, such as search engines and social media. My favorites, because of the ease of use, effectiveness, and popularity, are Google AdWords, Facebook Ads and AdRoll. Although keep in mind that every industry may have different niche and types of market, so you need to select carefully and always be ready to try different ones in order to get the best result.

Search engine optimization (SEO)

Unlike online marketing which requires financial investment in order to run, SEO is the organic solution. It is also the most difficult and complex to get positive results. The challenge is, you need to compete with billions of other websites and make the search engines to see your website as the most relevant when someone is searching with a particular keyword or key phrase.

The copy of your content is still the most relevant factor. However other technical elements such as site speed, URL format, page structure, sitemaps, they all weigh into the overall score. If your site is bloated and slow to load, it will probably end in lower search ranks compared to other sites with similar content.

It is not possible to break down everything about SEO in a single post. But to keep it short, when you work on your site’s SEO, it means trying to make it as friendly as possible to the search engines and ensure the content is relevant to your target audience.

E-commerce

In case your website does not actually sell anything online, we can also refer it as Conversion Rate Optimization. Every website has a function: to generate sales or leads, business branding, as marketing tool, etc. While the first two’s primary purpose is to drive people into the website, e-commerce or conversion optimization goals are to create a better experience to the users and ultimately increase the conversion rates.

There are many ways to achieve those, depending on the your set goals. For example, if it is an online store, then it will be to sale as many items as possible. This can be achieved by implementing these:

1. Very clear call-to-action (Buy) buttons
2. Product recommendations to cross-sell
3. Product bundles to up-sell
4. Free shipping offer
5. Special promotions
6. Featured products

In order to have a successful website, aside from having a well designed website, you need to consider all components mentioned above to ensure the online channel of your business is getting the results you expected.

The post Online marketing, SEO and ecommerce: how do they differ? appeared first on Michael Sunarlim.

Each tool will probably give you a handful of suggestions in how to improve your site’s speed. However there are 2 most essential components that you need to be sure have been implemented on your website or server. They take only a few minutes to set up but give the most noticeable impact to the site’s performance.

If you are using Apache webserver, below are the instructions to add them.

Enable browser caching

Add this into your .htaccess file:

## ADD BROWSER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Enable gzip compression

Add this into your .htaccess file:

## ADD GZIP COMPRESSION ##
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml text/javascript application/x-javascript application/x-httpd-php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
Header append Vary User-Agent env=!dont-vary

Sometimes due to the server’s configuration, the gzip compression works on every other file except CSS and JS files. If this happens, you could try adding this before the ## ADD GZIP COMPRESSION ##:

## TYPES FIX ##
AddType text/css .css
AddType text/javascript .js

That’s it. Give the site another test on page speed tools and see how much the score has improved.

The post How to enable browser caching & gzip compression on Apache webserver appeared first on Michael Sunarlim.

There are tons of WordPress plugins out there and for different purposes. Most are designed to add new features or integrations with other services, some to make it looks nicer, and so on. Below I am going to list a number of plugins that will help to increase your SEO score.

WordPress SEO by Yoast

What does it do?
A lot. This is the top plugin in the category, not only to improve your blog’s SEO, but also to expand your understanding about SEO. Its one of the most important features is that you will be able to set different meta title and description which will be displayed on the search engine results. It also helps you in reviewing the content of you post with a targeted keyword or keyphrase.

Why does it matter?
Basic SEO practices encourage you to optimize your meta information to help search engines to display a more relevant preview of the page they are crawling. That aside, if you follow all other tools available from this great plugin, you are already improving your blog SEO a few levels.

Go to WordPress SEO by Yoast Plugin Page

W3 Total Cache

What does it do?
It helps improving your blog performance through many methods without actually having you to move to a bigger hosting. At its heart is the caching tools that will reduce the time and resources to generate your web pages.

Why does it matter?
Search engines love sites that load fast. Reducing your page load will certainly increase your SEO score.

Go to W3 Total Cache Plugin Page

Akismet

What does it do?
Coming from the same company who brought us WordPress itself, Akismet is a web service that checks comments made on your blog for spam.

Why does it matter?
The biggest reason people or bots are spamming on people’s blogs to get backlinks to their sites, which mostly are shady. Getting spam comments on your blog means having backlinks to questionable websites and URLs, which search engines do not like. By freeing your blog, or at least reducing the number of spam comments, your blog will look more legitimate.

Go to Akismet Plugin Page

Yet Another Related Posts Plugin (YARPP)

What does it do?
As the name says, this plugin allows WordPress to automatically generate related posts to the one your visitors are reading. There are lots of similar plugins of course, but YARPP is most of the most popular.

Why does it matter?
Placing internal links to other posts helps search engines to index other pages on your blog and a suggested SEO practice.

Go to Yet Another Related Posts Plugin (YARPP) Plugin Page

Google XML Sitemaps

What does it do?
It can automatically generate XML sitemap of your blog. It offers quite extensive settings so you can select categories to be excluded, post types and so on. Note that WordPress SEO by Yoast has this feature built-in and just as good, but in case for some reason you do not want to install that, then this one is a must.

Why does it matter?
XML sitemap is the ‘map’ for search engines to crawl the information your blog. Have it constantly updated, then you will be sure to have all your pages and posts indexed.

Go to Google XML Sitemaps Plugin Page

There are probably still dozens of other plugins that can push your SEO quality and I only share ones I use and can recommend. Feel free to share your favorites by posting your comments below.

The post WordPress Plugins to Increase Your Blog SEO appeared first on Michael Sunarlim.