The Green Group Studio Blog

Xander is an expert in all things web.

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Archives
    Archives Contains a list of blog posts that were created previously.

Speed Up and Optimize Your Website

Posted by on in Web Design
  • Font size: Larger Smaller
  • Hits: 193135
  • 0 Comments
  • Print

speed up and optimize image

In this age of smartphones and high-speed Internet, we’ve come to expect everything to be available from anywhere, immediately. As a result, one of the fastest ways to annoy visitors of your website is by making them wait for your site to load. No one has ever enjoyed waiting for what they want. It isn’t always the website’s fault that a page is loading slowly, but there are several things you can do to minimize load times for most users. It doesn’t matter if you’re a programmer, designer, or just someone posting content to your website, you can speed up your website.

An easy to tell if your site is poorly optimized is to put it through GTmetrix. Just enter the address for you website and it’ll provide you with detailed results of what could be improved. The letter grades they provide are fairly subjective, depending on how elaborate the site is. A simple site with “C” grades could definitely use some work, but a highly interactive and visually active site with the same grade wouldn’t be unexpected.

If you’re unhappy with the speed of your website, or just want to give your site a make-over, Green Group Studio can make it beautiful, fast, and effective.

Optimizations anyone can do:

  • Use the right image format – For 99% of images you’ll ever post online, you’ll want to save them as either a JPG/JPEG or PNG. It’s vital to know the difference because they result is dramatically different file sizes depending on the type of image. If the image is a photo or texture, use JPG. If the image is has a transparent background, is tiny, or doesn’t have a wide variety of colors, use PNG.
  • Compress your images – When saving a JPG, you are usually given a “quality” option (or sometimes “compression”). If you can, preview the output image while you are changing the quality value. If the photo editor you’re using doesn’t give you that option, try saving several versions at different quality levels. Pick the lowest quality picture that doesn’t look noticeably bad (usually around 75%). For PNGs, you should use an online tool to reduce the size. My favorite is tinypng.org. Just give it your PNG image and it’ll reduce the site with some kind of voodoo magic. There are similar tools for JPGs, such as JPEGmini.com. There’s absolutely no reason to not use these tools, even if you have professional photo editing software like Photoshop and utilize the “save for web” functionality, it simply isn’t as efficient as these services when it comes to image compression. They won’t reduce the quality of your image, but will save on load times greatly.
  • Save images at the right size – Web browsers can scale down images well enough, but if an image is loaded that is bigger than it needs to be, that’s time wasted sending a larger file than necessary. If you know the exact size that your image will be displayed on the webpage, save it at that size. Often times, people simply upload a photo from a digital camera without resizing it because the web can do it.  However just because it looks small doesn’t help the your visitor when viewing the image.  Ever sit and watch a tiny thumbnail of an image take forever to display?  Yep, that’s the laziness of not resizing – it actually has to download the entire huge image before showing you the scaled down (improperly resized) image. If you ever see this on the web, you can right click the image and select “open image in a new tab” to open this image – when it opens up and displays almost full screen, you can say “A-HA!” and smile knowing that you know the secret why that image is loading slowly. Congratulations, you are a dork like me now. =)
  • Avoid duplicate files – If you know that an image or picture that you plan to use already exists on your site, use the existing image (if possible). Web browsers will usually “cache” images that have already been loaded, and will load the “cached” version instead of downloading it again if your website uses it again. Unfortunately, web browsers aren’t smart enough to know that the image you’re asking for is the exact same as one that was previously loaded unless it has the same file name and is located in the same place on the server. So if it already exists, don’t upload it again! And although it may seem tempting to link to images from other websites, that practice is called "hot linking" and is frowned upon for 2 reasons: One, you are sucking someone else’s bandwidth by having their server deliver the image; and two, the integrity of your website will be compromised in the event that the website you “borrowed” the link from decides to remove that image – giving you have a broken image on your site.

Advanced optimizations:

The following are meant more for designers/programmers. However, these are good things to bring up with your programmers/designers if you’d like to improve your site’s performance in the unlikely event that you don’t call Green Group Studio to build or optimize your website. J

  • Use sprite sheets – While they aren’t a cure-all for image-related performance problems, there are most certainly images on your website that can be combined into a sprite sheet. For those who don’t know, a sprite sheet is a series of images placed into one larger image. An example would be the main sprite sheet used by Green Group Studio. This is generally used with small images/icons. But why use a sprite sheet? HTTP requests. Every time a webpage loads a new image, it has to ask the server for it first. However, the server can only send so many images to the visitor’s web browser at once. If your server can only dish out 5 files at a time, and there are 15 images to load, that’s 3 separate sets of image transfers are required. Not to mention the extra time wasted “asking” the server for those 15 files. Combining those 15 images into a sprite sheet wouldn’t inherently lower the overall file size, but it will decrease the loading time depending on how many images were combined into the sheet. One important note is to avoid massive sprite sheets. Any sprite sheet totaling more than 1024x1024 pixels may not load on older devices. Plus they’ll take forever to load. Just keep your sprite sheets compact and you’ll be golden. Oh, and my preferred sprite sheet generator is Stitches.
  • Combine files – While having dozens of CSS/JavaScript files is great for organization, it isn’t great for load times. Just like with sprite sheets, combining these files (when appropriate) reduces the number of HTTP requests by sending the styling/scripting on the page in large chunks instead of dozens of little pieces.
  • Dereference old files – As your site grows and changes, it’s common to forget that unused and deleted files are still referenced in the code. It’s worth it to take a stroll through the source and make sure that everything that is being loaded is actually being used. The less HTTP requests, the better.
  • Use less plugins/components/modules – Adding more features to your site is great, but it comes at a price. If you didn’t hand-code the functionality of a plugin/component/module into your site, you probably don’t know exactly what it’s doing and how it goes about it. Even worse, it likely wasn’t designed to play nice with other plugins/components/modules. As a result, you can easily end up with tons of extra scripts/resources being loaded into every single page. If it isn’t a lot of trouble, program the functionality yourself. That way you can ensure that it uses the existing JavaScript libraries on your site and reuses existing assets, when possible. If not, evaluate if you truly need the plugin/component/module.
  • Enable caching on your server – This one depends quite a bit depending on the web server platform you’re using (Apache, IIS, etc). If you don’t know what your web server runs on, you can contact your host and ask them to walk you through enabling caching. If you don’t know what caching it, it’s the act of a web browser storing the files it downloaded for your website into an offline database. If the web browser loads your site again, it will know to load those offline files instead of requesting the online files from your server. This makes your site load almost instantly on repeat visits, but you should review your options for caching to make sure that the types of files that are cached (and for how long) make sense for your particular website.
  • Use cleaner JavaScript – There are thousands of little tips available to improve the performance of JavaScript. Fixing existing JavaScript can be time consuming, so it’s better to learn to code better now and work cleaner going forward. A few sets of excellent JavaScript optimization tips can be found here, here, and here.
  • Provide an optimized, mobile-friendly website – Smartphones and tablets don’t need to load everything a desktop/laptop would. They’re often on slower connections and don’t have the greatest processing power. Use CSS media queries to serve out fewer, smaller, lower-quality images. Especially on smartphones, users are expecting instant access to your site. Just think about when you’re looking up information on your phone. You’re usually in a rush or are in the middle of a conversation. Trim all of the fat and get the most important content out to the user, immediately.
  • Use text/CSS instead of images – Designers, this is for you. Yes, you can use an image in place of text or complex elements on a website. That doesn’t mean you should. A few more lines of code mean nothing in terms of load time, but using a picture every time you have something remotely fancy bogs down the load times. Unless you’re on an insane timeframe, take the extra time to lay out the page correctly. It will pay off for load times, visual consistency, SEO, and ease of responsive layouts.

All of these tips have been used on the Green Group Studio site, cutting the load times by as much as 80% on some pages. That time can make or break a visitor’s interest in your site. If a page takes too long to load, they may be unwilling to continue browsing around the website or wait for the page to finish loading. Even if you can’t go wild with some of the more advanced optimizations, just taking the time to prepare your images for the web goes a long way. 

Multimedia Designer - Xander works on all things digital. Web design/development, video editing, web animations, app design/development, whatever. Ideas go in, pretty things come out. He graduated from the Digital Media Arts College in 2013 and loves Interaction Design.

Comments

  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest Monday, 30 March 2020

Send a message

Please complete the above CAPTCHA.

Please enter your name and submit the form again.

Please enter an email address and/or phone #.

Please enter a message so we know what you're interested in.

Your message has been sent!
We'll get back to you as soon as possible.

Come say Hello

8461 Lake Worth Road
Lake Worth, Florida 33467, USA

More information


Call us at 561.594.7336


Location:

8461 Lake Worth Road, Suite 227
Lake Worth, Florida 33467, USA
Get Directions


Office hours:

We're open 9AM-5PM, Monday through Friday.