Be Smart While Optimizing WordPress Website-Sprites

We learned many things regarding to the various WordPress optimization techniques and their ensue at negative side in our previous posts like Be Smart While Optimizing WordPress Website-Object Caching.

Now, we need to think over other performance boosting techniques used by modern WordPress website developers in order to deliver best results in their side. Among these all techniques usage of sprites are highly favourite in web developer community. Smart developers are adding all navigational elements and most of UI elements in to sprite.

Concept of Sprite

The basic concept of sprite is to combine multiple images into one image adding pixels in one code so they load image in progressive manner and save our visitors to abandon the site waiting for full loading of different images. This speed up the process of page loading as well as boosting interactions in dynamic website with dynamic content.

Problems with Sprite

We need to be careful while adding more pixels into the sprite as mobile browsers have some limit to load heavy images or hefty pixel data at one time. Particularly, iOS and Android devices showing problems in loading with excessive sprite data. If you are going to split sprite image in to two or more fractions by calculating the dimension of the image you can load them easily, but it seems weird when they display on the mobile.

Possible Solutions

Thus, the ultimate solution of this problem is to limit the size of image by calculating them using a tool devised by William Malone for Safari browsers. This way you will able to devise new images with different sprite and will save yourself from adjusting CSS code that a big sprite is using in order to split the big image.

Other Techniques

Other WordPress website optimization techniques include the usage of CSS and JavaScript Minification where we have to remove the non-essential characters such as colons, semi-colons, new lines, etc. from the CSS and JavaScript code. This way we can reduce the file size and hence they improve the speed and overall performance. In order to make code more compact many plugins are out in the market.

The problem arises with these plugin usage when they act aggressively and start rearranging CSS selectors or grouping the properties in weird ways. This ultimately breaks the logic of the document code and resulting into unpredictable behaviour of the web page or entire WordPress website.

Therefore, I would like to advice my WordPress developer fellow to avoid such aggressive minification plugins at all and use online FreeFormatter services.

Gzip is an another speed boosting services where you will find all code and components downloading in zip file manner compressed in certain ways. Latest browser can unzip or decompress these Gzip components and reduce load on bandwidth and time in loading. Unfortunately, Gzip demands mod-deflate installed on server and many hosting services are not equipped with it.

Be Smart While Optimizing WordPress Website-Object Caching

In my previous post Be Smart While Optimizing WordPress Website-Reverse Proxies I have discussed important issues regarding to WordPress website performance optimization techniques and tools when we apply reverse proxies. I have torched problems may arise with reverse proxies implementations.

Now, keeping the threads continue I am going to explain the role of object caching or Memcached in modern website performance where hefty database is norm in e-commerce category websites in particular.

Role of Object Caching in WordPress Website Performance

Generally websites with heavy traffic or e-commerce websites are experiencing plenty of request to its database in form of various queries. Therefore, MySQL mechanism is becoming constantly engaging in accomplishments of such queries each time the requests have made. This poses extra load to the server and bandwidth in bonus.

Smart WordPress web developers have analysed the interaction between server-clients and with databases in particular and found out that most of the queries are repeating in nature. Therefore, they have devised object caching mechanism or Memcached system that takes help of RAM at server to store this queries and their output in form of cache and serve that directly when the requests have made instead exploring database each time from the scratch.

Things Go Wrong with Object Caching or Memcached

In most of the cases this Memcached is working beautifully and serving its purposes, but in some odd cases it behaves in weird ways. For instance, in case of badly coded WordPress plugins, which are tending to store huge amount of data like big images. Now, trouble begins because Memcached can store limited data on RAM so it tends to delete the previously stored data in order to store new incoming images. Unfortunately, this process couldn’t finish due to oversize image data and previous data has been deleting in due course.

This way Memcached found empty and adding another service to empting and filling the cache that slow down the processors or RAM and clients instead getting rapid response ending up with slow performance. However, this is not desirable at any cost and we have to either disable the services of that badly coded plugins or Memcached itself.

In short, we have to take smart decisions while optimizing WordPress websites using modern techniques like Memcached and run system survey beforehand to find the possible bottlenecks.

Be Smart While Optimizing WordPress Website-Reverse Proxies

Today we are hard pressed to perform best while website performance is in question while negotiating with clients. Ever shortening waiting period among the new generation of visitors and fragmented devices on the hardware and software fronts making task much daunting, if not impossible.

WordPress Optimization

Among these all, website loading is a primary criterion and dealing effectively with it is a guarantee of success to grab next projects for a WordPress website developer. However, WordPress is designed to offer best performance in this regard, but some other techniques of WordPress optimization for performance are heavily used by modern web developer community. Therefore, I have decided to dive in deep and know all facets of WordPress website optimization techniques in this post.

Smart Implementation of Reverse Proxies

The role of reverse proxies is to stand in between the visitors and server. Fundamentally, when a request for a web page is made by a visitors it triggers some actions on the server and server execute calls to the database to deliver output in form of static and dynamic resources to visualize the page, mostly in form of HTML.

Mechanism of Reverse Proxies

These resources from the database are shipping to the client device and downloading process takes place. Unfortunately, this process is repeating with each request. Thus, server has to work hard frequently or constantly to generate HTML output of the web page or entire website. Here one mechanism plays vital role to avoid repeated output generation process on the server and that is reverse proxy. In fact reverse proxy is caching the output or results generated during the first request. It then delivers these cached results on next requests and saved time and computing resources of server to generate repeated output for the same requests.

Problems Arise Due to Reverse Proxies

At first glance, reverse proxies are looking great as they speed up the loading process and decreasing the computing load on the server, but they also create sever problems if implemented wrong. For instance, in WordPress website we have to implemented additional tweaks to clear the cache correctly as WordPress isn’t natively supporting the reverse proxies at all. This taking cache and clearing cache mechanism demands smart technical implementations.

Technicality of Reverse Proxies

Let’s dig it deeper in technical terms. WordPress has some default hooks (events) in its core that shoot the order to clear the cache made by reverse proxies on the server. These events comprise of major tasks such as doing WordPress updates, adding post, adding comment, deleting post and comments, etc. Thus, whenever these major events taking place reverser proxies updating the cache and reflect the latest changes on the web.
Now, real problems arise when something happens outside these core events that can triggers the purging of cache because it don’t reflect those changes immediately and your WordPress website users have to rely on previously taken cached copies of the web pages.

When Problems Arise Due to Reverse Proxies

During WordPress Core Updates: technically, WordPress puts website in maintenance mode when updates of core (version) taking place. Now if reverse proxies are caching copies during maintenance mode they will come with error reports or stand still in maintenance mode and don’t let users to perform any action until the new cache happens and live pages are serving. Now, how will you tell reverse proxies that your website is in maintenance mode so please don’t cache the copy!
During WordPress Plugin Updates: during plugin update WordPress generally delete the entire folder of that plugin and add new one with new files. This means plugin and its relevant features as well as functionality are stop or halted temporary and resume again when update of plugin finishing. Now, what if reverse proxies taking cache during inactive state of that plugin and visitors want to use those features or functions on your website? How do you tell reverse proxies that half for some time please as our plugin updates are taking place!

Take Advantage of Dependency Management Tools and Assure a Project Success

As our title is indicating we are talking about dependency in software development field. Here we meant to a typical library, or a framework, or a component in simple terms, which is provided by third parties and responsible for the core functionality of the website at good extent. The dependency of functionality leads us to tell is dependency of project in web development or mobile development in present terms.

This Is Dependency in Software Programming

Today our websites are consisting tons of code, data, and content therefore, its various functionality depending on the various libraries those are providing some sort of prebuilt functionality in their base code by becoming integral part of code base. This explanation itself telling us that if we are working as a team on one project, we should have identical set of these dependency all the time along the course of programming.

Dependency for WordPress Developers

Since we are a team of WordPress developers, I would like to cite the term dependency management in contexts of WordPress projects the most. For sake of imagination a typical WordPress web development project might have selected dependencies such as plugins, themes, and the WordPress core itself.

If we look at them closely, we can find that there are several plugins in WordPress and many are playing crucial parts in the operations of the WordPress websites for instance, e-commerce plugins for e-commerce functionality in WordPress shopping carts. In contrast, themes are customized codebase, but main parent theme can act as dependency in most of the WordPress programming projects at medium to large scale projects.

As far as WordPress core is concerning I would like to advocate it as a big dependency because the version of WordPress core framework define and depending on whole project functionality and compatibility with other components too.

Is It Essential to Have Dependency Management in WordPress Programming Project

As stated earlier, in present days we have big scale projects involving large team of WordPress programmers. Therefore, we need to rely on project management software for efficient and quick development and dependency management is one of the tasks of these project management. The direct benefits of dependency management tools are many such as consistency at first glance where versions of core and various components are crucial factors for consistent coding.

Moreover, we should have a central place where all dependency resides and visible to all concerning team members. Thus, we can avoid many conflicts easily. If we have good dependency tool that is doing many tasks automatically as well as informs the team members on proper time. The most sought after characteristics of these dependency management tools are simplification and streamlining the downloading, installations, and updating of various dependencies involving in your project

Why Not VCS

If you are a seasoned WordPress developer, you may have a sharp question that why we should depend on separate dependency management tools instead of simply looking into the Version Control System (VCS). Now my answer is some questions again.

 

Why you should remember the versions of each dependency and check them frequently in VCS? What about the newbies working in your team? Would you like to spend your valuable time to teach them to check VCS frequently and update the components without missing?

I hope you may have your answers here and you will leave job of versioning to Git and use latest, useful, and dedicated dependency management tools for such tasks without failing. For instance, composer may help you a lot in this course. If you need to learn further contact our expert WordPress programmers freely.

 

Helping Hand to Newbie WordPress Developers Part 4

In last part 3, we have seen how we accomplish data transfer using phpMyAdmin with the help of cPanel. Now today we will finish this transferring process of WordPress website from development server/local server to live server on the web and finally publish it.

In last part 3, we explored the ways to create new database on live server so now we will see that how we import the database from the local server to live server. Again, this time we will use cPanel in our WordPress web development project on the live server.

Importing Database on Live Server

In cPanel you will find the database section on the dashboard so you simply need to scroll it down and click on phpMyAdmin button/section so you will immediately reach at phpMyAdmin UI interface.

Here you need to click on the database you have created earlier and click on the Import tab located in the top menu. Since database is empty, you won’t find any table in new database. Now, you will on the import page of database and need to select the file button. There you can browse your gipped database file you have securely saved in previous steps.

Once selection of database finished press Go button at bottom portion of the import page of phpMyAdmin. This action will trigger importing process for your WordPress database during your WordPress programming process.

Fix the WordPress Website URL

You may have notice that the website URL during WordPress development process on local server was beginning with IP address of your PC or local server you have setup during the installation process of WordPress source at initial stage.

Since we are going to live, we need to remove those additional numbers and characters from the URL and make it standard URL on the web so anyone can access it and remember it. Therefore, you have to look up your phpMyAdmin where wp_options table is located in database.

If we change our database prefix from default ‘wp’ to ‘custom text’ we can setup standard URL easily. In order to accomplish this step you have to click on ‘Browse’ button located adjoining to the wp_options table. Now under the field ‘options_name check where is ‘siteurl’ button is located and click the ‘Edit’ field icon situated at the far left of the begging of the row.

This action allows you to edit field through pop up a new window where you have to put input value for ‘option_value’ field. Since you have already have local URL begins with localhost name you have to carefully enter the new site URL you have obtained from the web or your hosting provider.

Publishing Website on Live Server

Before publishing website on live server you have to fix the miscellaneous errors prompting while checking the site such as:

• You have to fix establishing database connection errors
• Fix the missing images warnings
• Fix the broken links  using the Velvet Blue WordPress plugin or alike something. Instead of that you can use SQL query to solve above problems.

You can updating path and broken links through phpMyAdmin where SQL button is located on the top menu where you can write your queries and should not forget to correct the URL from local to live.

 

Helping Hand to Newbie WordPress Developers Part 3

In previous part 2, we have explored the ways to know database, and learned how to use them in our WordPress development effectively. In this recent post, we would like to know about the transferring process of local WordPress website to the live server without losing anything and with a smooth process.

Use cPanel

Once you finish the development process at local server, you will have huge database as well as bulky folders with innumerable files for posts, pages, images, themes, plugins, and so on. Today we are using cPanel to place and manage our website or web application sources to the hosting server. No doubt, cPanel is equipped with all tools and technologies to manage and migrate sources from local to live server manually, but there are various plugins available to do these tasks automatically with adequate security and speed for bulky web sources.

Use FTP

There BackupBuddy and Duplicator plugins used in recent generations or WordPress programmers who used to face such task on daily bases for their patrons. We know we can’t copy past our source files and folders without setting permissions and security variables appropriately. Therefore, use of FTP (File Transfer Protocol) is mandatory for all WordPress developers.

There are various FTP clients available in the market for free or paid such as WS_FTP for windows platforms, Filezilla as firefox or other browser plugins, FireFTP for all platforms, Cyberduck for Mac only, and WinSCP for windows only.

Transfer Database

The first and foremost step is to transfer local WordPress database using phpMyAdmin. As we have learn about phpMyAdmin in previous parts, we need to know that here we have to use only its export button located at the top menu bar of cPanel of your local host. Now, select all tables and zipped them to compress. After compression select zip file and push the Go button, located at the bottom of the page to download your database.

Now, turn on FTP client and connect it with your live site, where you will find various directories so you need to select proper directory for you and that would be public_html directory in your domain. The next step would be to select your WordPress files on local server and upload them to the liver server.

Create New Database

For database transfer you need to create MySQL database on the live site first using the cPanel features given especially for MySQL database. Once you push that database button on the cPanel dashboard you will enter in to the database creation wizard where you need to fill up all essential input fields with appropriate information.

Finish Database Transfer

Now, finally you come at the stage of importing you zipped database file saved in previous steps. At very moment, database section on cPanel will help you to import database so go to database section and click on phpMyAdmin where you will find new database with no tables so now click the import tab in the top menu and on the import page select file button and select your zipped database. After selection, you can press Go button at the bottom of the page and start importing process.

In next part, we will finish the transferring process from local to live.

 

Helping Hand to Newbie WordPress Developers Part 2

In first part 1, we have learnt some initial lessons to setup WordPress on the local host using Wampserver and its functional parts phpMyAdmin for database setup and managements. Taking the discussions further, we would like to introduce with database and its components as well as migration from local server to live one in this current post.

Know Database in WordPress Development

Generally, database consists of tables and data inside which are retrieve to generate HTML pages dynamically on infinite requests. Therefore, WordPress is considering the most powerful content management platform on the web and consists of more than 60% websites, which are running on the PHP code.

By default, each default database has eleven, default database table in WordPress fragmenting each table in different sections such as features, functionality, and various sections of the WordPress variables. For instant,

Comments: wp_commentmeta is a name of comments storing table where wp_ prefix is adding by default. If you look at the table closely, you will find four main fields like

• meta_id
• comment_id
• meta_key
• meta_value

Based on functionality each meta_id is in accordance with comment_id that manage the Meta information in the table for instant approving comment, showing pending comments, show editing functionality for comments like trash or recover or hide, etc.

Wp_comment is bit different and its table is consists of name of author of the comment, URL, email, texts of the comment, etc.

URL manager: wp_links is the table component that enables WordPress developers to manage blogrolls created by earlier versions of WordPress. Alternatively, we can use Link Manager plug-ins available in the market and create custom URL different ways to make our blog or WordPress website SEO friendly and user friendly so users can remember URLs easily.

Setting or Options: with wp_options table we can easily manage website settings like URL, admin email, categories default and custom, numbers of post per web page, set date and time format and so on features and functions for our website. In latest versions of WordPress, this option table is highly useful for the storage of plug-in settings for innumerable plugins to give extended functionality.

Post Management: wp_postmeta table is storing all Meta information related to your posts and pages of your WordPress site. This table is highly useful for theme or template creating WordPress programmers and SEO professionals to store their SEO meta data through SEO plugins available in the market.

Another table for post management is wp_posts that is storing data related to post types only or in other words content types. Therefore, you will find data related to your posts, pages, revisions, and other custom types of posts in this table.

Taxonomy: basically WordPress is offering powerful taxonomy system on the web so it permits you to organize content in decent and usable manners. If we define individual taxonomy items, we will use terms for them and these terms are store in wp_terms table so you can categories and tags your posts or pages and can easily manage relationships with other post types using wp_term_relationships table for a big WordPress web development. Similarly, wp_term-taxonomy helps to define taxonomy in intricate WordPress development project and can differentiate differences between categories and tags easily.

User Management: we have two tables to manage users at different permission levels for our WordPress website and its backend system. Wp_users and wp_usermeta are performing these functions of user managements by storing data about usernames, their passwords, their emails, and other relevant information at first hand.

 

Helping Hand to Newbie WordPress Developers Part 1

Today I am going to extend some helping hands to the newbie WordPress programmers who have keen desires to experiments directly on the WordPress platform using a local host or local server on their own PC or a dedicated PC in the office network as a server.

It is fact that we majority of developers using Windows OS on our computers therefore, today I am going to depict how to set up a WAMP server on your Windows PC. However, today seasoned developers also prefer to create a local server environment or create a local host in order to create a WordPress theme or invent a new WordPress plug-in or test them.

Setup WAMP Server for WordPress Programming

Naturally, WAMP is derive from Windows, Apache web server, PHP, and MySQL database management bundle therefore, it is easy and cheap or almost frees option for a server creation. In order to set up WAMP server you need to download WAMP server source on your PC and run the installation process simply following on-screen instructions, nothing complicated.

Setup MySQL Database for WordPress Development

Database management is crucial and essential step in WordPress development because WordPress is based on the PHP programming language, which is storing and retrieving data from the database and perform many dynamic functions without your manual interventions. For instance, WordPress store data of posts, pages, comments, tags, categories, URLs, and users in normal course, which are contributing directly in the creation of very dynamic pages without placing a single HTML code manually.

Role of phpMyAdmin

Now, these database management is done by phpMyAdmin, which is comes with WAMP server bundle and after installation you can access it through clicking WAMP server icon in windows taskbar. Functionally, phpMyAdmin creates interactive user interface to setup database and manage them as well as export them to the web server locally or on the live host server.

In phpMyAdmin you have to click on the create a new database option and fill the information on the prompts or pop-ups like name of database, user name, password, database host, table prefix (wp_), etc. so you can create various tables in database and perform multiple functions at a time.

Installing WordPress

One database is setup you have to move to the web to download WordPress source from the official website of the WordPress that is WordPress.org. Download, zip file, un-zip them in a WordPress named folder. Now, you have to past WordPress folder into the root directory of wamp server in you C-drive where www folder is called the root folder. Of course, you can rename your WordPress folder in order to avoid conflicts and name them as your website name. suppose we name it as yoursite.

Configure the WordPress Installation

Now, you have to go to browser and type http://localhost/yoursite/

Immediately you will have a prompt telling that it can’t find wp-config.php because you have not configure yet so you need to create a configuration file clicking on the Create a Configuration File button on the prompt.

The next screen would be database information seeking so you have to fill database name as decided before while creating MySQL database. Here you won’t need to provide user name and password because there would be a by default name of database user and that is ‘root’. Now, WordPress will create a configuration file for you. Immediately, you have to run the WordPress installation and gradually filling the information in the forms one-by-one. However, they would be some basic information and you will finish installation with the success message and log-in window at the end.