CDN on Speckyboy Design Magazine

How to Speed up Google Fonts in WordPress

Brian Jackson — Sat, 02 Nov 2024 11:49:04 +0000

Today, I’m going to cover a few methods for optimizing and speeding up Google Fonts in WordPress. Images, of course, are and always will be the heaviest part of a web page, but according to HTTP Archive, as of October 2016, web fonts are just over 3% of an average page’s overall weight.

Even though the weight of web fonts makes up only a small portion of the overall web page, every optimization you make helps contribute to faster load times. Check out some ways below to speed up those fonts!

What are Google Fonts?

First off, for those of you who might not know, Google Fonts is an open-source (free) directory of over 800 web font families which you can use on your website. They are also available to download locally for print and other uses. Millions of WordPress websites utilize Google Fonts as it is a great free way to enhance the look and usability of your site.

If you are going for pure performance, system fonts will always win, but there is nothing like the professionalism and aesthetic of a good web font. And in fact, typography has been shown to affect conversions in a positive way. But everything has its cost. And so, it is important to understand how adding Google Fonts to your WordPress site affects speed and performance.

How to Use Google Fonts in WordPress

There are a couple of ways to add Google Fonts to your WordPress site. The first and default way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

When you add them to your site there will be an external request to fonts.googleapis.com.

The are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

WordPress Plugin

If you are a WordPress beginner, the easiest way to add Google Fonts to your website is probably with a free plugin. The Easy Google Fonts plugin is a good popular example. As of writing, it currently has over 300,000 active installs with a 4.9 out of 5-star rating.

Add Embed Code From Google Fonts

It is important to note that most WordPress plugins add slight overhead, and so I prefer to add Google Fonts with their much simpler to use embed code. So, head over to Google Fonts and choose the font you want. For this example, I’m using Roboto.

Click on the “Customize” option. This is an important step as each font family has different font weights. Typically you will want regular, medium, and bold.

Note: Every font-weight you include adds to the overall load time of your fonts, so don’t just select all of them. The less, the better.

Then click on the “Embed” option. This is where you will want to copy the embed code it provides.

Take that code and put it into the section of your WordPress site. There are different ways you can do this, some might prefer to enqueue the fonts, but for this example I simply added the code to the header.php file. Note: This might vary slightly depending on the theme you are using.

Then, to actually make your WordPress theme use the Google Fonts, you have to add some CSS styles. Below is an example of what I’m using. If your theme admin panel doesn’t have a custom CSS editor you can always use a free plugin like Custom CSS and JS.

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Now that you know some quick methods for adding Google Fonts to your WordPress site, I’m now going to do a few quick tests to see alternative ways of speeding them up. I ran some tests first with the setup above and the average speed came out at 418ms. Note: Each test was run five times, and the average result was taken.

Host Google Fonts Locally

Another way to deliver Google Fonts on your WordPress site is to host them locally on your web server. If your audience is in a certain geographical location and close to your server, it can actually be faster to host them locally than it is to use Google Fonts. Google Fonts CDN is great, but adding those additional external requests and DNS lookups can cause delays.

This method will typically only work if you are using fast hosting. In the example, I’m using managed WordPress hosting from Kinsta, which is ironically powered by the Google Cloud Platform.

To host locally I actually utilized a free tool called the google-webfonts-helper. This allows you to download the Google fonts locally more easily and gives you all of the CSS. Below is an example of what we will end up with. You will need to upload the fonts you downloaded to your web server. In this case, I put them in a folder called “fonts.”

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

We then need to make sure to remove the embed code from Google Fonts in the header so that you no longer have those external calls. I then again ran some tests with the setup above and the average speed came out to 386ms.

Note: The web server is located in Iowa, and the speed test from Pingdom was run from Dallas, TX. So as you can see, even though the server is located elsewhere in the United States, it is still slightly faster to load Google Fonts locally on the server. Of course, you will want to test various locations yourself based on your own audience.

Host Google Fonts on Your Own CDN

Now for a third scenario. On the site above, I’m using a third-party CDN provider already (KeyCDN) to host all of the other assets(images, CSS, Javascript, etc.). What happens if we now throw our fonts on the same CDN, instead of Google’s CDN?

I’m using the free CDN Enabler WordPress plugin. This actually copies the fonts from the “fonts” folder on the web server to KeyCDN automatically. We then have to tweak the code slightly so that the path to the fonts is now pointing to the CDN (such as cdn.domain.com).

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I then again ran some tests with the setup above and the average speed came out to 384ms.

As you can see, using a CDN is yet again just slightly faster. Not by much, but if you compare it to Google’s CDN, test it, it definitely is faster. Part of this is because it can utilize the same HTTP/2 connection, and it still reduces the external call and DNS lookup, just as hosting locally does. And of course, one advantage to this method is that it will be globally faster.

Summary

As you can see from the tests above, the Google Fonts CDN is great, but it might not always be the fastest. Of course, it will always depend on your own environment and where you are serving up traffic, whether it be to a local audience or global.

I recommend testing each method above for yourself and see which one is the fastest and works the best for your WordPress site. And remember, only load the font weights you actually need!

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.

Squeezing the Most Performance from Cheap Web Hosting

Eric Karkovack — Thu, 02 Nov 2023 08:38:32 +0000

Web hosting plays a vital role in a website’s success. Regardless of how beautiful or functional your site is, a slow or buggy server can destroy the user experience. It can also cost site owners in the form of lost business.

And while we’d all love to have access to enterprise-grade hosting, that’s unlikely to fit within most budgets. Sites for small businesses, blogs, and non-profits often have to settle for something less.

Lower-tier (i.e., cheap) web hosting simply won’t carry the same computing power as those expensive accounts. And some providers make bold promises (unlimited storage and bandwidth, to name a couple) that deflect from flawed performance and limited support.

However, this doesn’t mean you’re stuck in the mud. There are providers out there that offer stable, low-cost hosting. From that foundation, there are things you can do to squeeze every bit of performance from your setup.

Today, we’ll share some tips for getting the most out of your cheap host.

Find the Best Hosting for Your Money

With so many hosting providers to choose from, it can be difficult to discern between them. And just because multiple companies offer similar pricing, it doesn’t mean their level of service is the same.

This especially holds when it comes to cheap hosting. Quality isn’t easily identified. And big, recognizable names don’t necessarily translate into competence or performance.

Plus, the information a provider makes available on their website doesn’t tell the whole story. You can find out the monthly cost and how much storage space is included. But the finer details – things that aren’t often published – are what make the difference.

Therefore, it’s worth looking into independent reviews and asking other web designers about their experiences. Speaking directly with the host is also recommended. Taken together, these items paint a clearer picture than sales pitches.

While we can’t tell you which host or plan to choose, we can say that there are solid low-cost options on the market. In the end, it’s about finding a host that offers an acceptable level of resources and support. Oh, and it will also need to fit within your budget.

Look For Ways to Reduce Server Load

Shared web hosting is generally on the lowest rung on the pricing ladder. The server may have plenty of resources, but you’re sharing them with other users. Thus, your site will have limited access to key performance enhancers such as CPU cycles and memory.

One way to stretch the available resources is by reducing the load on the server. And several things can help:

Make Your Site as Lean as Possible

A bloated website won’t perform at its best – even on top-flight hosting. Put it in a shared environment and your key metrics will look even worse.

That’s why it’s important to build the leanest website possible. That means including only the scripts and styles required to get the look and functionality you need. For example, you may opt for a barebones WordPress theme as opposed to one that offers extra features you’ll never use.

Database calls are another resource hog. Therefore, utilizing static HTML or headless CMS technology can be a boon to front-end performance.

In short: if a feature isn’t necessary – leave it out.

Offload Media, Scripts, and Stylesheets

A typical web page could have dozens of files to load. Calls to JavaScript and CSS files not only cost you in terms of server requests, but they can also be render-blocking resources that slow down load times. Image, video, and audio files also take their toll.

One cost-effective way to minimize their impact is by using a content delivery network (CDN). This offloads your site’s files into the cloud. Strategically placed servers deliver these assets as close as possible to a user’s geographic location.

While most CDN providers charge a fee, you often get a lot of performance for the money. In the long run, it may end up being cheaper (and potentially more effective) than upgrading your hosting account.

Consider SaaS Providers for Key Functionality

Serving up files impacts performance. But parsing code and writing to a database can grind a low-powered server to a halt. The more complex the code, the more burden on the host.

That makes running key functionality on your server more difficult. Any sort of data-intensive site, like eCommerce or membership, can become sluggish in this situation. Even relatively simple tasks like a user search may cause a slowdown.

This is where software-as-a-service (SaaS) providers can be beneficial. By employing a hosted shopping cart, for example, the heavy lifting is done by a third party. Once again, this frees up your server to handle other jobs.

And yes, there are fees involved. But consider that upgrading to slightly more expensive hosting still may not provide enough horsepower to run these features efficiently. The level of service needed to do so could cost more than paying for a SaaS.

Use Caching

If you’re using a content management system (CMS), smart use of caching can do wonders for performance. It takes your site’s dynamic content and turns it into static HTML files. That results in fewer calls to the server – including those expensive database requests.

Some hosts offer server-level caching – which is definitely worth using if available. However, there are other options available, such as WordPress cache plugins. Even a little bit of effort can make a difference here.

Cheap Hosting Doesn’t Have to Slow You Down

Not everyone can afford top-tier hosting plans. Besides, bumping up to the next level doesn’t always mean better performance. You may just be paying for extra hard drive space. Great if you need it, but it won’t make your site run faster.

Regardless, it’s quite possible to have a high-performing website that resides on cheap hosting. The first step is to find a host that provides a baseline of stability.

From there, it’s about building a lean website that prioritizes performance. This is good practice for every website – even those on dedicated servers. Thankfully, modern languages and tools can help you along the way.

But the optimization doesn’t stop there. Employing methods to reduce the load on your server, such as CDNs, caching, and SaaS providers, will help to keep things running smoothly.

In the end, cheap hosting doesn’t have to mean poor performance. While it may not be the ideal environment, the right approach can produce excellent results.

The post Squeezing the Most Performance from Cheap Web Hosting appeared first on Speckyboy Design Magazine.

How to Analyze & Speed Up Your Website

Chris McGuckin — Sat, 11 Feb 2023 20:39:32 +0000

Having your website load pages quickly and efficiently is more important than ever, not just from the standpoint of ranking higher in search engines but also from a user experience point of view.

Back in 2006, Amazon published information showing that for every 100 milliseconds faster their website got, their revenue increased by 1%. Recent Google data also indicates that users will spend 70% more time on your site if it loads in under 5 seconds.

Here I will show you how to analyze your website and carry out a few common and simple changes that will, in most cases, speed up a slow-loading website dramatically and have users spending more time on your site as well as search engines favoring your fast loading website.

Tools For Analyzing Your Page Speed

There are a number of free to use tools out there to check over your pages and determine what’s slowing them down. These three, in my opinion, are the most popular and easy to use:

Pingdom, although it provides less information than the other two tools, the information it does offer is some of the most important, and the corrections it shows, if corrected, will show some of the most immediate speed improvements to your pages.

GTMetrix is similar to Pingdom but shows much more information on how you can potentially speed up your pages. I generally use this after Pingdom, if my pages are still loading slowly or if I feel I can get more speed out of them.

Google PageSpeed Insights, I find it to be less important as the changes it recommends after using the other tools only ever really improve speeds by a small amount, if at all, but it’s still a useful tool for improving your pages.

Don’t Get Hung Up on a Perfect Score

With all three tools, it’s important not to get hung up on the scoring system and set out on a quest for the absolute perfect score. The main thing is to identify the main problems and correct them to reach the optimum page speed you are looking for.

This is especially true for Google PageSpeed Insights, as people commonly think that having a high Google page speed directly influences their search engine ranking position, which is not the case.

Analyzing Your Web Pages Using Pingdom

To get started, simply go to Pingdom, enter your web page URL, choose a server closest to your location and click on “Start test.”

Once it has analyzed your page, you will be shown information such as a total page score along with how long it took to load and a breakdown of the things you can fix to speed the page up.

How to Speed up the Pages

Now that you know what’s causing the slow page speeds, it’s time to fix the suggested problem areas. There are a whole range of suggestions that may come up. I will only be able to cover a few of the most common problems, which should show immediate improvements to your web page’s loading times.

Nearly all of the problems that arise are pretty simple to fix, even for a novice. Information on how to fix each one, that I’ve not covered here, can be found with a simple web search.

Leverage Browser Caching

Browser caching essentially works by telling the user’s browser to request the web page’s resources from the browser, instead of from the web server.

Although this won’t speed up the site for new visitors, it will drastically speed up your pages for returning visitors. To do this, you must add a few lines to your .htaccess file.

Your .htaccess file can be found in the root folder of your website. If you do not have one, simply create a text file, add the code below and save it as .htaccess within the root of your website.

More detailed information can be found here.

## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ## EXPIRES CACHING ##

Merge, Minimize and Move Resources

Merging your JavaScript and CSS files into as few files as possible, as well as minimizing them, will allow them to be loaded faster. Also, moving the files below the fold so that the page content loading isn’t held up waiting for the JavaScript files to load will also improve speed.

Remember when merging JavaScript and CSS files into single files to make sure they are in the correct order. You can use the browser’s inspector to check the order that the files are loaded, then go through each file, copying the code and pasting the code into the single file.

This will ensure, for example, that JavaScript functionality such as jQuery is loaded before any JavaScript functionality that relies on jQuery. The same applies to CSS, to ensure rules that are supposed to overwrite other CSS rules are applied properly.

If the single files become too large, you can break them up into multiple files. However, try to keep the files to a minimum. Once you have your final files, minimize them and save them. Then replace all the old references to them in your HTML with the new files.

For the JavaScript files, add the script tags that reference the files to the bottom of the HTML before the closing body tag.

Use a CDN for Your Resources

Loading static resources from a CDN can correct a couple of speed issues. This will allow your page to load while the browser fetches the content from another domain. This also allows you to fix the “Serve content from a cookieless domain” problem you may run into if your website is using cookies.

You can use CDN providers to serve your content. However, it’s easy to create your own CDN to serve your content. To do this, make sure your CSS, JavaScript, or image files are in a separate folder from the other files on your website. Then you create a subdomain to point directly to the folders.

For example, for serving CSS, create a subdomain called csscdn.yourwebsite.com and point it directly to your CSS folder within your website.

Then on the front end, instead of referencing the CSS files using /css/styles.css, you use csscdn.yourwebsite.com/styles.css. You can do the same for your JavaScript, images, and any other resources to reduce the loading times of your page.

Compress Your Images

These days image compression can be done without much, if any, noticeable loss of quality. There are a range of image compression techniques out there to use, including WordPress plugins and scripts that can compress your images upon upload, automatically.

For manually compressing images, there is a free to use tool called Tinypng where you simply drag your images onto the page, it compresses the images, and you can then download the compressed versions.

Compressing all your files can significantly increase the loading speed of your page. Tinypng is able to compress a 57KB image into a 15KB image without any noticeable quality difference at all. If your web page has large images or displays many images, just compressing all the images alone will make your page load in a fraction of the time.

If you are not already familiar with Gulp or Grunt, then you should seriously consider adding them to your web development toolset as they are both great for automating tasks such as JavaScript and CSS minification, image compression as well as a whole range of other, extremely useful tasks.

The post How to Analyze & Speed Up Your Website appeared first on Speckyboy Design Magazine.

Skyrocketing WordPress Speed: The Ultimate Guide To WP Fastest Cache

Dmytro Spilka — Sun, 22 Dec 2019 23:22:43 +0000

WP Fastest Cache is a versatile plugin that helps decrease the page load time of your website by creating quickly rendered HTML files that are stored and accessed by subsequent visitors.

Since a WordPress website is rendered through PHP and MySQL it requires RAM and CPU usage each time the page is requested from the server. This slows down the load time and places more effort on the user’s computer or device, as well as the database. However, with a cache system, the page is rendered one time and then stored as a static HTML file, thereby reducing the load time for each new visitor.

How WP Fastest Cache Works

After installing the plugin, start digging into the customization settings by clicking on the WP Fastest Cache link in the menu bar.

This directs you to the Options page, where you will really begin to utilize the plugin’s features. We will focus on each one of the tabs in the option menu.

1. Starting with the first tab, Settings, we will start implementing the caching system. Check the first box, Enable, to allow the plugin to start working on your site.

2. The next option, Widget Cache, is grayed out, which means it is not available in the free version of the plugin, in order to use any of the premium options, you will need to upgrade to the paid version. We will focus on the free options in this tutorial.

3. The Preload option will generate the page caches automatically, instead of when someone visits the site. Choose which features you want to automatically cache and click OK.

4. The next option allows you to block the cached version for logged-in users and will cause the page to load naturally.

5. After that, we’re also given the option to block the cached desktop page when someone accesses the site from a mobile device.

6. The subsequent Mobile Theme would allow you to cache the mobile version, but is available only to those who purchase the premium version.

7. New Post allows you to choose which cache files to clear when new content is published on your website.

8. Similar to the previous option, Update Post allows you to choose which cache to clear when content is updated on your website.

9. Minify HTML allows you to decrease the amount of HTML that composes your cache file, thereby also decreasing the load time for your visitor.

10. Minify CSS actually decreases the size of your CSS files to make page rendering faster.

11. Combine CSS will integrate multiple CSS files into one file in order to reduce the number of HTTP requests and decreasing load time.

12. As with the CSS, the Combine JS option will combine multiple JavaScript files into one file for fewer requests from the server.

13. Gzip compresses the size of files and resources being sent from the server, allowing them to load faster.

14. Browser Caching enables frequently used files (such as CSS and images) to be stored in a visitor’s web browser so the resources will not have to load each time the visitor views the page.

15. The last option on this page is Language. This will only change the language in which the options menu appears for this plugin, not for your site as a whole.

Choose Turkish, for example. Only the words contained in the plugin’s options pages will be changed.

English is the default. Make your selection from the dropdown menu, then click Submit to save the changes you’ve made on this page. You’re well on your way to optimizing your site with a cache system.

Next, let’s check out the second tab in the menu. Delete Cache.

Delete Cache

The grayed out features are only for premium subscribers, but the two main options at the bottom are still available.

Click on Delete Cache to delete every cached file.
Choose Delete Cache and Minified CSS/JS to delete all caches as well as the minified CSS and JS files created in previous options. The minified versions of CSS and JS are kept in a separate file on the server that the rest of the cache, so choose this second option to delete those as well.

That’s it for this tab. Not bad, right? Let’s move on to the next tab, Cache Timeout.

Cache Timeout

1. In this tab, we have the chance to create Timeout Rules. Click Add New Rule to bring up an options box.

The first option in the box is If REQUEST_URI. Click to view a dropdown menu with four choices: All, Home Page, Starts With, and Is Equal To. Choosing All will cover every URI requested by visitors, while the following three options will limit the timeout rule to either the Home Page or a URI Starting With or Equal To the value you type in the text box next to the menu.

Once you have chosen the URI type, choose what happens Then from the dropdown menu. The options in this box are for the time period in which the cache is deleted.

Choose how frequently the cache should be timed out, and then click Save. You will see your new timeout rule appear.

Create as many rules as you want in order to cover different areas of your website. Choose the type of URI (whether homepage or starting with a specific URL) and choose the frequency in which the cache is deleted for that area.

Great, that was the Timeout Rule section. Let’s move on to the next tab. Notice that Image Optimization and Premium contain content only available to premium subscribers.

We will move on to the Exclude tab. The first option here is to exclude certain pages from being cached.

Exclude

1. Notice there are two default rules to exclude the wp-login.php and wp-admin pages. These cannot be edited or deleted.

2. Click Add New Rule to create a new rule.

3. Select the type of page, content or URI you would like to exclude, and click Save.

4. You will see your new exclusion rule appear. Any rules you create can be edited or removed by clicking on them.

5. The next section to which you can add rules is the Exclude User-Agents area. Again, notice two default rules that cannot be changed or removed. Choose Add New Rule to define a rule.

This option allows you to create a rule that excludes caching for a certain type of user agent. Type your content and click save.

6. The last three options allow you to exclude specific cookies, CSS or Javascript. Use these in the same way by clicking Add New Rule, choosing the excluded URI and saving the changes.

You should now have a good handle on the types of files that are being cached, minified or combined, as well as how to exclude certain types of pages, content or user agents from utilizing the cache system.

CDN

Of the two tabs left to explore, one is available only to premium subscribers. So, we will take a brief look at the last tab we can utilize. Click on the CDN tab.

In a nutshell, CDN, or Content Delivery Network, is a system of storing your cached files in different geographic locations to minimize the amount of time it will take for a website user in another country to access the files.

There are different CDN providers which can help deliver your content speedily. If you have an existing account with any of the providers listed above, click on it to get set up. If not, it’s easy to create an account with MaxCDN to get started using this additional feature.

The post Skyrocketing WordPress Speed: The Ultimate Guide To WP Fastest Cache appeared first on Speckyboy Design Magazine.

How to Optimize Web Performance and Bottom Line

Robert Moseley — Thu, 05 Apr 2018 19:00:29 +0000

Patience is not a virtue for website visitors and online shoppers. Every fraction of a second counts when it comes to keeping – or losing – a visitor on your website.

According to Kissmetrics, load time is a major contributing factor to page abandonment. Because the average web visitor has no patience for a page that takes too long to load, abandonment increases as a percentage with every second of load time. Nearly 40% of users will abandon a page after 10 seconds, the blog noted. Mobile Internet users probably experience the most frustration with this issue – 73% noted that they’ve encountered a website that was far too slow to load.

The page load problem directly impacts the shopping behavior of website visitors. The Kissmetrics also noted that 79% of shoppers who were dissatisfied with website performance are less likely to buy from the same site again. Nearly half of consumers expect pages to load in 2 seconds or less, and a 1-second delay will decrease customer satisfaction by 16%.

The consequences of these delays translate into real money. eCommerce giant Amazon revealed that a page load slowdown of only 1 second would cost it $1.6 billion in sales revenue. Similarly, Google noted that a slowdown of just four-tenths of a second in its search results would result in a loss of 8 million searches per day, which translates into millions less in online advertising.

Getting to the Heart of the Problem

The biggest contributing factors impacting load time are images, videos, and graphics. Today’s websites incorporate more visuals, and less text, to draw in visitors. According to HTTP Archive, nearly 64% of a website’s average weight is images, while video accounts for another 8%.

Since these types of media account for nearly three-quarters of the website size, it’s important for you to more efficiently manage images and videos on your site to improve performance and conversion rates. Let’s look at some steps you can take to reduce the impact of images and video on your website’s performance.

Use More Efficient, Modern Image Formats

Google has added support for its WebP image format to Chrome browsers, and Microsoft has done the same for JPEG-XR in most of its Internet Explorer and Edge browsers. But many developers have still not embraced these changes, sticking with the same JPG and PNG formats rather than taking advantage of how the modern formats can optimize their sites.

Ideally, you should convert images to the WebP and JPEG-XR when appropriate, and adjust compression quality to balance between the formats. It’s also important to detect the specific browser that accesses each image and deliver a version of the image optimized to the respective browser. Doing so will enable you to ensure users receive the best images possible, in terms of visual quality and file size optimization, without slowing down your site.

Eliminate Wasteful Browser-side Resizing

Developers often use browser-side image resizing as a shortcut, rather than resizing images on the server-side. While the end result looks exactly the same on modern browsers, the impact on bandwidth is quite different. With browser-side resizing, website visitors waste precious time downloading an unnecessarily large image and you waste bandwidth delivering it to them.

For older browsers, the problem is even more pronounced as their resizing algorithms are usually sub-par. You need to make sure your images perfectly fit their required website dimensions. It’s well worth creating different thumbnails of the same image rather than delivering a large image and relying on the browser to resize it.

Use Correct Image File Types

JPEG, PNG and GIF are the most common file formats used on websites today, but each one has very different roles. Use the wrong format and you’re wasting your visitors’ time and your own money. A frequent mistake is using PNGs to deliver photographs. There is a common misconception that PNGs, as lossless formats, will yield the highest possible reproduction for the photos.

While this is generally true, this is also quite an unnecessary optimization. It’s important to keep in mind what image format should be used for the content shown. PNG should be used for computer generated images (charts, logos, etc.) or when you need transparency in your image (image overlays); JPEG when you are showing a captured photograph; and GIF when animation is needed (Ajax loading animation, etc.).

Don’t Use a Single Image Size Across All Delivery Mediums

Your website is being viewed on many different devices, particularly as smartphones, tablets and smartwatches have become preferred by consumers. Often developers offer the same images across all device resolutions, using client-side resizing for the images. The images may look great, but visitors waste time loading unnecessarily large images to their devices and you pay for redundant bandwidth usage.

This is particularly unfair to 3G users and roaming users who pay a large extra to download the uselessly extra high-resolution images. To avoid these issues, you should identify visitors’ mobile devices and resolutions using their user agent. With the correct resolution in hand, retrieve the best-fitting image from your servers. This requires that you make available a set of thumbnails for each of your original images. There are excellent Javascript packages available that will automate this process.

Leverage Responsive Design

Each device that a visitor is using to access your site has a different resolution. A website’s markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities, and mobile device orientations. Managing, manipulating, and delivering images is one of the main challenges of responsive design that web developers face.

Due to these challenges, many websites are built with the highest resolution images that may be needed and simply scaled down client-side depending on the breakpoint. This process is inefficient and harms performance. But there are options, such as the open source tool Responsive Breakpoints, which can help you generate all the image sizes you will need, as well as the appropriate HTML code.

Utilize Content Delivery Networks (CDNs)

CDNS typically have servers strategically deployed around the world to shorten content round-trip times. CDNs allow images to be served more quickly to users and reduce the likelihood of crashes, enhance SEO performance, and improve the user experience. When you are choosing a CDN, you will need to consider its level of global coverage, the caching rate, ability to run logical operations at the edge, average response times, and other metrics, such as average invalidation times.

The Impact of Change

By employing these best practices, you can truly make a difference in the user experience, encouraging visitors to stay longer, browse more, engage, and make purchases. Consider the results of these companies:

Apartment List, an online resource that helps individuals search for rental housing, found itself dealing with a variety of different image formats and resolutions as it picks up data feeds of images from the various apartment communities featured on its site. By transforming all of these images into optimal images for presentation on mobile devices of various sizes, as well as desktops, as well as leveraging responsive design techniques, the company saw an increase of nearly 20% in its conversion rates.

KartRocket, a SaaS-based e-commerce platform offering a transparent and complete e-commerce ecosystem that helps SMBs to quickly and easily create online stores, needed to find a way to ensure quality of images while not impacting load time or site performance for its clients. It leveraged tools to dynamically control images, so that they were optimized for small thumbnails, large banner images and main product images. This approach enabled KartRocket to achieve a 100x increase in response time for image loading.

The Bottom Line

When time is money, website owners can’t afford to take all the necessary steps to improve their visitors’ experiences. Even a fraction of a second delay in loading a page could translate into lost revenue and confidence on the part of the consumer.

Considering that images and videos are the biggest bandwidth hogs on most websites, you need to take a serious look at your web design and image formats, then take the steps necessary to ensure that media is optimized so your site – not to mention your revenues and customer perceptions – don’t suffer as result.

The post How to Optimize Web Performance and Bottom Line appeared first on Speckyboy Design Magazine.

Implementing AMP to Boost Your Page Loading Times

Vincent Sevilla — Tue, 20 Feb 2018 09:16:06 +0000

Most web administrators and developers are aware that the loading time of a site is crucial to the site’s overall success. A typical user will not wait a millisecond more than three seconds for a page to load. They will just click away, to the ruination of all your efforts to make your website attractive and your content organic and relevant. You need to get them to stay to see all your handiwork, so optimizing your pages is essential.

However, it is not as easy as it looks, especially for mobile. With an increasing number of people using mobile-only for their web browsing, this is an important consideration. Striking the balance between a great page and a fast page can be an exercise in futility. Fortunately, you now have Accelerated Mobile Pages or AMP to help you gain some traction with your mobile pages.

What is it?

Google rolled out AMP in October 2015. An open-source framework, it enables mobile web pages to load quickly. It is intended to help web publishers quickly improve their loading speed even while running ads, which is a major source of revenue for many websites. Many publishers can actually do this on their own, but it requires some intensive optimizations that they may not be able to implement effectively. AMP simply makes it easier to achieve optimal results for everyone, including mobile users.

AMP is slated for future integration into the Google platform, as well as other web technology companies, so it would be good to put it in now. As an early adopter, you can wow your users before too many sites get onboard with AMP. By then, the higher speed is no longer awesome but simply standard.

How Does it Work?

There are three basic parts to AMP: the markup language, the resource handling, and the content delivery network (CDN). The AMP HTML is just like the standard HTML save for some restrictions, properties, and custom tags. The good thing about this is if you are already familiar with standard HTML, your learning curve is small. Here is how to create your AMP HTML page. The way it works is that AMP documents are designed to render the parts of the page above the fold and not resource intensive. The page loads many of the elements before the user has time to get impatient, and this gives your page time to load the rest of the elements, including ads.

The AMP JavaScript comes in handy when you have some interactive elements in your mobile web page such as polls or lightboxes. In general, however, the developers of AMP are trying to do away with JavaScript altogether by using web components and custom elements. It is a work in progress, however, so in the meantime, you may want to keep interactive elements to a minimum. You cannot use JavaScript from a third party, by the way, so that is not an option for you.

The AMP CDN is an option at this point. Currently, Google is providing the caching and optimizations of AMP pages using their CDN service. However, you can also make your own CDN, or use a web server.

What Should I Expect?

To achieve optimal mobile speed, you do have to change a few things in your work process. You will need to maintain two versions of all your pages. One is your desktop web page version, aka standard, and the AMP version. In the standard version, you can keep all the bells and whistles that require JavaScript, while the AMP version will do away with most of them. You can still keep some of the elements by using iframes, particularly lead capture forms.

You will also have to redo your site template because AMP requires all CSS style sheets to be less than 50KB and in-line. All custom fonts also have to be loaded using an amp-font extension. The same restrictions apply to regular images, which must be a specific width and height, and must use a runtime managed amp-img element; animated figs require an amp-anim extended component… HTML5 locally hosted videos will use amp-video, while embedded YouTube videos use amp-youtube. None of these changes are hard to implement, but you do have to plan your site design around them.

Most importantly, you need to flag your pages as AMP-enabled by using the tag . This tells Google and other AMP project supporting technologies that you are onboard. You should also use Schema.org meta data to identify the type of content on the page i.e. article, recipe, review, to get you into the Google Search news carousel. Here are other ways to make your page discoverable.

How Can You Use it to Boost Your Page Ranking?

The main purpose of AMP is to make your pages load really fast. Initial testing of the protocol shows speed improvements of up to 85% on 3G connections. That means if your site’s page currently loads in three seconds (if you’re doing your job right that should be the minimum speed), then it will load in 0.45 seconds, which is practically instantly.

That is pretty impressive, and the developers are still trying to make it even faster. You can apply the same improvements for all your other pages, and it is simple enough to do, so why not? The main benefit of AMP HTML is you only need to send a small number of HTTP requests to load a page, and that means even with slow connections, you achieve a respectable speed.

The increased loading speed can help you snag users as well as improve your relevance for ad placers. AMP supports a wide range of ad formats, which is why many of the top ad networks are using the amp-ad extension component. If you are AMP-enabled, you are more likely to attract the attention of these ad networks, which means more money coming your way.

Conclusion

It makes perfect sense to AMP your mobile web pages. You not only improve the user experience, you make your site more visible on Google and other search engines, and more eligible for AMP-supported ad networks. With just a little elbow grease, you can boost your page ranking with AMP.

The post Implementing AMP to Boost Your Page Loading Times appeared first on Speckyboy Design Magazine.

The Types of Websites That Can Benefit From a CDN

Eric Karkovack — Thu, 30 Nov 2017 04:47:19 +0000

A lot of time and effort goes into creating a killer website. But we can take all of those blood, sweat and tears and narrow them down into a few key components.

In general, websites need three things to flourish:

1. A User-Friendly Design
2. Great Content
3. High Performance

Each one of these items is equally important. If you’re missing just one, it can really hold you back. Funny enough, perhaps the easiest of the trio to attain is that lightning-fast performance. While most basic web hosts can’t necessarily deliver top speeds, there is a service that can: a Content Delivery Network (CDN).

If you’re unfamiliar with what a CDN does, it essentially takes your site’s content and distributes it among a network of high-speed servers. When a user visits your website, the CDN serves content from the server nearest to the user’s location.

This results in faster load times and lower latency. It can take a lot of pressure off of your average web hosting account and provide a much better UX. Beyond that, it can also be super cost-effective.

That being said, there are certain types of websites that can benefit from using a CDN more than others. Let’s have a look at a few website categories that are a perfect fit.

Media-Heavy Websites

Websites that contain a lot of photos, videos or audio clips can really put a load on a web server. When it comes to photos, each one that loads on a given page results in a server request. More requests mean more work for the server. Put enough of those requests together and things can slow to a crawl.

Video and audio are more often on-demand services that fully load in once a user has interacted with a media player. But these files can be huge. Consistently loading in files for a popular video or podcast is also a major drain on server resources.

How a CDN Helps: Because your content is distributed on a wide network of strategically placed servers, those multiple requests are geographically closer to the user. This cuts down on the time it takes for a request to be served up in the form of content.

Plus, your web host doesn’t have to grind out those giant media files. The CDN’s powerful setup handles all that dirty work in short order.

Sites Prone to Traffic Spikes

One of the great joys of publishing content on the web is when something you’ve created really catches on. But if your server can’t handle the traffic, it also becomes a missed opportunity. If hordes of anxious visitors can’t get to your site, they’re going to move on to the next big thing.

The same thing goes for ecommerce sites. Around the holidays, more people are looking to shop online. If your site is slower than a snail stuck in glue – you’re going to lose crucial sales. That one bad user experience can even have long-term repercussions for your business.

How a CDN Helps: A CDN has the added benefit of scalability. So when you get hit with loads of new traffic, the network can handle it. That’s important for both the expected holiday rush and the unexpected viral sensation.

Far-Flung Online Communities

Building an online community through shared interests like hobbies or industries can be a very rewarding experience. It provides an opportunity for people to connect with other like-minded individuals regardless of their location.

But sites that enable communication through forums or chat can wreak havoc on a shared hosting account. Plus, the fact that members are spread out across the globe can result in a ton of latency for those who aren’t near your server. That leads to an underperforming site that can jeopardize your ability to keep members.

How a CDN Helps: Off-loading content to a CDN takes a load off your server, which helps to speed up communication between members. And since content can be served from different geographic zones, users can benefit from lower latency no matter where they live.

Third-Party Resource Sites

A resource site is one where that serves up content that is used by other websites. Items like ads, videos, forms and chat services can be used in any number of places. The great thing is that just about every site utilizes resources from a third party somewhere along the line.

For example, if you’ve ever embedded a YouTube video or served up an ad from a network – you’ve used a resource service.

Of course, the more popular your service becomes, the more weight that is put on your server. Simultaneously serving content to other websites is serious business. It’s also a major undertaking – even for a dedicated server.

How a CDN Helps: When you’re serving more than just your own website, uptime and reliability is absolutely critical. Since a CDN is redundant across multiple servers, you’ll be better protected against outages. Even if a single server goes down, the rest of the network can pick up the slack.

A CDN Offers Reliability, Scalability and Affordability

Integrating a CDN into a website solves one of the most vexing problems most site owners face: Building a robust infrastructure on a budget. Not everyone can afford their own datacenter. But thankfully, a CDN offers us an affordable way to take advantage of the type of global, high-speed infrastructure a website needs to be successful.

If you’re interested in learning more about what a CDN can do for your website, check out KeyCDN. They offer a blazing-fast worldwide network that has been built to handle the demands of the modern web. Plus, they offer an affordable pay-as-you-go pricing plan that means you’re only paying for the data you use.

Look to KeyCDN to provide simple, fast and reliable content delivery.

The post The Types of Websites That Can Benefit From a CDN appeared first on Speckyboy Design Magazine.

Image Management Best Practices

Nicole Amsler — Fri, 03 Nov 2017 11:48:14 +0000

There’s no debating the fact that including images on your website or mobile app draws the interest of users and leads to stronger engagement. For example, posts that include images produce 650% higher engagement than text-only posts, according to a WebDAM infographic. Use of attention-grabbing images is only going to grow. Consider that by 2018, 84% of communication will be visual, the infographic noted.

But delivering a consistent experience – and the optimal image – across a variety of desktop and mobile devices still remains a huge challenge for developers. They need to consider the size of images – since larger files take longer to download, eat up bandwidth and have a negative impact on website performance and user experience – as well as the type of device on which its being viewed and the graphic design in which the image is placed.

Efficient image management is the key when you want to improve engagement with visually appealing images, offer faster loading pages with appropriate image formats, and deliver a consistent experience across a wide range of devices that require different graphic layouts, resolutions and viewports.

The goals: to improve development productivity, speed your website to market, and find a way to avoid creating multiple versions of each image to support responsive design.

To help you meet these goals, there are four best practices you should employ:

1 – Optimize Images for Better Performance

Image optimization involves delivering images with the smallest possible file size while maintaining visual quality. Doing this will save bytes and speed the performance of your website.

To select the optimal image, you must understand all the various factors that influence the image’s file size and quality, as well as consider what actions may result in unnecessary bandwidth use, such as wasteful browser-side resizing, delivering static icons one by one and using a single image size across all delivery mediums.

One of the major aspects of image optimization involves selecting the correct format to deliver to your users, and avoiding use of unnecessarily high image quality images. You should look for a solution that dynamically selects the most efficient format – either traditional JPEG, PNG and GIF, or modern formats, such as WebP developed by Google and JPEG-XR developed by Microsoft – and automatically adjusts the compression quality appropriately for every scenario.

With growing use of responsive design, you’ll need to make sure that you also are able to scale and crop images to fit any page layout, on any device.

2 – Simplify Workflow

There’s no doubt you have a specific workflow associated with adding images to your site or app. In many cases, a designer will create artwork, then the developer requests multiple sizes for display on various devices and multiple formats for different browsers. Then they have to store multiple versions and write the logic that enables the right version to be selected and delivered to every user. If you’ve ever done this, you know it takes a significant amount of time, and can slow your time to market.

Ideally, you should automate the process as much as possible. Any solution you use should enable you to create one high-quality version of an image, which can then be dynamically transformed and delivered in the proper version to suit the viewing requirements of every user and every device. By doing so, you will save time and resources by not requiring your designer to designer to create multiple versions of every image, or do additional work if you need the images transformed in any way.

3 – Move to HTTP/2

Even though websites have changed dramatically in looks and style over the years – from simple text-based pages to advanced in-browser apps full of images and videos – the underlying HTTP protocol really hasn’t changed – until recently, with the approval of the HTTP/2 protocol by the IETF. Use of HTTP/2 can help you optimize the user experience on your app or website even more.

HTTP/2 For Faster Safer Internet [Via TheHackerNews.com]

Generally this new HTTP protocol will improve website performance; reduce the amount of bandwidth required by supporting header compression; improve latency and make it easier for developers to use optimized connections, by eliminating the need for domain sharding and other subtle performance tricks.

The biggest difference you’ll see when moving to HTTP/2 is with image-heavy pages. And the more images on a single page, the more improvement that will be seen. The reason: With HTTP/2, instead of requesting images sequentially or creating many parallel connections, the browser makes a single connection to the server and optimizes the requests to all images over a single connection.

4 Leverage CDNs for Globally Distributed Caching

Content distribution networks (CDNs) are large, geographically distributed network of specialized servers that accelerate the delivery of web content and rich media to internet-connected devices. They provide many benefits to various parties, including web users, content and application owners and service providers.

CDNs support faster page loads, improving the user experience, which ultimately lowers abandonment rates, increases impression, improves conversion rates and strengthens customer loyalty.

These best practices will enable you to create a seamless, end-to-end process for dealing with images, including uploading, organizing, viewing, storing, delivering and managing all of the images. With the right solution, you can find a single platform, which will further help reduce the integration hassle and chaos, while improving team collaboration.

The post Image Management Best Practices appeared first on Speckyboy Design Magazine.

Blazing-Fast Managed WordPress Hosting with Kinsta Sponsored

Brenda Stokes Barron — Wed, 28 Jun 2017 07:43:52 +0000

If you’re a savvy business owner, you understand the importance of having a reliable web host. A good hosting company can not only keep your site safe from hackers and provide a quality service that ensures your site is up even during the most critical times, it can also save you time.

When it comes to hosting companies, there is no shortage of providers. Some of them offer a variety of different plans and some of them offer highly specialized services like WordPress managed hosting.

One such company is Kinsta. Although a relatively young company, it’s already making strides in the managed WordPress hosting arena.

In this review, we’ll take a look at what makes it different from others and the powerful features it has to offer.

A Brief History of Kinsta

Kinsta was founded in 2013 by WordPress developer, Mark Gavalda. The company developed out of the need to provide a reliable and affordable hosting company to business owners who want to focus on running their business instead of worrying about maintaining their site.

They work with some of the biggest brands such as Mint, GE, Intuit, and AdEspresso and serve their clients from three locations in Los Angeles, London, and Budapest.

Furthermore, their support team is made up of WordPress developers so you can rest assured your website will be in good hands.

Kinsta Features

Kinsta offers managed WordPress hosting with some interesting features that makes the company stand out among the competition.

The first is the fact that the company uses Google Cloud Platform, which allows them to take advantage of Google’s private Fiber network.

The network in question features a distributed backbone between all data centers, which makes it possible for Kinsta’s servers to process more data in a lot less time.

You can also choose between several different physical server locations, allowing you to serve your site from a server that’s close to your customers and clients. All of this combined has a huge benefit on the loading times of your website as it decreases latency.

Secondly, all of Kinsta’s plans offer unlimited pageviews, unlimited visitors, and very generous bandwidth caps.

If that’s not enough, your site will be monitored every minute – 1440 times a day – for downtime and you’ll also get the benefit of daily backups and a free SSL certificate.

In terms of security, Kinsta implements both active and passive measures that protect your site from malicious attacks. Aside from the aforementioned uptime monitoring, they have DDOS detection, hardware firewalls and software restrictions, and continuous malware scanning in the background.

It’s worth mentioning that you can migrate your site to Kinsta for free with the help of their support team and in the event the worst happens, the company will fix your site for free.

Plans & Pricing

Kinsta offers eight plans divided into two tiers as well as custom pricing.

Business plans range in price from $100-$400 and include unlimited visitors, pageviews, staging areas, free SSL certificate, multisite support, the ability to use your own CDN, automatic daily backups, and continuous uptime monitoring.

The plans differ in the amount of disk space, allocated bandwidth and the number of WordPress sites you can install.

Enterprise plans start at $600 and go up to $1500 which offer the same features as the business plans but offer considerably more in terms of disk space, bandwidth, and the number of sites. The enterprise plans are geared towards large and high-volume sites.

It’s worth mentioning that all plans can be paid on a monthly or a yearly basis.

Developer Features

Since Kinsta offers managed WordPress hosting, they offer features that cater to developers.

Staging

As a WordPress developer, you know you need a reliable way to test new tweaks and options.

While you can always run a local installation, having the ability to create a version of your live site allows you to test different environments and find the one that provides the best experience.

You can also use it to test new themes and plugins without affecting your site and ensuring nothing goes awry once you install them on your live site.

Site Cloning

Kinsta also allows you to clone any of your live or staged sites so you can develop a custom theme for your client.

Anything that can speed your workflow is a positive thing and with Kinsta, you can do just that.

Next Gen Technology

Kinsta’s service uses LXD container technology that allows each site to “live” in its own virtual server.

The benefit of this approach is that your site is protected in the event one of the sites on the same server gets compromised. It also makes backups easier.

Programming Features

Lastly, when it comes to programming features, Kinsta plans come with PHP 7 which helps your site use less resources.

However, you can easily switch to PHP 5.6, 7.1 or HHVM should you need to.

You’ll be able to use WP-CLI, Composer, and Git out of the box and you can use SSH to access those tools so you can speed up your workflow. When it comes to databases, you can manipulate them with HeidiSQL or Sequel Pro.

Is Kinsta Right For You?

For a young company, Kinsta offers a lot of bang for your buck. While their hosting plans are more expensive than those offered by similar companies, keep in mind that Kinsta aims to provide top-notch service without sacrificing quality or the ability to deliver on their promise.

That said, it’s worth mentioning that you cannot host your email or register a domain through Kinsta so you’ll have to find different providers for those specific services.

Kinsta is a great choice for growing businesses as well as high volume enterprises that need a reliable service and want the technical details of website maintenance handled by someone else.

If you’re convinced Kinsta‘s plans are a sound investment, we have a special discount for our readers. If you sign up at any time during the next 30 days, just mention Speckyboy, and you can get 50% off your first month’s bill so give it a try.

The post Blazing-Fast Managed WordPress Hosting with Kinsta Sponsored appeared first on Speckyboy Design Magazine.

How to Optimize Image Delivery Efficiently and Cost Effectively

Nicole Amsler — Tue, 29 Mar 2016 17:13:15 +0000

Part one of this series examined mistakes you may be making when handling images, and the steps you can take to remedy them. In this article, you’ll learn about common problems associated with delivering images, and what you can do to optimize network usage.

Once your website’s content is in place, your goal is to make sure that all your website’s images are delivered as fast as possible to your visitors. But the approaches outlined below often prevent you from achieving the best performance. Take a look at some of these bad practices and what you can do to fix them:

Delivering Images Straight From Your Servers

Many developers host images on their own servers, which are the same ones that host the website. As a result the server strains to deliver images instead of unique web content. You should consider leveraging content delivery networks (CDNs) to address this issue.

How to fix: CDNs are simple to use services that serve your website images much faster than how your website hosting service can deliver them. CDNs are based on a large number of worldwide servers, or “edges.” When visitors visit your website, they are automatically routed to the nearest edge location, so images are delivered with the best possible performance with a much reduced latency.

CDNs are priced by the required bandwidth and are slightly costlier than your hosting provider’s bandwidth, but the CDN prices today are quite affordable and well worth it. There are many CDN providers available today. Amazon’s CloudFront or MaxCDN may be a good starting point.


In-House Servers	Content Delivery Networks (CDNs)

Delivering Static Icons One by One

Other than photos and thumbnails, your website most likely includes many icons and auxiliary images, such as the logos, arrows, stars, signs and marks, which are used to give your site a unique look and feel.

You’d be surprised at just how many tiny images your website can accumulate. Embedding icons and auxiliary images as-is on your website can cause processing delays while the server manages so many download requests.

How to fix: A simple solution for this problem is to utilize a CSS Sprite, a single image that contains all your smaller icons. Your web page is modified to download this single image from your server and the page’s HTML uses alternative CSS class names to point to the smaller images within the larger one.

Sprite used on Google’s search results page

Using Images When CSS3 Can be Used

When cutting a website’s design into HTML components, you may keep buttons as images. Since older browsers did not support adding shadows, rounded corners and web fonts using CSS, you may be accustomed to using small image snippets to implement these elements using an image-based solution.

Unfortunately, this solution requires a huge number of images that ultimately hurts the visitor’s browsing experience and is very difficult to manage, increasing development time and costs. And even though modern browsers natively support shadows, rounded corners and unique fonts using simple CSS directives, many websites continue using images to implement these.

How to fix: Make sure you use CSS3 whenever possible. If your graphics designer is responsible for the markup, make sure you ask for CSS3-based elements where it makes sense. If you want to support older versions of Internet Explorer, you should either make sure your markup gracefully degrades to a functioning design (though probably looking less than perfect), or alternatively employ a CSS3 emulation solution, such as CSS3 PIE.

Incorrect Image Cache Settings

Your website’s image files rarely change. HTTP caching directives allows such images to be cached by your visitors’ browsers and any other server along the way (CDN, proxies, etc.). Once an image is cached, the locally cached copy will be used instead of having to download it again and again on subsequent visits to your website. Correct cache settings improve the user experience by reducing page load time, while saving you costs by significantly reducing your website’s bandwidth.

Unfortunately, there are many times when caching isn’t used correctly. The most common case results from an unnecessary concern that a lengthy cache settings will mean that if images are updated, your website visitors will keep seeing old images instead of your new ones.

How to fix: This seemingly problematic scenario can be easily avoided by adding a fingerprint (md5, timestamp, etc.) to your images URLs. By adding a fingerprint to your image URLs you make sure that when an image changes, so does its URL. When the URL changes, the browser is forced to re-fetch the image. Most modern web development platforms automatically add such a fingerprint to all your images, solving this problem at its source.

Also, you should use aggressive caching for all your website images by setting your images HTTP ‘Expires’ header to as far in the future as possible. In addition to image URL fingerprints, this should offer an immediate increase in your website’s performance.

Using a Single Image Size Across All Delivery Mediums

Your website is being viewed by many different devices, particularly with the rise in recent years of mobile and tablet users. Whether you have occasional mobile visitors or you’ve tuned your website to offer a mobile version of your website’s content, you are still left with a decision to make – how to send the same image content to mobile devices that will usually have a much lower resolution than a desktop machine.

Many developers take a shortcut, offering the same exact images across all device resolutions, using client-side resizing for the images. The images may look great, but visitors waste time loading unnecessarily large images to their devices and you pay for redundant bandwidth usage. This is particularly unfair to 3G users and roaming users who pay a large extra to download the uselessly extra high resolution images.

How to fix: Identify visitors’ mobile devices and resolution using their user agent and optionally additional client-side Javascript code. With the correct resolution in hand, retrieve the best fitting image from your servers. This requires that you make available a set of thumbnails per each of your original images. There are excellent Javascript packages available that will automate this process.

Devices support different resolutions

By evaluating your practices to identify problems and employing the fixes outlined in this two-part series to optimize the images on your website and network usage, you can significantly improve the time it takes for pages to load. The faster load time and reduced bandwidth demands improve the user experience has been proven to improve click through rates, which ultimately means more business for your company.

The post How to Optimize Image Delivery Efficiently and Cost Effectively appeared first on Speckyboy Design Magazine.