Top Secret : Web designer magic

Ever been frustrated by the fact that you have “awesome” wifi, yet a webpage is just taking forever to load? Yeah, annoying. In this article we’ll discover things like website optimization (SEO),  load times and file types to improve performance.

There’s many benefits to having a website that loads faster than another would. Some of the benefits are:

  • Increases SEO because loading times are one of the factors Google uses to determine rankings
  • Better for customer satisfaction , obviously because your page loads faster
  • Better for conversions because faster page loading times will encourage visitors to stay on your site for longer.

So what can you do to increase your load times?

  1.  Simplicity : Having a simple, lightweight design will allow your page to load faster. If you have a design with unnecessary amounts of photos and videos that don’t add value, your killing your load time.
  2. Plugins : Plugins can have a serious impact on your page loading times, so try to use only as many as you really need and delete those that you don’t need. If you are having problems, go through the plugins and disable them one by one to work out which one is causing the issue.
  3. Optimize your images : Images should be optimized on your website to ensure the pages load faster. Most websites use images, but they can make the site slow to load if they are too large.

Those are three top crucial things that can help you as a designer. Something you should also take note of is hosting. Hosting is more serious than one might think. An incapable hosting company can not only cause security problems for your files, but it can drag down your page load speeds. There are many hosting companies out there with various different pricing, but research before you commit!

A caching plugin serves as one of those essential plugins, since it delivers ‘snapshots’ of past versions of your website, enabling for a quicker delivery when a user requests it. Several caching plugins exist, but the WP Rocket solution is one of my favorites. You simply turn it on, indicate that you’d like to cache pages, and it automatically does the work for you in the background.

Minifying your code is also important! Deleting excessive lines of comments in your code, or anything that doesn’t add much valuable is another way to make your page load faster. Good, clean code is essential not only for load times but for your own good.

 

Now let’s talk about file types 

We’ve all heard of it … Jpg, PNG, GIF, etc. They each have their own purpose which is why they exist and are popularly used today. To cover the basics incase you aren’t familiar, JPG  files, also known as JPEGs, are a common file format used primarily for digital photographs and other complex still images. When JPG files are saved, they use a “lossy” compression, meaning that image quality is lost as file size decreases. When web designers put together a web page that contains photographs, they choose the level of compression for a JPG file: the more compression, the faster the image loads and the better the user’s experience with the page — but as the compression increases, image quality is lost. It’s definitely a win/lose situation. Now, there are JPG photos that still looks amazing so you don’t need to freakout in that department. A JPG can display millions of colors in a 16-bit data format and is the format used most often by digital cameras.It’s great for photos because it elegantly handles color gradation, unlike another common file format, the GIF. It supports color formats CMYK, RGB and Grayscale. In addition to photographs, JPGs are bested used for still images, images that have complicated shades or light and dark, or complex colors.

GIF Stands for “Graphics Interchange Format.” GIF is an image file format commonly used for images on the web and sprites in software programs. Unlike the JPEG image format, GIFs uses lossless compression that does not degrade the quality of the image. However, GIFs store image data using indexed color, meaning a standard GIF image can include a maximum of 256 colors. GIFs are better suited for buttons and banners on websites, since these types of images typically do not require a lot of colors. However, most web developers prefer to use the newer PNG format, since PNGs support a broader range of colors and include an alpha channel. (The alpha channel makes it possible for a single image with transparency to blend smoothly with any webpage background color.) Still, neither JPEGs nor PNGs support animations, so animated GIFs remain popular on the web.

PNG is a compressed raster graphic format. It is commonly used on the Web and is also a popular choice for application graphics. The PNG format was introduced in 1994, after the GIF and JPEG formats had already been around for several years. Therefore, PNG includes many of the benefits of both formats. For example, PNG images use lossless compression like GIF files, so they do not have any blurring or other artifacts that may appear in JPEG images. The PNG format also supports 24-bit color like the JPEG format, so a PNG image may include over 16 million colors. PNG’s are best used for logo creations due to you being able to save the file with transparent backgrounds.

If you’re still a little confused on when to use JPG, PNG and GIF’s here’s a very detailed illustration to help put it into perspective for you.

fbdpkpuytwzk1zpmglho.jpg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: