Showing posts with label cms. Show all posts
Showing posts with label cms. Show all posts

Saturday, June 06, 2015

Beginner’s Guide to PHP for WordPress – Part 1 of 3

Beginner’s Guide to PHP for WordPress

WordPress allows us to do so much in terms of building websites without knowing any code. With themes and plugins and a powerful admin area there is a lot we can do without typing any HTML, CSS, JS or PHP. However, at a certain point you need to get into the code to really customize things and get a site to look or behave exactly how you want.

Friday, February 27, 2015

How to Make Your WordPress Site Blazing Fast

WordPress Site

Today's web users have the need for speed. With internet and cellular connections getting faster and faster, users expect sites to feel snappy. As developers, we must make sure we're doing our best to serve those pages quickly. This article will focus on what you should be doing to make sure your WordPress sites are as fast as possible.

Make your Wordpress site blazing fast

There are essentially two main categories that performance can be broken down into: front-end and back-end. Back-end is anything related to the server and how data is populated on a page (PHP code in your theme is the "back-end"). The front-end consists of all your assets (CSS, JavaScript, images, etc.) and markup. Everything a web browser reads and interprets is the "front-end". This distinction is important because it's good to know what you're optimizing and, even more importantly, where you need to optimize the most.

To actually test site speed, use a combination of WebPagetest and Google PageSpeed Insights. WebPagetest gives you a good idea of the actual time (in seconds) that a site takes to load, explaining where bottlenecks may be. PageSpeed Insights is best for looking at how your front-end is site is rendered by the browser.

Front-end performance

The golden rule of performance, according to Fastly's Steve Souders is that 80-90% of a page's total load time consists of the front-end. The back-end's 10-20% is crucially important, but even if you're using the fastest host around, your site still won't live up to its full potential without optimizing the front-end and users perceive it to load quickly. Perception is an important part of front-end optimization. A user doesn't care how many seconds a site takes to load. A user cares about how quickly they can interact with a site without a delay. Not that you shouldn't be worried about the actual load time (you should), but by following these techniques, you can make sure that your site is in a usable state fast, before loading the rest of the page assets.

WordPress Site

CSS

Before delivering CSS to the browser, it’s important to compress it and remove unused selectors.

Once your stylesheet is ready to go, the easiest (and standard) way to load it is to reference it in the head. The browser will load and parse it before the rest of the DOM is loaded. However, there's a new technique where "critical" styles are inlined in the head and then the full stylesheet is loaded asynchronously using JavaScript. This technique can be used when trying to get a site to load (or perceive to load) in under a second, but it's a great tool to keep in your arsenal. Check out this great extensive article on using this technique.

WordPress Site

JavaScript

The golden rule(s) of optimizing JavaScript are simple: serve as few JavaScript files as possible and minify and concatenate. Third-party WordPress plugins can bloat your document with unminified blocking JavaScript files, so it's important to be mindful when choosing plugins. Ideally, you'd concatenate ALL JavaScript files into one and then minify it. When that's not possible, HTML attributes called async and defer can be used to load JavaScript files asynchronously or once the rest of the page is loaded.

The most common place to reference JavaScript is at the bottom, right before the closing tag. However, there are more advanced techniques to load JavaScript. The Filament Group has several tools you can use for this. The best approach is to load scripts dynamically by inlining a small function in the head that appends script tags without blocking the rest of the page. For more information, check out the loadJS script.

Images

Images are often the biggest files on a page, responsible for the largest load time delay. The good thing about images is that, unlike CSS and JavaScript, most browsers load them asynchronously. That helps with the perceived performance of a page. But it's still important that A) you're serving as few images as possible and B) those images are compressed as much as possible.

Compression tools are necessary for squeezing out as much excess as possible on images. ImageOptim is a great free Mac compression app, along with OptiPNG and jpegtran for use with task runners like Grunt.

WordPress Site

Fonts

Web fonts are super common these days. Google Web Fonts make sites pop. It's easy to not realize the performance hit you take by just referencing them in the head. The performance hit is small, but every little bit counts! For best performance using web fonts, check out the the Web Font Loader, co-developed by Google and Typekit. It's an open source script that both manages the loading of your fonts from third parties like Google Web Fonts and allows them to load asynchronously (getting tired of that word yet?).

As to be expected, there's some configuration needed to get Web Font Loader integrated into your project, so check out the project on GitHub for setup info.

WordPress Site

Back-end performance

The front-end has all kinds of tricks for speed, but we're not so fortunate on the back-end. A server is either fast or it's not. It's critical that your site gets to the browser as quickly as possible, which can be accomplished by getting on a quality host. Managed hosts like Flywheel are the most realistic way to see true performance gains for WordPress sites.

Dedicated Wordpress Hosts

There are are a host of managed WordPress hosts (pun intended). What managed hosts typically provide is a dedicated VPS (virtual private server), a caching layer and other infrastructural bonuses that set them apart from your typical shared hosting. These all matter when it comes to loading your site fast, so the best and first step to a super fast WordPress site should be the host.

For example, let's take a look at Flywheel. Flywheel is a managed host, and their infrastructure is designed so your sites never touch another customer's. Compared to a host that crams as many sites as possible on the same server, having your site on a server by itself works magic for speed. It means that server's resources are just working for you, not for everyone else.

WordPress Site

Theme Logic

There are many things you can do while developing to make your back-end as performant as possible. Nasty loops that do tons of comparisons and use lots of memory slow down a site down. There are lots of articles on performant PHP, but just take care when writing theme logic!

Another important time saver during database queries is the Transients API. WordPress transients store cached data in the database temporarily, which means your logic only has to run once (whenever the first visitor loads the page). The results are then stored in the database. The Codex has good documentation on the usage of transients.

Caching

Caching assets is one of the best ways to improve performance. Once a user loads your site the first time, you can take advantage of browser capabilities to cache the contents of that site locally, so on the next visit the user already has them loaded. The most common WordPress caching tool is W3 Total Cache plugin. This plugin (or one similar) is needed on most shared hosts. However, WordPress specific hosts like Flywheel handle caching for you behind the scenes. With hosts like Flywheel, all of the caching is done on the server outside of WordPress, which means your sites are already tuned for max performance.

WordPress Site

GZIP

Gzip is a file format that's used to compress other files together, similar to just zipping files. Gzipping allows files to be sent over the web at a compressed size. Once a browser receives gzipped data, it unzips it to get the source data. Gzipping is super important for speed, as it sends your data over the wire in much smaller packages (50 - 70% smaller, in fact). Smaller file size equals faster load times!

You should always check to see if your host supports Gzipping. Managed WordPress hosts like Flywheel enable Gzip compression by default, so it's one less to to worry about!

WordPress Site

CDN

A content delivery network (or CDN) is a network of servers that serves up your website and its assets from different locations based on the user's location. For example, let's say you're not using a CDN and your site is hosted in San Francisco. When someone from, say, Spain visits your site, they have to retrieve all your assets from your server in San Francisco. The long distance between the two locations clearly takes longer than if someone from San Francisco loads your site that's hosted in San Francisco. A CDN serves your assets from the closest geographical data center. Users will hit the server closest to them, speeding up the physical time and distance required to load the page.

Some of the most popular CDNs include Amazon Web Services, CloudFlare and MaxCDN. If you want a super easy setup, check out Flywheel's MaxCDN add-on.

WordPress Site

Conclusion

Tuning a web site to maximum capacity can be challenging. There are a lot of moving parts. By working through both the front end and the back end, a site can be designed or overhauled for maximum speed. On the front end, saving as much time and space as possible means the con-tent you’re serving gets to the content faster. But if even if your front end is brilliantly designed, none of that will matter the servers you host the site on aren’t running at their peak performance. Managed WordPress hosts tune sites to peak performance and take out the frustrations behind web hosting. Hosts like Flywheel will not only make your site fly, but make your hosting experience worry-free.


Tuesday, February 17, 2015

Frequently Used Functions in Magento Development

Magento Development
Magento is a very powerful and thus slightly difficult to tame CMS. It is built on the mighty Zend framework, and it often becomes a difficult task to create or edit Magento templates. Here in this article, I'll try to compile a brief list of useful Magento template development functions, which are used frequently during theme development. We have to cover a lot in this article, so without further ado, I'll start explaining the functions.

Friday, January 17, 2014

How to Make WordPress Sites Load 72.7% Faster

How to Make WordPress Sites Load 72.7% Faster

You want to know the secret to a faster WordPress website?

You and everyone else.

Thursday, January 09, 2014

WordPress Tutorial: What’s New in WordPress 3.8

What’s New in WordPress 3.8

WordPress 3.8 is here and there are a lot of exciting changes. Get up to date with the new features and start enhancing your blog or website today. In this video, lynda.com author Morten Rand-Hendriksen reveals the redesigned dashboard, which is high contrast, clean and more customizable than ever and the new Twenty Fourteen theme, which provides a (highly requested) featured content area on your front page. The new dashboard is also fully responsive, so you can now visit the dashboard from your mobile device. This is great for making changes on the go!



Magazine Theme

The magazine theme is a page layout for WordPress (a "theme") that mimics the layout of a newspaper or magazine, with multiple boxes and spaces for photographs, allowing for certain posts to be called out.

Look and feel

In software design, look and feel is a term used in respect of a graphical user interface and comprises aspects of its design, including elements such as colors, shapes, layout and typefaces (the "look"), as well as the behavior of dynamic elements such as buttons, boxes and menus (the "feel"). The term can also refer to aspects of an API, mostly to parts of an API that are not related to its functional properties. The term is used in reference to both software and websites.

Look and feel applies to other products. In documentation, for example, it refers to the graphical layout (document size, color, font, etc.) and the writing style. In the context of equipment, it refers to consistency in controls and displays across a product line.

Look and feel in operating system user interfaces serves two general purposes. First, it provides branding, helping to identify a set of products from one company. Second, it increases ease of use, since users will become familiar with how one product functions (looks, reads, etc.) and can translate their experience to other products with the same look and feel.

Some Popular WordPress Magazine Themes From ThemeForest


Thursday, April 18, 2013

Magento for Designers: Multi-Store Functionality

Magento for Designers: Multi-Store Functionality

Magento ships with a number of very powerful features under the hood that go mostly unnoticed by the folks that install and use it on a daily basis. The feature we're looking at today, the multi store functionality, happens to be one of those; and arguably, it's one of the most advanced ones. There isn't a general vernacular for this feature so I'll be just calling it multi store from now on.

Thursday, April 18, 2013

Introducing The Magento Layout

Magento Layout
In this tutorial, we introduce the Magento layout by creating a simple module that will add some custom HTML content to the bottom of every customer-facing page, in a non-intrusive manner. In other words, we will do so without actually modifying any Magento templates or core files. This kind of functionality is a common requirement for many things such as affiliate referral programs, customer tracking analytics, adding custom JavaScript functionality, etc.

Thursday, April 18, 2013

The Basics Of Creating A Magento Module

Creating A Magento Module

A lot of community extensions (or modules) are available for the feature-rich open-source e-commerce solution Magento, but what if they don't quite work as you want them to? What if you could understand the structure of a Magento module a little better, to the point that you could modify it to suit your needs or, better yet, write your own module from scratch?

Tuesday, November 20, 2012

Understanding Magento Layout Update XML

Magento
Note: The following article is constisted of pieces from more than one sources. You can view all of them at the end of the article.

In Magento, layouts are the XML files that define a given page within the store. The templates usually specify a module and a template to go with that block, allowing for standard modules (such as loading a products data) to be combined with custom templates to style the data.

In Magento a block is simply an imaginary container for something. A block can contain other blocks or it can contain the content itself.

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
     [...other stuff inside...]
</block>

Wednesday, October 10, 2012

Wordpress: redirect to post if search results return one post

Wordpress: redirect to post if search results return one post

WordPress has a built in search functionality which allows your visitor to easily search for posts on the blog. It can search for keywords in the post title and in the post content.

When a search is performed WordPress will use the Archives.php file to display you the results. You can customise this page to display the entire list of posts returned from the WordPress database.

The problem is that if WordPress returns only one post in the search results it will still take you to the Archives.php file and display a list of posts, well the one post.