Tips and Tricks Category

Ten Tips On Saving Bandwidth

Wednesday, June 29th, 2011

Saving bandwidth on your website is one ideal way to reduce the bills you need to pay. Like many shared hosting companies, you may have “unlimited” bandwidth and it may not be a huge factor to you, but what should be is your site’s reliability, uptime, and performance. If you’re receiving too many visitors, they can potentially shut down your website for all the content they are downloading off your server.

If your website is slow, it’s most likely the case that your website is too large. Here are our tips on how to save bandwidth without doing all too much!

     

  1. Images are bloated; make sure they’re optimized! It’s clear that images take up a major part of any modern website, but the question is, what can you really do? The only thing you can do is make sure they’re optimized! Too keep it simple, make sure to use the functionality of Photoshop’s “Save for Web” features. Using Photohop’s web features, you’re able to create images that are optimized and not too large to download. If you want more information on image optimization, we have a whole post written on just this! Vist our image optimization post for more details. Also, you should use sprite maps, which are simply images stuck together, on your website. To do this, take a look at this article on CSS-Tricks and SpriteMe.
  2. Pay attention to how much code you use! This is one obvious fact, but the more code you use for your website, the longer it’ll take to download and the bigger it’ll be. When writing HTML, try to keep it in an orderly format without using too much code. You can use services like HTMLTidy to compress your HTML documents. Just like HTML, you can also compress your CSS files also using services like Clean CSS. CSS and HTML comments will also add bloat, so try to use them sparingly in a production website. There are plugins for WordPress you can use, like W3 Total Cache, to compress your source code files entirely.
  3. Take advantage of GZIP compression! Not only can you compress your source code into some hard-to-read file, your server can also compress your files using GZIP automatically. GZIP will compress your files delivered to your users, if their browser supports it (all modern browsers do), and will be uncompressed once they receive the file. To enable GZIP, take a look at the Apache module “deflate” or the GZIP module available in Nginx.
  4. People might steal your bandwidth! When people are linking to your images on your server, they are “stealing” your bandwidth via hotlinking, or linking to your content on a different server directly. This could become expensive in case the file is placed on a popular site. Luckily, you can disable this easily and save bandwidth if it’s happening to you!
  5. Use CSS styling as much as you can! CSS has been given to you for one reason, to style websites without images! CSS does one amazing job and with CSS3, you can achieve more like rounded corners and shadows without using any images. If you can do it using CSS, go for it.
  6. Tables are so Web 1.0; use <DIV>/<SPAN>/CSS to style your website! That’s right web developers! Don’t be lazy and use those tables! You should rather turn divs and spans into a styled table instead of using the table attribute in HTML. The table attribute is too old and takes too much code to manage; using divs and spans will reduce the size of your HTML file.
  7. Repeated images are not old school! Even though repeated images can be associated with those old websites back in the early days of the internet, let’s not think of that. Instead, when you are designing your website, design it in a way that if you have any type of repeating pattering, save it as a tiny image and let CSS repeat the image for you.
  8. Take advantage of CDNs! One easy-to-achieve way of saving bandwidth is to direct your files elsewhere, or in this case, a CDN like us :) . Not only will a CDN speed up your website, it will also save you bandwidth as it’s directing the content elsewhere.
  9. Search engines will crawl on you! Search engines, especially Google, will crawl your sites like bandwidth is never ending. You can use Google Webmaster Tools to reduce how often they will go through your website.
  10. AJAX is there to help! AJAX was made for one reason, loading content dynamically without refreshing your browser. Because of this, durring that refresh, a good portion of your site content is left unchanged. You could implement AJAX so when a user clicks on a link, it’ll only load the needed content. If the theme of your website is constant, AJAX is one possibility for you. Besides, you could add in some fancy transitions too and your users will love you for having them! Think of Twitter or Facebook as they both rely on AJAX quite a bit.

 

We hope our bandwidth saving tips will help to speed up your website and reduce those bills!

Keep Your Joomla! Site Lightning Fast!

Tuesday, June 21st, 2011

Joomla!® is one of the top 3 CMS solutions in the world. The power of Joomla lies in the many available extensions. If you need a certain functionality in Joomla that it doesn’t have by default, there is a large chance that one of the 7000+ extensions will provide you with the solution.

Want a commenting system? There are extensions for that. Want advanced SEO functionality? Plenty of extensions for that too. Need a fancy poll? Want a forum? Should your site be a community portal? All possible with the help of extensions.

But there is a downside to all these extensions and that is speed. There is nothing holding you back to install tens or hundreds of extensions. And before you know it you find yourself in the middle of an “extension frenzy”. And with every extra feature you add to Joomla you will most likely also require extra server power and processing time. In other words, Joomla sites packed with extensions tend to slow down. People leave your site because it has become so slow.

Luckily, there are some great solutions for this problem. Here are some techniques that will make sure Joomla is running at its full potential.

Joomla extensions come in different forms: components, modules, plugins, template…

 

Components & Modules

It is great to play around with all the fabulous power components and modules can offer you. Especially with modules you can dress up your pages to have countless functionalities. But keep in mind that more is often less. Less in performance and efficiency of not only your page loads, but also of the user experience and revenue!

So try to only use the extensions you really need. And uninstall everything you don’t use. Don’t just disable them, uninstall them!

 

Plugins: friend or foe?

Plugins are great to add all sorts of functionality to your site. They are loaded and executed at different stages of the page rendering process. In most cases you don’t even know what plugins have been doing there thing. And there lies the danger!

When your website has a lot of plugins installed, they will slow down your site. Especially if these 3rd party plugins are not coded efficiently. Unfortunately – unless you are a programmer – you have no real way of telling if extensions are coded well

So plugins are your friends and can turn your site into something fantastic. But if you are not careful with them, they can group up and become your foe by slowing your site down.

 

Template madness

There are hundreds of thousands of Joomla templates out there. Varying from very simple to extremely extensive ones. But also from very well to very poorly programmed ones.

Be careful in choosing your template. With more functionality also comes more server load.

Also many templates are packed with images. Especially if these images are not optimized, this will have a drastic effect on your page load speed. But luckily you can fix that yourself!

 

Out-of-date and out-of-touch

Technology never stops. And neither does the development and improvement of Joomla and its extensions.

Make sure you keep up-to-date with the latest releases of Joomla. Keep track of new versions of the extensions you use.

Also make your host use the latest versions of PHP and MySQL. And that the server is setup correctly and is maintained.

Staying up-to-date will not only help you in keeping your website up to speed, but also it will protect you from known security issues.

 

Database: time to clean up!

MySQL databases are normally very efficient. But sometimes databases can gather junk and even become corrupted. This can slow down your site and even make it unreachable.

There are fortunately ways to fix this, or better yet, prevent it. You simply have to ‘repair’ your database tables.

Most hosting providers will offer you access to your database(s) via phpMyAdmin, a mysql web interface. There you can select your database tables and tell it to repair them.

There is a great Joomla extension that will help you do this right from your Joomla administrator: Admin Tools. It will also provide you with other great tools to keep your website nice and clean.

If you want to be really geeky, you can also set up a cronjob script to repair your database regularly.

 

Cache: use it!

Joomla has a built in content caching system. This will take all dynamic content, cache it, and deliver the cached content to your unregistered viewers.

Caching will prevent your components, modules and plugins to have to do the same thing on every page load. This will reduce server load significantly.

 

Content Delivery Networks (CDN): take load off your server!

A lot of your server power and page load time is taken up by loading the different images, stylesheets, scripts and other files your website requires. A CDN will take that load of your own server and offer these files from a different server close to the visitor. The page load speed will improve dramatically because there are multiple servers serving the necessary files simultaneously.

There is an excellent Joomla plugin called CDN for Joomla!, created by NoNumber! (Peter van Westen). Not only does CDN for Joomla! fully support MaxCDN, you have a variety of options on how to use this CDN extension. And best of all, CDN for Joomla! is 100% free!

There’s some of our tips on how to speed up Joomla! Do you have any more tips on how to speed up Joomla, leave them in the comments below!

How To: Optimizing Your Web Images

Thursday, June 9th, 2011

As the Internet is continuing to get pretty with all kinds and gradients and images, it is increasing the size of images used in many websites dramatically. Even though there are many technologies like CSS3′s gradient capabilities to help you use fewer images, you won’t see any significant differences until you start optimizing your images.

Even though there aren’t too many ways to optimize your images, there are many techniques used in Photoshop to optimize your images. For this test, we’ll be spending the majority of our time in Photoshop.

 

File Format Differences

Let’s face it, there are so many ways to save your images in Photoshop. But if you’ve been using the “Save As” feature in Photoshop to save your web images, you should know you’re already saving a very unoptimized file.

As most people are already aware of the PNG, JPEG, and GIF file formats, let’s point out the differences in file size in a table below. Keep in mind that the JPEG format will typically always have a lower file size, but the quality of the file is sporadic depending on the file. All images supporting a color profile in this example have 256 colors and diffusion set as the dither setting.

 

As you can clearly see,  JPEG wins hands down in terms of file size. At 30% quality, JPEG seems to have the highest lead (in terms of image compression/file size), but in order to exaggerate one downfall of the JPEG format, take a look at this image. As you can clearly see, the JPEG file format has some quality issues at a lower quality percentage. If we create the same image at 60%, quality is increased by a ton, but the issues are still visible. The JPEG format at 100% is not the highest file size in the table and looks crystal clear.

After the JPEG format, you can see one of the leading file formats on the web, PNG-8 (which means it’ll pick from a maximum of 256 colors), coming right after. Because it is much larger than the JPEG format, it also has one downfall, there are many visible “dots” on the image.

The GIF format is very much like PNG, but is less optimized when using very large images like the one we’re testing. It suffers from the same issues that PNG does.

Our last two images, the PNG-24 files, are much like the JPEG format at 100% quality, but with supporting transparency. Keep in mind that the JPEG format does not support transparency, and because of this, JPEG images are not used as the main theme files of many websites.

 

So what… what should we use?

In actuality, there’s no easy rule to decide which format every image should be saved as. Every image format has its issues but with those issues, we can narrow them down on which type of files should be used for what. Most of this is truly up to you and what you think is best. We can’t tell you which one is the best, but what we can do is guide you in the right direction in picking the best file format.

But please keep in mind, the one with the lowest file size isn’t always the best image format.

  • If you want the highest quality, use a JPEG at around 80% quality or a PNG-24. These will be fairly large file sizes, but there are some cases where a PNG-24 image (even with transparency) has a lower file size than a JPEG at 100% quality. You simply need to compare the two formats.
  • JPEGs are best used with pictures taken by a camera, as they contain many colors that the JPEG format excels at compressing.
  • If you are using minimum colors, compare the GIF and PNG-8 image formats. They are very similar, but it seems that GIF is great with small images and PNG-8 is great with lots of colors at a small size. Again, you need to experiment and compare.
  • If you need any kind of transparency, PNG-24 has the best compatibility. The edges of the image are very smooth, unlike GIF and PNG-8, but most of the time, the file size will be raised by quite a bit; use sparingly.

When in doubt, rate every image format on the basis of file size and quality. After that, you should have the best image format for the image you are working on.

 

Seriously, this is a lot of work! Any easier method?

If you’re using WordPress for your website, there is a handy plug-in called WP Smush.it that will do all of this hard work for you.

Essentially, it’ll take all of the unneeded data in JPG files that your camera stores, optimizing the compression of a JPEG file, converting some GIFs to PNGs to save some space, and remove some unneeded colors from GIFs or PNGs.

No matter what way you use to optimize your files, it is needed. You want your website to load quickly, users want to see a fast website, and search engines will rank your website higher as your site is loading faster.

Images slow a website down more than anything else and there are many ways to make sure your website will load faster, but image optimization is key to a fast loading website.

 

Anything Else?

Please keep in mind that because images are fairly large, the download time is very much tied to how fast your server can handle requests and the time taken to transmit a file to the requested user. As you have many things loading on a typical website, like JavaScript, HTML, images, and more, all of these HTTP requests will slow down the server at some point.

One excellent way to stop this from happening is by hosting your main files, like your images and JavaScript files, somewhere else. This is one example of how our CDN services can speed up your website, the other reason being that we have a high class network and state of the art servers with Enterprise SSD drives that will serve your files in the fastest way possible to your users.

If you are willing to combine all your images together, typically your theme images used for your website, you can create a CSS spritemap and the user can download your images used on your website with only one HTTP request! CSS spritemaps are fairly simple, and there are even tools that can help you with the process; they’re something every web-designer should look into.

If you have never optimized any of your images, it may be a good time to take a look at what is slowing down your website.

How To: Speed Up Your Website With WebPageTest

Wednesday, April 27th, 2011
When you are wanting to increase the speed of your website, there are plenty of different areas to look at. It could be that your server's internet connection is slow, your website is taking too long to process on the server, too many unoptimized files, or even some JavaScript could be hanging the site from loading correctly. Whether the case, WebPageTest will help speed up your website to its full potential. Before we get far into this guide, whether it is certain that MaxCDN will speed up your website, other things can slow down your website as well. Likewise, having services like WebPageTest help quite a bit.

Step One: Using WebPageTest

Before you can figure out how to speed up your website, you first need to give WebPageTest the information it needs. Different Tests: WebPageTest is one impressive service with all of their offered tests. They offer a very in-depth review of a website, comparing websites, and a fairly unique mobile testing feature which seems to powered by an external service. We'll be focusing on the in-depth review of a website in this guide. The Basics: You'll see all the basic items at the very top of the interface. Here, you can enter what website you want to have the page test on, choosing from twenty-four locations to run your test from (we'd recommend for you to use Dulles, VA USA as it supports many options), and of course, what browser you wish to test your website on. Advanced Settings: Despite all of their different tests, they've gone the next level with plenty of advanced options that'll blow any other website speed test out of the water. With all of fourteen different settings you may set, let's cover some of the major ones:
  • Changing the downstream connection (and yes, FiOS is in there!)
  • Altering the number of tests to run
  • Getting the tcpdump (this if for all you tech-savvy people!)
  • And even entering HTTP basic authentication details
(more...)

Using MaxCDN for paid or subscription-only video streaming

Wednesday, October 20th, 2010

Paid video website concept

media room One question many clients have is if they can use CDN for paid/subscriber-only video streaming. The short answer is “Yes”, but there’s a lot of work involved in building such structure. As it known to all, CDN cannot run server-side scripting such as PHP, Ruby, and ASP etc… And such coding is usually required if you wish to provide paid video streaming service. However, it is still possible to utilize CDN Video Streaming service for your paid video streaming purposes. The process has intermediate difficulty level, and it requires some coding skills and the implementation of a secure token. The concept of the process is simple.  First it will require videos to be embedded in a page that can only be viewed or accessed by those who are logged in to your website. Also the path for your videos will probably need to be stored in a database, and that’s the first step. The second step is even easier. Depending on whether or not your client is allowed to access the video, a request will be sent to your database to request the video to be embedded. If they’re in the allow list for the video to be streamed, they can get the video embedded in the page. Now you may wonder, how is the Secure Token going to help? Secure tokens are meant to protect your video stream. Means the video can neither be downloaded nor leeched on other websites. This will make sure videos will play on your website “Only”.

Tutorial Released for Joomla CDN Implementation with MaxCDN

Wednesday, September 29th, 2010
Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. MaxCDN supports Joomla, through their Joomla CDN which is powered by the Joomla CDN Plugin. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone. Since Joomla is such a widely used CMS, the need to implement it with a CDN is obvious. Here at maxCDN we want to make this integration as simple as possible for our customers so we teamed up with Peter Van Westen to create an easy to use plugin called TopCDN. Mr Westen is notorious among the Joomla community and currently has the top two ranked extensions on the Joomla website. You can visit his website here. It is very easy to implement the TopCDN Plugin for Joomla with MaxCDN. It is just a 3 step process and should take you less than five minutes!
  1. Create a Pull Zone for Your Website
  2. Install the TopCDN Extension on Your Site
  3. Copy the URL for Your Pull Zone into the TopCDN Settings
A thorough tutorial of how to implement Joomla with MaxCDN can be found on our Wiki. Check out the article and give us some feed back. Using a CDN can have several benefits for your Joomla website, including the following:
  1. Much faster page load times
  2. Greatly reduced load on your server
  3. Higher SEO Rankings
  4. An overall smoother and more pleasant experience for your users
We will be adding more tutorials soon, so stay tuned!

Tutorial Released for Rackspace Cloud Implementation with MaxCDN

Wednesday, September 22nd, 2010
Cloud Hosting is a very efficient way to host some large files on a dedicated webspace while keeping the expenses at minimum, and there are many Cloud Hosting providers out there. On of the famous and most used Clouds is RackSpace Cloud. As cloud is not like CDN, means the server and what is hosted on it is at one place, those who download off of a cloud space will not benefit from the advantage of Geo-based download CDN offers - this is why the need to use CDN with Cloud hosting arose. It is very easy to implement RackSpace Cloud with MaxCDN, it is actually a 3 step process.
  1. Upload your files to the cloud.
  2. Create a Pull Zone with the Origin URL of your Cloud Bucket
  3. Start browsing your Cloud-Hosted files via the CDN URL.
A thorough tutorial of how to implement RackSpace Cloud with MaxCDN can be found on our Wiki. Check out the article ( http://wiki.netdna.com/Implementation/Rackspace_Cloud ) and give us some feed back. We will be adding more tutorials soon, so stay tuned!

What causes 502 Bad Gateway on a CDN

Wednesday, September 22nd, 2010
The "502 - Bad Gateway" http error - a very uncommon, yet tricky error that some may have encounter when requesting a file through a Pull Zone. The question arising is: What is this error all about? Generally, this error is a result of a poor IP communication between back-end computers, possibly including the Web server at the site you are trying to visit. In the case of a Pull Zone, it is a communication problem between our servers and the origin server. In order to analyze the error and find out what would be causing it, the first thing to do is to clear your browser cache completely.  Should the error persist, it's time to look into other causes. The 3 occasions in which you might encounter this error
  1. IP on the backend has changed: This is the first and most common case. People change hosts all the time, not very frequently, but they do. Or web hosts change their IP allocation, or a site owner might upgrade their hosting package and get a different IP address, many reasons and the result is the same; the server will not be able to pull the data off the origin.
  2. Firewall blocking our server: The 2nd most common case in which the 502 error will be encountered. As a part of a DDoS mitigation, or as a result of a strict set of Firewall rules, our IPs might be blocked as they could be accidentally identified as illegal traffic for the number of requests could be enormous. The expected result would be that we can't pull the data off the origin server, and the 502 will be encountered.
  3. Bad/Corrupt Zone Provisioning: The 3rd, final, and most unusual case.  It happens very, very rarely when something goes wrong during the provisioning process of the Pull Zone. A temporal network hiccup,  an occasional timeout etc... This is not a major thing and any of our support team members can easily re-provision the Pull Zone for you.
The debugging process Debugging is quite easy when you encounter "502 - Bad gateway" and here's what you can do.
  1. Check the Origin Server IP: As a first step, always check if the Origin Server's IP has changed. Login to the CDN control panel, click on "Mange" next to your Pull Zone, then click on the "Settings" tab. Should you find out that the IP has changed, click "Edit" and put in the correct IP, purge your Pull Zone's cache, clear your browser's cache and try again, the problem should be fixed.
  2. Check your Firewall rules: If the origin IP is correct and the problem is persisting, contact our technical support. If it's a Firewall problem, you will be given a set of IP address to whitelist in your Firewall rule-set, then the problem should be fixed.
  3. Blame the Gremlins: If neither of the 2 above solutions works, please contact our technical support  ( support@netdna.com ) and the team will be able to help you identify and fix the problem.

Tips and Tricks: Debugging

Wednesday, November 25th, 2009
The way the Anycast network works is by assigning a single IP which goes to all our datacenters. Therefore, if you are coming in from broadband in Dallas, the Anycast IP will automatically determine the closest available server PoP (Point of Presence) to you. To debug this - or have your clients debug this at any time, they can goto: http://debug.netdna-cdn.com The result of the page will be something like:
You are hitting the NetDNA Los Angeles Datacenter Your ip address is: 66.159.202.156
This is a very handy tool in debugging. Cheers.