Archive for October, 2013

Website Performance Tips: Five (5) Ways To Optimize Images

Posted on October 28, 2013. Filed under: website performance tips | Tags: , , |

If you are familiar with online tools that assess the performance of a website, you’ll notice that image is one of the determining factors that create a huge impact to its loading time. Google PageSpeed Insights for one, includes Image Optimization as one of its major requirements among other rules such as removing landing page redirects, leveraging on browser’s caching and minifying CSS/HTML/Javascript deliveries just to name a few.

ways ways waysHow To Optimize Images To Improve Load Speed

Give your visitors an excellent user experience (UX) by resolving delay issues on your pages. Here are five (5) ways to optimize your pictures.

  1. Apply the correct format. You have at least four popular formats to choose from during the web design stage. Stir away from BMPs and TIFFs. Use PNGs for transparency purposes and if you do not intend them to be displayed on mobile devices. Save as JPGs if your photos have millions of colors and if you need photographic images. If your graphic is less than 10×10 pixels or your palette is composed of less than 3 colors, opt for GIFs instead. You can also go for the latter if your photo is animated.
  1. Resize. Learn to scale them down based on their usage on your site. Crop the excess corners and extraneous background as necessary. Ensure that all pictures are resized to the exact dimension to save digital resources. If it is essential to have both big and small versions of them, do not shrink the large ones through your source codes. Create a second copy for smaller graphics, e.g. thumbnails, and provide an option to view the larger ones in a pop up format or a separate tab or window.
  1. Compress. If you’re using Photoshop on your web design tasks, select the option “Save for web” with 70% as standard quality. Otherwise, there are some online compressors that you can check out to help you with the compression.
  1. Specify the width and length during coding. Similar to how alt tags are applied to improve global and Philippine SEO rankings, putting in the dimensions in the properties can enhance the speed of your page as well. Example:

<img src = “my-picture.jpg” height=”200” width=”350” />

  1. Use CSS Sprites. Combine multiple icons into one graphic – i.e. backgrounds, corners and menu items. Define each picture based on their exact pixel position through CSS and reference them correctly on the body.
Read Full Post | Make a Comment ( 1 so far )

Website Performance Tips: Top Three (3) Tips To Optimize Your Mobile Site Speed

Posted on October 1, 2013. Filed under: website performance tips | Tags: , , , |

Page Speed is critical not just to desktop-based websites but to mobile sites as well. According to an article posted by Econsultancy:

  • 74% of users will abandon after waiting five seconds for a mobile site to load.
  • 57% have experienced problems when accessing a mobile site.
  • 46% would not return to a poor performing site.

Needless to say, every business owner must also ensure that their mobile-based website is fully optimized and performing good if not better than its desktop counterpart. Remember that “Conversion rate increases 74% when page load time improves from 8 to 2 seconds.

Here are some quick tips to help improve the response time of your website on mobile devices.

1. Clean up your codes. Remember that the smaller amount of data transferred, the faster your pages will load.

shutterstock_19458208-300x300

  • Minify Javascript, CSS and HTML. Remove Javascript libraries that you don’t really need. If you have several installed, see which one you use the most and check if you could apply one of its functions in multiple ways so you could get rid of the other ones. Compact your codes and remove extra white spaces, unnecessary characters, line breaks and comments to save bytes of data. Reduce the amount of HTML needed to render the above-the-fold content.
  • Avoid landing page redirects. Per Google PageSpeed Insights, redirects trigger an additional HTTP request-response and it is for this reason that you have to keep them in bare minimum. If it can not be helped, have the redirection done on the server-side rather than the client-side.
  • Reduce HTTP requests. Combine stylesheets and Javascripts into a single file.
  • Leverage browser caching. Set an expiry or a maximum age in the HTTP headers. In this way, the browser would be instructed to pull up previously downloaded resources locally rather than over the network.
  • Enable compression. Compress resources using gzip if possible.

2. Maintain minimal images. Apply proper format for your images. Compress their sizes too. Utilize sprites to group multiple pictures into a single file. Eliminate the ones that function for visual display purposes only.  Employ CSS3 for box shadows, border radius, gradients, skews and other effects.

CSS3-Toolkit

3. Replace Click Events with Touch Events. There exists a 300ms (+/-) delay between these two events therefore talk to your PH iOS  developer or PH Android developer to program the codes in such a way that users could access information through touch instead of click.

Read Full Post | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...