Looking for some new ways to optimize your code and increase the speediness of your site? Here are some simple ways to streamline your site that you may have overlooked.
1. Minimize HTTP Requests
HTTP requests are a big reason why a site’s load time can be so slow. The best way to reduce these requests is to really make sure your code is super efficient by only using one stylesheet, reducing the number of scripts you use, and don’t use unnecessary images (use CSS or HTML in place of images when at all possible).
2. Enable Caching
When a resource (stylesheets, scripts) is cached, that means it’s stored so that in can be easily and, most importantly, quickly accessed to save time when your site loads.
3. Minify Your Resources
4. Use Stylesheets Over Inline Styling
Not only is inline styling impractical and not dynamic, but it can also increase the size of your HTML files by a lot. Save yourself some load time and put all of your CSS in one stylesheet (but only use one to keep the HTTP requests down!)
5. Limit the Number of Plugins on Your Site
This one is our least favorite, but the fact is that plugins will add extra code to your site that can slow things down. Try to only use the most lightweight plugins possible, and delete any superfluous ones that you might not need.
Most WordPress themes should have a file that serves as the default page template that any page in a WordPress build will be assigned to by default — it should go by page.php. Sometimes, however, the default page template might not be conducive to the design and functionalities of all of your pages. You might need to create an extra (or even a few extra) custom page templates to make sure all your pages can serve their intended purposes.
To create a custom page template, you’ll ned to create a new file within your theme. Give the file a name that would indicate its purpose. Rather than start from scratch, the easiest way to create a new page template is to find the default page template and copy and paste that page into your new custom page file. Then you’re going to need to customize the information at the top of the file pertaining to the page’s name and description:
* Template Name: INSERT PAGE NAME HERE
* Description: INSERT PAGE DESCRIPTION HERE
// other page code
The name you assign to “Template Name” is what will appear on your WordPress dashboard when assigning a template to a page. Now it’s time to add custom code to your new page. You can decide if you’d like to include a sidebar, a loop, or just completely customize the code with your own HTML. Don’t forget to add some extra style rules to your CSS to compensate for the changes in the page structure/content.
If you’re a web developer, chances are you prefer to develop and work on Google Chrome over any other browser. The reason for this is probably because not only is Google’s Developer Tools dashboard and console an invaluable tool to help with development, but also because of the many helpful and useful extensions that are available for Google Chrome that can help streamline the process of web development and design. Here’s a list of some of our favorites:
This extension can be used to take beautiful, clean snapshots of your code that you can use for demos and tutorials.
CSS-Shack is a web and desktop application that allows you to create layered styles (much like you would in photo editing software like photoshop) and then it’ll export the styles for you into a CSS file — great for designers who want to learn more about coding/CSS.
3. Font Playground
Font Playground is a really useful extension that allows you to change the font on any live webpage to one of 1000+ Google Font options or to any fonts you have loaded locally on your machine. The extension is updated with new fonts often.
4. Window Resizer
This one might be pretty obvious, but the Window Resizer extension will resize your browser window to help you optimize your designs for any device or viewport size. A similar function is built into Google Developer Tools, but with the extension you can actually resize the entire browser window to simulate the size of a different device.
ColorZilla is a really great tool that allows you to use a color dropper feature to identify any color on a live site — there’s no need to download any images or open PhotoShop, it can all be done on your browser window.
In WordPress, hooks are the building blocks for your themes and plugins and are vital for their functionality. Basically, their purpose is to allow developers to make their own custom code (and custom functionalities) to themes or plugins without changing any of the original WordPress files. There are two types of hooks that exist in WordPress: action hooks and filter hooks.
Action hooks are hooks that (this may be obvious) trigger an action. They can be inserted at certain points within your code to carry out actions by loading different custom functions from within your WordPress theme. To use an action hook, create a function or choose one of the functions in your functions.php file, and hook that function into your code by using the add_action() function. Here’s the syntax for using an action hook:
add_action( $hook, $function_to_add, $priority, $accepted_args );
Filter hooks are used to manipulate outputs or add particular content to certain loops to make an output appear after a trigger or after a certain type of content. For example, you can use filter hooks to ensure that a particular output (a link, a line of text, a footer) will appear after every instance of a particular type of content, like blog posts for example. This can be achieved by using the add_filter() function.
add_filter( $tag, $function_to_add, $priority, $accepted_args );
If you’re a WordPress developer then you probably know how much quicker and easier it is to develop a theme or create a new WP site on your local machine rather than doing so on a remote server. The only slight problem with building a theme locally is that you can’t run PHP on your local browser — it’s just not supported. Fortunately, we can use MAMP to easily and efficiently create a local PHP server on your machine.
The steps to setting up your server are simple. Once you’ve installed MAMP, configure your settings as follows:
- Make sure that your ports are configured to 8888 (you’ll access your server from localhost:8888), to do this click preferences and then ports from the main MAMP dashboard
- Set your server’s document root (under the Web Server tab) to the directory that contains your WordPress install. If you have it set to another file or directory, you won’t be able to use MAMP to access your WP site.
Now that your server is configured, it’s time to set up WordPress. Click “start” on your MAMP dashboard. Set up your database by clicking the phpMyAdmin link and selecting “create new database.” Give your new database any name of your choosing.
To actually run your WordPress site, go to localhost:8888 and enter the following information into the fields you’ll find on your local server’s home page:
Database Name: yournewdatabasename
User Name (database): root
Password (database): root
Database Host/server: localhost
Table Prefix: wp_
That’s all you need to do to set up your site. Now all that’s left to do is to get to work.