There are many reasons as to why you should speed up your website. Your site speed provides positive measures towards the visitors experience and also search engine rankings.
It is obvious that high load times will make your site’s bounce rate high too which will negatively harm your site’s ranking Google.
With this regard, Typer theme has taken various measures to ensure that this is minimized to the best of its efforts.
Typer theme has been coded and structured in a way to ensure that its performance is great. It has done this by ensuring that its resources are only available when needed at the same time providing features that most users need.
In this tutorial we look at several ways that you can use to improve performance on the Typer theme alongside other recommendations.
Step 1: Pre-loading Prioritized Resources
In Typer theme, users are allowed to prioritize the most important resources that should be displayed to the user before others. Technically, this is done by using the attribute: <link rel=”preload”> to trigger an onload page event.
However, such resources are cached or stored within the user’s browser until once called upon again. This helps the site load faster once opened up again. In the Typer theme, we consider CSS resource files to be more prioritized than others.
Therefore all CSS files are loaded first, before others as they are stored locally within the user’s browser. More so, Typer theme ensures that you do not have to add the link attribute in every CSS file, but instead offers an option to do this with a click of a button.
To enable these settings head over to your WordPress Dashboard >> Appearance >> Customizer.
In the Typer customizer, you will find a panel on the left hand side, simply select “Typer Options” on it.
Then, this takes you to the themes various settings, but for this case, select “Performance”. Under this option, you simply need to toggle on the “Preload theme CSS files” and once done click on Save or Publish for the changes to take effect. This should make the loading speeds of your Typer themed site more faster.
Step 2: Lazy-Loading Images
This is a strategy used in most of our themes and recommended for other themes as well. Image lazy loading basically means that only images within the viewpoint (browser/device on – screen) are loaded while others are loaded dynamically upon scrolling or when requested.
For web pages or posts with a lot of images it could save on the waiting time which entirely increases speed for loading the site. Lazy loading also saves on the bandwidth of the user, however it is not recommended for instances with slower connections as result in content jumping. Read more on (Lazy Loading Images).
To enable this feature, login to your site’s Dashboard >> Appearance >> Customizer. In the Typer customizer, from the left panel select “Typer Options” . Under the Typer options select the Performance” option. On this section you will find the lazy loading option under which the user can switch on or off, for this case select “Lazy-load on”.
Step 3: Using Autoptimize Plugin
Autoptimize plugin is a recommended WordPress plugin when using Typer, that will do most of the speed optimizations techniques for you automatically. Mostly it concentrates on optimizing your Typer themed website’s assets such as Javascript, CSS and HTML. These assets are minified or concatenated if you enable optimization options for each of them. Minification simply means shrinking the sizes of a file by removing unwanted characters, while on the other hand, concatenation means combining several files of the same asset into a single one (like combining many CSS files into one).
With Autoptimize, you will get a range of features such as:
- Optimize JS, CSS and HTML Codes
- Aggregate JS, CSS files.
- Aggregate inline JS while forcing JavaScript in <head> tag so as to be loaded first.
- Also aggregating inline CSS in the HTML files.
- Generate data: URIs for images to include small background-images in the CSS itself instead of as separate downloads.
By checking these options it has also an option to minify all these assets while aggregating them and exclude those that are not minified. Aggregated files are also saved as static files
Users can download the plugin on the WordPress plugin directory and activate it at no cost. Once done you will need to head over to Dashboard >> Settings >> Autoptimize. In this section you will find several features but we do recommend switching to the following settings:
JS, CSS & HTML Tab
- Enable: Optimize JavaScript Code and Aggregate JS-files
- Enable: Optimize CSS Code, Aggregate CSS-files, Also aggregate inline CSS, Generate data: URIs for images and finally Inline all CSS.
- Enable: Optimize HTML Code?
- Enable: Save aggregated script/css as static files, Minify excluded CSS and JS files and Also optimize for logged in editors/ administrators.
Images Tab
- Enable: Optimize Images
- Under Image Optimization quality choose Lossless
- Enable: Load WebP in supported browsers
- Enable: Lazy-Load Images
Extra Tab
- Enable: Remove query strings from static resources
Other settings within the plugin can be enabled by the user according to his/her suitability. Under each of the following sections ensure you save all the changes to take effect.
Step 4: Using WP Super Cache
Another method that enhances great performance using the Typer theme is the Caching technique. It is basically when data is temporarily stored within the users’ browser so that the next time the visitor visits the site, it will not have to load the data again but instead retrieve it. This approach can either happen on the browser or the server side.
With Typer theme we do recommend the use of WP Super Cache plugin. You will need to install and activate it and once done, head over to WordPress Dashboard >> Settings >> WP Super Cache. On its settings page simple click on the “Caching On” option to enable it.
Under the Advanced tab select “Enable Caching” while in the Miscellaneous section also check “Enable caching for all visitors” and “Cache Rebuild”. Users can enable other features too in case they seem fittable for your site.
Below is an illustration on the speed results before and after carrying out the above steps:
