John, Author at Wooassist

How to Use a CDN to Speed Up Your Website

March 1, 2015 By John Leave a Comment

So far, we’ve talked about optimizing images, caching, and minification. This time around, we’ll talk about Content Delivery Networks or CDN. You will learn how to use a CDN to speed up your website.

What is a CDN and How Does it Help?

A CDN is basically a network of servers located at different locations around the world. As a service, a CDN will function to cache the content of your website so that it can be delivered faster to your visitors based on their location. Your static content will be saved on the servers so that when someone visits your site, it will send a request to the server nearest to them which will then deliver the content to the user. Basically, if you are a website owner and your server is based in Australia, your visitors from the US or Europe will have a hard time connecting to your website since the browsers will request data from servers that are too far away. This would result in delayed responses from the server known as lag.. With a CDN in place, browsers will always have a nearby server that they can connect to that will deliver your content much faster.

If that’s a bit too hard to swallow, here’s an infographic from GTmetrix with a visual representation of how CDNs work.

CDNs will mostly benefit the websites that cater to a global audience or market because if you are catering to a local audience, server requests will most likely be near your server’s location.

How to Use a CDN to Speed Up Your Website

Right now, you might be thinking that setting up a CDN is a complex endeavor. I’m telling you that it isn’t. We are in the age of web development where every service strives to be as user-friendly as possible. You can easily set up a CDN in a few clicks depending on your hosting service.

Setting Up CloudFlare CDN through CPanel

CloudFlare is one of the more popular CDN solutions out there and it has a free service for small website owners.

If your website is hosted on a CloudFlare hosting partner, then setting up CloudFlare is very easy. If you’re not sure if your hosting is a partner, check out this list. If your hosting is included in that list, then you can use the CloudFlare tool available on CPanel. Just go to CPanel and CloudFlare.

After that, just click on “Activate Free” for the free version or Activate PLUS for the paid version on the domain where you want to activate the CDN. You will then be prompted to enter your email to create an account with CloudFlare or just enter your email if you already have an account.

Once activated, you can tweak certain settings by clicking on Manage.

And that’s it. Your CloudFlare CDN is all set and the performance of your website should be improving soon.

Setting Up CloudFlare Manually

To set up CloudFlare manually, sign up for an account. After signing up, you will then be prompted to add your website to be scanned.

After the scan, you will be shown a list of all found DNS records. At this point, you should also set any subdomains that you would like to pass through CloudFlare. When you’re ready, just click on “I’ve added all missing records, continue”. The next page will let you choose a plan. You can choose the free version or the paid version, SSLs won’t work with the free version.

You will then need to change the name servers on your hosting service. You can do this by going to CPanel and clicking on Domain Manager. From there, just edit the name server to the new one provided by CloudFlare. If your hosting does not make use of CPanel, you can contact them on how to get this done.

As a final step, go back to CloudFlare settings and click on “I’ve updated my nameservers, continue”. Note that it may take up to 24 hours for the name servers to be completely active.

Setting Up Photon

Photon which is part of the Jetpack plugin is a sort of CDN although it’s not a complete CDN solution. Photon is mainly an image acceleration service which optimizes images on your site and caches them on the WordPress.com server to be served directly from there. Essentially, it only acts as a CDN for images and not all your static content like a normal CDN would.

If you are already using Jetpack, which hosts a number of other useful functionalities, then you can easily give Photon a go. However, if you are planning to install Jetpack just for Photon, you’ll be much better off going with a complete CDN solution like CloudFlare.

To activate Photon, just install Jetpack on your WordPress site and navigate to the Jetpack settings. From there, find Photon and click on Activate. Easy-peasy.

With a CDN in place, your website should be running a lot faster which will improve overall user experience and probably even boost your conversion rates.

How to Fix Blurry Product Images in WooCommerce

February 26, 2015 By John 10 Comments

Sometimes you upload an image in WordPress/WooCommerce and it just doesn’t show up like you intended it. Sometimes they don’t align. Sometimes they don’t fit the placeholder. Sometimes the image just doesn’t show. And sometimes, the image gets blurry. Why the image gets blurry may be caused by one of a few problems. Here we discuss the common causes and how to fix blurry product images in WooCommerce.

You Uploaded a Blurry Image

If you uploaded a blurry image then don’t expect that you’re going to get a good image to show up. Maybe you viewed the image in a small screen so it looks okay but when you view it on a larger screen, you’ll find that it actually is blurry. If this is the case, there is hardly anything that you can do to fix the image. Image editing tools like Adobe Photoshop may be able to help a bit by making the image sharper but don’t be expecting any significant changes. Odds are you’ll have to get a better image.

WooCommerce Recommends Using Large Product Images

Before, WooCommerce images need to be a specific size that you set in WooCommerce settings. That is no longer the case. WooCommerce now uses a lighthouse so images pop up big when users click on it. Large images look great and will help sell your products. However, make sure they are properly optimized.

For most themes, WooCommerce recommends uploading an image that is at least 800×800 pixels. Don’t worry about the image being bigger than the placeholder as WooCommerce automatically sizes your images and will only show the full resolution when clicked.

To control thumbnail cropping of your product images, you can go to Appearance > Customize > WooCommerce >Product Images and then select your desired cropping settings.

If the image is not the problem, there might be a problem with how your images are rendered. You can try to regenerate image thumbnails.

How to Regenerate Thumbnails

Other than when changing image settings in WordPress and WooCommerce, you may also need to regenerate the image thumbnails on your website if they appear blurry after a redesign or changing to a different theme. The best and easiest way to regenerate image thumbnails is to use the Regenerate Thumbnails plugin. Simply install and activate the plugin and from there, go to “Tools” and “Regen. Thumbnails”. Just click on the button “Regenerate All Thumbnails” and the plugin will fix the blurry images like magic.

If you want to regenerate thumbnails for specific images instead, you can do this on the Media page on your admin panel. Make sure you are viewing images with List view. Simply hover over the image and the link to regenerate thumbnail should appear. You can also mark all the images you want to regenerate thumbnails and use Regenerate Thumbnails from Bulk Actions and then apply.

Best Practices on Image Use

There are a lot of things that you can do to avoid blurry images by following best practices. Once you set an image dimension, make sure that the images you upload comply with that requirement. Uploading a bigger image in WooCommerce is okay but make sure the image is optimized so as not to affect your page load speed. You can set how you want image thumbnails to be cropped. If you upload a smaller image, it might look okay on a mobile device but not on a PC or laptop. It is also important to know what image file types to use.

Another best practice for images is to always set an alt text for your image. If the image fails to load, the alt text will show up and the user will at least know what the image is about. Also, name your files properly. Don’t name your files after SEO keywords. If you have an image of a ukulele, give it a descriptive file name and not “buy-cheap-ukulele”.

How to Move the Navigation Menu Outside of Header for Storefront

February 26, 2015 By John 9 Comments

Here’s another tweak that you can do on the Storefront theme.

If you want to move the main navigation/menu below or outside the header, you just need a few lines of code. There is no need to create a new header.php file on your child theme. Instead, just add this piece of code to your child theme’s functions.php file and you’re all set.

function child_theme_init() 
{
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
add_action( 'storefront_before_content', 'storefront_primary_navigation', 5 );
}
add_action( 'init', 'child_theme_init' );

Before you do this, do know that it’s not really recommended to move the styles outside of its original location. After doing this, you will need to redo all the menu styles and that’s a lot of work.

Now you know how to move the navigation menu outside of header for storefront theme. Hope this worked for you. If not, feel free to post a comment and we’ll see what we can do to help you out.

How to Remove Horizontal Line under Page Title in Storefront Theme

February 26, 2015 By John 2 Comments

Updated 18/2/16 due to Theme Update

For one reason or another, you might find that you’d like to remove that horizontal line just below the page title in Storefront theme. The horizontal line becomes prominent when you don’t have a title for your page which could happen on home pages.

Remove Horizontal Line under Page Title in Storefront Theme — That line that the arrow is pointing at.

To remove the horizontal line, simply add the code below to your child theme Styles.css file.

.page-template-template-homepage-php .hentry .entry-header, .page-template-template-homepage-php .hentry .entry-header h1 {
 border-bottom: 0;
margin-bottom: 0px;
 }

The code “margin-bottom: 0px;” is necessary to remove the bit of extra spacing below where the line used to be.

Now you know how to remove horizontal line under page title in Storefront Theme but if that doesn’t fix your problem, let us know in the comments.

How to Rename Primary Menu in Mobile View for Storefront Theme

February 26, 2015 By John 6 Comments

Updated 18/2/16 : Storefront Theme was updated. Adding a filter hook to rename the navigation.

If you have donned the Storefront Theme by WooThemes and tested the mobile view, you might have noticed that your main navigation/menu turns into a collapsible menu. While this menu does serve its purpose in the mobile view, it being named “Primary Menu” isn’t very desirable. You most likely need to change it to something more appropriate for your needs.

Different websites have different navigations so from the theme developer’s standpoint, putting in a not very descriptive text like “Primary Menu” will serve its purpose just fine. But for a website owner like you who knows what he wants, you’d want something more specific for that mobile collapsible menu. Maybe you’re selling your own line of apparel and your menu is filled with different product categories, so you want the text to be something like “Product Categories”, “Browse Clothing Line” or maybe even make it a call-to-action like “Shop Now” or “Shop Online”. Bottomline, you know what you need the text to be on that mobile collapsible menu. Lucky for you, it’s easy enough to accomplish with a few lines of code.

Get a Child Theme

Before we proceed, make sure you are running your website on a child theme. To begin with, there is really no reason why you shouldn’t have a child theme unless you want any changes you made to your theme to disappear whenever the theme updates. If you don’t have a child theme yet, get one.

Add the Filter

Now that you have a child theme, paste this code into your child theme’s functions.php file.

add_filter( 'storefront_menu_toggle_text', 'jk_storefront_menu_toggle_text' );
function jk_storefront_menu_toggle_text( $text ) {
 $text = __( 'MY NAVIGATION' );
 return $text;
}

Change the Text

Do you see the line with the following code?

$text = __( 'MY NAVIGATION' );

You’ll just need to modify the text “MY NAVIGATION” and change it with the text that you want on your collapsible mobile menu.

How to Use a CDN to Speed Up Your Website

What is a CDN and How Does it Help?

How to Use a CDN to Speed Up Your Website

Setting Up CloudFlare CDN through CPanel

Setting Up CloudFlare Manually

Setting Up Photon

How to Fix Blurry Product Images in WooCommerce

You Uploaded a Blurry Image

WooCommerce Recommends Using Large Product Images

How to Regenerate Thumbnails

Best Practices on Image Use

How to Move the Navigation Menu Outside of Header for Storefront

How to Remove Horizontal Line under Page Title in Storefront Theme

How to Rename Primary Menu in Mobile View for Storefront Theme

Get a Child Theme

Add the Filter

Change the Text

Get started today

Get 2 Hours of FREE SUPPORT

Free eBook

Quick Links

Wooassist

Connect