Why you should care about speeding up your WordPress site?

Why you should care about speeding up your WordPress site?

483825828_e3ab500c9a_o

If you ever have sat and wait for a website to load, you were surely after some very important piece of information, because the majority wouldn’t have just go elsewhere to find that info.

According to this Kissmetrics post, 40% of people abandon a website that takes more than 3 seconds to load.By having a slow blog, you are missing out on increasing your traffic and therefore your revenue.

  • Reduce user frustration by Improving the overall UX (User Experience)
  • Google takes in to account its ranking algorithm
  • Faster website means more visitors and more conversions

These are actions are in no particular order, some are very easy to implement and others require more expertise to use them be careful with them. Most of them are very straight forward like installing and configuring plugins.

 

Google PageSpeed Insights as valuable yet frustrating tool to analyze your site performance

This tool have a rating score that goes from 0 to 100 points. With 85 or above you will get the “green light” of approval that indicated that your page performance is inside the standards.

You might me wondering how does PageSpeed insights evaluate your site? It looks at factors like: Server configuration, the html structure and the use of external resources like images, javascript and CSS.

Evaluating your site using this tool can be an eye opener if you haven’t performed any optimization task in the past. The great thing is that it provides a great starting point to improve site performance.

 

Benchmark Your Site.

PageSpeed is just one of the options in the market to speed test your site. In order to get a more complete panorama on how your site is performing you should refer to Pingdom Website andGtmetrix every time you take a new measure in place.

 

Hosting Matters

When you are beginning as a blogger you tend be money wise and you start in non-expensive shared hosting options.Share hosting are an inexpensive way to host your sites. Among the most popular hosting options are

1 & 1 , Dreamhost and Host Gator. All of them offer a non-expensive entry level service of share hosting and also more robust ones like VPS ( Virtual Private Service) and Dedicate Service.

Shared hosting is meant for low traffic blogs, if your site is getting bigger you must consider move to dedicated host where your blog be able to handle heavier loads of traffic.

 

Stay up to Date: Update your WordPress Core and Plugins

The core is faster today than previous versions and also being up to date reduce security risks.

 

Make sure you are using a solid framework/theme.

A light framework is a key ingredient for a speedy site. They are optimized to keep the “guts” simple and tidy. Well organized CSS and JS and the use Image Sprites are common practice in premium themes.

A great example of light and professional theme is Thesis site as big as Copyblogger.com use and praise about it. Another great option is the Canvas theme developed by WooThemes.

 

Clean up: Keep your plugins at their minimum expression.

Plugins have a huge impact on your blogs performance. They are responsible for many conflicts among other plugins and could be server resources hogs. Thats why you must keep them up date and whats more important get rid of the one you are not currently using. Monitor that load with P3 (Plugin Performance Profiler). It will creates a detailed performance report for your site so you can see which plugins are slowing your site.

 

Images: Optimize them automatically.

For this task there are a couple of plugins that makes a wonderful task reducing the file size of the images in WordPress. One is called Smush.it from yahoo, but in my experience it is a bit slow, and the my personal favorite EWWW Image Optimizer, it is faster and I have got some better images compressions ratios with it. Both, once installed will optimize all your images on the fly and you can also bulk edit the ones that are already stored in your blog.

 

Add an expires header to static resources.

With the addition of expires header you can specify the duration that the browsers doesn’t have to re-fetch static content from your site like css file, js, images etc.

That could reduce significantly the load time for your regular visitors. All you need to do is copy and paste this code in your root .htaccess file. More info in this article.

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault “access plus 1 month”

# My favicon

ExpiresByType image/x-icon “access plus 1 year”

# Images

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType image/jpg “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

# CSS

ExpiresByType text/css “access 1 month”

# Javascript

ExpiresByType application/javascript “access plus 1 year”

</IfModule>

 

Install a Caching Plugin

This only recommendation give probably the most dramatic results in cut your load time. It makes static html versions from your blog pages and post. Improving drastically the speed of your blog. They are tree fantastic plugins for that. The most acclaimed is W3 total CacheWP Super Cache and my personal favorite Quick Cache I like the last one better over the other two, because is really quick to configure, basically is just download install and forget.

 

Combine, minify and compress the JS/CSS resources loaded

The minimization, (cutting unnecessary characters) compressions and putting together all your JS/CSS you optimize so the browser takes makes more and smaller queries loading those files.

You must find the plugin that suits better for your theme, because it could make your JS/CSS to load improperly altering the look and functionality. You must tweak the settings to find what is best for you.

My recommendations are: JS & CSS Script Optimizer and Async JS and CSS

 

Enable GZIP Compression

Compression is a safe bet to save bandwidth and speed up your site. It will compress the data from your server it will be decompressed by the client (browser). So you must configure your server to returns zipped content to the browser.

If your server is ISS follow these instructions in the Microsoft TechNet document to enable compression.

For Apache you will need to add these lines of code in your .htaccess file.

# compress text, HTML, JavaScript, CSS, and XML

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

Add an expires header to static resources.

With the addition of expires header you can specify the duration that the browsers doesn’t have to re-fetch static content from your site like css file, js, images etc.

That could reduce significantly the load time for your regular visitors. All you need to do is copy and paste this code in your root .htaccess file. More info in this article.

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault “access plus 1 month”

# My favicon

ExpiresByType image/x-icon “access plus 1 year”

# Images

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType image/jpg “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

# CSS

ExpiresByType text/css “access 1 month”

# Javascript

ExpiresByType application/javascript “access plus 1 year”

</IfModule>

Knowing What to Put on Your Mobile Site

Knowing What to Put on Your Mobile Site

002-perspective-app-screen-presentation-mockup-psd

If you have a website for your business and need to have a mobile site you may be thinking you can just convert the regular site to the mobile site without any changes. While this may work in theory, it isn’t always a good idea. There are reasons why full site content doesn’t always work with mobile sites, including the size of the devices that mobile sites will be viewed on, the operating systems in these devices, and the ability of the content itself. When you begin building your site, knowing what to put on it and what to leave off will help you in a big way.

Pick the Right Content

Look at your smartphone and think about the things you read on that screen daily. Think about the length of the pages and the type of content on them. Think about the sites that frustrate you the most, and the ones you actually enjoy reading on your phone. This is how you need to think about building your mobile site. If you are working with lots of content, break it down by links and subheads. Don’t put pages and pages on your site and expect someone to read through it all to find that they need. List only the very important content on the first page, and link to the rest with multiple links that organize the subject of the content.

Choose Good Effects

Use mobile website templates to help you get the right effects for your mobile site. This could be something as simple, but useful, as “click to call” features or social media tie-ins. Whatever type of effects you want to use to make your site better, use a template to keep it simple and organized.

How to Organize

Use links with clearly defined titles so that people looking for things will know exactly where to go when they are looking for certain types of content. For instance, if you are selling old vinyl discs, make different links for genres or bands that you have discs for. If you have specific information for your company that you need to express to readers, you should list those in links, too, but don’t put too much content into the links. If you have contact information, list it clearly and concisely. List your history in the “About Us” section, but don’t put in information that doesn’t help clients know what they need to know about you. Finally, link back to the full site where clients can go if they want more information or more content about you and the company.

When you are building a mobile site from your main site, you may be tempted to just pull all of the content over and be done with the process. This can harm you, though, because traditional web content doesn’t always show well on small devices like smartphones, and people won’t read that. Pick the right content, use links to organize content, and choose effects that enhance the site, not hurt it to build the best mobile site.

Freepik: Best place to download Free Vectors and PSD resources.

Freepik: Best place to download Free Vectors and PSD resources.

As designers we are always in the hunt for coffee and design resources (and sometimes for our clients to pay). When I need to find resources I usually look for them in different sites. For vectors I go to good old vecteezy and for photographs I always go to sxc.hu (even though their inventory is not as good as it used to be); and of course the classic search in google images. Sounds like a hazzle, doesn’t it? well it is! Just until I found freepik.com the all in one free vectors, photos and PSDs search engine.

(more…)

Easy Metal Effect Tutorial in Photoshop

Easy Metal Effect Tutorial in Photoshop


Metal finish is always a very usefull effect. But all the people goes for the complicated way. As an apple fan I’m in love with the clean anodising aluminium finis in Apple’s products.

So here is a very easy way to reach a very clean metal effect.

(more…)

Free Vector Club Flyer,Tutorial and Giveaway

Free Vector Club Flyer,Tutorial and Giveaway

Summer have just ended and we are back to school and to our work stations. But we must party while it is still warm! (and of course during winter to raise our body temperature). In order to celebrate spring we have two hot gals dancing for you all night, and completely free. (Well vectorized ones but hey! they are still gorgeous)  (more…)

Easy Smoke Tutorial in Photoshop

Easy Smoke Tutorial in Photoshop

This is a very usefull, easy and professional effect for any idea you have in mind without the need to blend smoke photos to the design. And with the possibility to use the effect on all the canvas without fear of bad resolution. (more…)