Swift Settings: Optimization tab

You are here:
Estimated reading time: 12 min

General

Merge Assets for Logged in Users – Enable if you would like to merge styles and scripts for logged in users as well..It is recommended to enable this option only if the site is using action based cache or the cache is cleared very rarely. Otherwise it will optimize for logged in users in real time, which can damage the user experience.

Enable Server Push – Server push allows you to send site assets to the browser before it has even asked for them.

HTTP/2 is the new generation of the venerable HTTP protocol that powers the web. Among its most powerful features is server push, a way for web servers to send resources to the browser before it even realizes it needs them. This avoids the usual HTTP request/response cycle which happened for every script or stylesheet on a page. This feature enables your website to send a Link:<...> rel="prefetch"header for every enqueued script and style as Swift outputs them into the page source. Unfortunately, it can’t help plugins and themes that output their scripts directly into the page itself, but these will continue to work as they always have. Requires a web server that supports HTTP/2. This feature is available only in Pro version.

Optimize Prebuild Only – In some cases optimizing the page takes some time. If you enable this option the plugin will optimize the page, only when prebuild cache process is running. It is recommended to use this option, to prevent very long pageloads for the first visit (when the page is not cached yet).  It is also recommended to use with Prebuild Cache Automatically option in Settings->Caching->Warmup.

Optimize in Background – In some cases optimizing the page takes some time. If you enable this option the plugin will optimize page in the background. If you have a large site with hunderds of URLs and your website is on shared hosting with limited resources, we suggest to disable the Prebuild Cache Automatically in Settings->Caching ->Warmup and enable this feature, and disable the feature as described above: Optimize prebuild only.

Fix Invalid HTML – Sometimes themes and plugins contain invalid HTML, which doesn’t cause issues in browser, because the browser can fix it on the fly, but it can cause issues with the DOM parser in Swift. If you enable this option Swift will fix these issues automatically like the modern browsers does. But honestly, it’s best practice is to make sure that your code is valid.

Minify HTML –  Remove unnecessary whitespaces from HTML.  Using this feauture can bring positive results with the decrease in HTML file size. It is the best way to HTML minification of your website or service especially if it requires a higher of bandwidth. Above that, it speeds up things and make your website a little bit faster.

Disable Emojis – Most sites are not using emojis at all, however WordPress is loading it by default. If you disable it you can decrease the number of requests and page size as well. This feauture disables the new WordPress emoji functionality. Note: Emoticons will still work and emoji’s will still work in browsers which have built in support for them. This feauture simply removes the extra code bloat used to add support for emoji’s in older browsers.

Limit Simultaneous Threads – Limit maximum simultaneous threads. It can be useful on shared hosting environment to avoid 508 errors. Shared hosting providers often monitors and regulates account resource usage to help improve server performance and stability for all users on which share same resources on the same server. In order to be able to guarantee clients that their websites remain online they often limit resources on their servers. To prevent this, providers set limit restricts to the number of concurrent connections to dynamic (php & cgi) scripts for their users. On (very) limited (shared) hosting we suggest to enable this and set Maximum Threads to 1.

DOM Parser Max Buffer – Swift’s DOM parser will skip pages which are larger than this value. It is recommended to use the deafult value, change it only if support suggested it.

Scripts

Merge Scripts – Merging scripts can reduce number of requests dramatically. Even if your server is using HTTP2 it can speed up the page loading, and also save some resources on server side (because the server needs to serve less requests). This feauture combines javascript files. The javascript files must be enqueued by using wp_enqueue_script. This plugin combines all local JS files into a single file and includes the file in the footer of the website source. Why should you enable Merge Scripts?

  1. Browsers can download a single file more efficiently and faster than downloading multiple smaller files. One http connection downloading the file is usually faster than many http connections downloading smaller files.
  2. The browser has a limit on how many simultaneous connections it will make to the same domain and, if it reaches that limit, some connections have to then wait until others finish. This causes delays in download. Downloading fewer files make it less likely to hit this limit. This limits applies to all connections to a domain (download of JS files, download of CSS files, download of frames, ajax calls, etc…).
  3. Server scalability can be increased because each page download requires fewer http connections to serve the content.
  4. There are cases where version control and the interaction between version upgrades and browsing JS file caching can be simpler with one larger JS file. When all your JS files are concatenated, you can assign a single version number to that combined JS file (like jQuery does with its versions). Then, any change to the JS anywhere causes a bump in the version number for the master combined file. Since a given browser gets the entire combined file all or nothing, there is never an opportunity for a browser to accidentally get one version of one file fresh from the server and another version of another file from a stale browser cache. Also, maintaining one master version number is a lot simpler than versioning lots of smaller files.

Async Execute – When enabled, it specifies that the script will be executed asynchronously as soon as it is available. When loading a script on your page, you need to be careful not to harm the loading performance of the page. A script is traditionally included in the page in this way: <script src="script.js"></script whenever the HTML parser finds this line, a request will be made to fetch the script, and the script is executed. Once this process is done, the parsing can resume, and the rest of the HTML can be analyzed. As you can imagine, this operation can have a huge impact on the loading time of the page. If the script takes a little longer to load than expected, for example if the network is a bit slow or if you’re on a mobile device and the connection is a bit sloppy, the visitor will likely see a blank page until the script is loaded and executed.

Exclude 3rd Party Scripts – Exclude 3rd party scripts from merged scripts. If Async Execute is creating any issue on your site, you can exclude 3rd party scripts from to avoid conflicts.

Exclude Scripts – Exclude scripts from being merged if one of these strings is found in the match. Not all scripts will still function well when combined into one single file. The only way to figure out which Javascript doesn’t like to be merged, you will have to test every single file. In the image above you can see that I excluded a few files from being combined. The merged Javascript file will be loaded in the footer. This way it doesn’t block the content loading process. Your website will load much faster! When you need to exclude a javascript file because it´s conflicting when merged you can do it like this: https://yourdomain.com/wp-includes/js/tinymce/tinymce.min.js?ver=4800-20180716, you can set it like this:

How to find scripts to exclude? We understand it can be difficult to locate which inline JS to exclude, so we’ll walk through one way to do it here.

Footer Scripts – It can be useful if you would like to exclude a script which is using a dependency from the merged scripts. For example, if jQuery is merged, but you want to exclude a script which is using jQuery. This feature will do all the magic and moves scripts to the footer. Note. that this only works if you have plugins and a theme that utilizes wp_enqueue_scripts correctly. This feature is available only in Pro version.

Exclude Inline Scripts – Exclude inline scripts from being merged. When you enable the option Merge Scripts, JavaScript files automatically applies also to inline JS and 3rd party scripts. If this behavior is creating any issue on your website, you can exclude inline Scripts from merging. Find a unique string in the inline JS you wish to exclude and place that in the Exclude Inline Scripts field. Swift will search for this string in the inline Scripts to decide if it should be excluded or not.

Footer Inline Scripts – Exclude scripts from being merged and move them to footer.

Exclude Script Localizations – It is recommended to exclude script localizations, because they can increase the merged script’s loading time, but there is no real benefit to including them. Please note that localizations contain variables and personalized data you should enable this option. Otherwise you may will have separate js files for all of your pages.

Minify Javascripts – Minifying a Javascript file makes it smaller to download and parse which increases download performance.If you are both merge javascript and minifying, the minifying can be more effective. When minifying multiple small files separately, you cannot minify variable names that are shared between the different files – they must retain their original names. But, if you combine all the Javascript files and then minify, you can minify all symbols that are shared among the different Javascript files (as long as they aren’t shared externally).

Minify with API – Some scripts are not fully valid, but still operational (eg: missing semicolon). These scripts can cause issues when you minify them. If you use the API for script minify it can fix this parsing errors, but please note it will a bit slowdown the minifing process. This feature is available only in Pro version.

Proxy 3rd Party Assets – Proxy 3rd party javascript and CSS files which created by javascript (eg: Google Analytics). It can improve the browser caching (set more reasonable expiry time), however it can break scripts sometime. Use it carefully. Note: to solve analytics.js expiry header issue you should use Google Analytics Bypass instead. In 3rd Party Assets you can set these. Note. it is legacy only, best practice is to use include assets instead, for example google maps load a lot of javascript (JS), such as common.js, utils.js, etc. You can include them to merged script and prevent to load them via javascript. An example to use/set this is feature is layerslider plugin, which load some CSS via javascript.

Separate Scripts – If you enable this option the plugin will save merged JS files for pages separately. The average size of a cached page should be about 200-400Kb. That means if you have 1.000 pages the normal cache size will be about 200-400 Mb. This feature may prevent unwanted large growing cache size if there is a dynamic part in JS or CSS – some themes/plugins creates dynamic js.

Print merged scripts inline – Add merged scripts into the footer, instead of a seperated file. There are a lot of options with Swift you have as a website owner when it comes to running speed tests to check performance. This feauture you can use and compare what is best for your website. It works best if you don’t have lots of Jacascript and the top of your website doesn’t use Javascript, eg. menu, photoslider, critical popups, etc….if any, exclude them). Keep this disabled if Javascript is needed for initial page items or you need faster prebuild.

Lazy Load Scripts – With this feature you can be sure that included scripts will be loaded very last, and won’t delay rendering process. Use this feauture to easily define what elements are lazy loaded and when they become visible in the users browser. As the user scrolls down the page the next lot of elements you have applied lazy Load to are only loaded when they become necessary.

Include Scripts – With this option you can preload script files what are loaded with javascript.

Disable jQuery Migrate – jQuery Migrate was added from  WordPress version 3.6. Most frontend code doesn’t need this. Purpose of adding this is to keep outdated jquery code functional on newer WordPress sites. You can disable it now with this feauture, without any issues, except when you are using outdated theme and/or plugins. Gives a little bit of extra speed.

Styles

Merge Styles – Merge several CSS files into single file. Merging styles can reduce number of requests dramatically. Even if your server is using HTTP2 it can speed up the page loading, and also save some resources on server side (because the server needs to serve less requests). In many cases, websites contain multiple CSS files which must all be fetched from the server in order to fully load the web page. This process of downloading each file separately however, takes more time as additional requests must be made which consequently increases latency. Merging your CSS files is beneficial for a few reasons. First off, the number of requests can be drastically reduced given your website uses multiple CSS files to render the page. If for example, your page loads 5 CSS files, merging your CSS into a single separate file each would result in 4 less requests.

Additionally, all CSS files are render blocking which means that the more CSS files are loaded, the more likely this will interrupt your page’s critical path. Having multiple JavaScript files can also be troublesome to the parsing of your HTML document given they are not deferred properly.

Generate Critical CSS – This feature generate the Critical CSS (or Critical Path) on the fly for every page. What is Critical CSS? A request for a CSS file can significantly increase the time it takes a web page to render. The reason is that by default the browser will delay page rendering until it has finished loading, parsing and executing all the CSS files referenced in the <head> of your page. It does this because it needs to calculate the layout of the page. Unfortunately, this means that if we have a really large CSS file and it takes a while to download, our users will end up waiting until the whole file has been downloaded before the browser can begin rendering the page. Fortunately, there is a sneaky technique that allows us to optimize the delivery of our CSS and mitigate the blocking. This technique is known as optimizing the critical rendering path.

Critical CSS method Unused CSS mode will find unused CSS and remove it from Critical CSS. Viewport based mode will load only those rules, which are necessary to render “Above the fold” content. Please note, if you select Viewport based mode the full HTML will be sent to the API which may contains personal data. If it does you may have to include this in your privacy policy.

Extra Critical CSS – If you would like to add some custom CSS rules to Critical CSS you can add them here.

Disable Full CSS – On simple sites, which are using only a few modifications on the loaded site you can totally disable the full CSS. If you would like to use this, please be careful, and test all pages. If something is missing you can add them with Extra Critical CSS.

Compress Critical CSS – If you enable this feature Swift will change all class names and ids in the critical CSS to a shorter one, so you can save some extra bytes.

Remove Keyframes – Remove CSS animations from critical CSS. Complex CSS animations can increase CSS size, however in some cases animations are not necessary for rendering the above the fold content. With this option you can remove CSS animations from critical CSS.

Print critical CSS inline – Enable if you would like to print the critical CSS into the header, instead of a seperated CSS file. Please note that the critical CSS is already a blocking resource you should inline it in <head>.

Print full CSS inline – Enable if you would like to print the merged CSS into the footer, instead of a seperated CSS file. It is a really rare situation, usually you don’t need it. Please note that this is a special feature only for special cases. If WordPress can write files on the server you shouldn’t use this option, even if page speed scores are better, because with this you will prevent the browser to cache the CSS. and it will be downloaded each time when the visitor is navigating on your site. You should use this function only if WordPress can’t write files and you would like to cache everything with Memcached!

Separate Styles – If you enable this option the plugin will save merged CSS files for pages separately. The average size of a cached page should be about 200-400Kb. That means if you have 1.000 pages the normal cache size will be about 200-400 Mb. This feature may prevent unwanted large growing cache size if there is a dynamic part in JS or CSS.

Minify CSS – Remove unnecessary whitespaces, shorten color codes and font weights. You have 3 options, eg, Don’t Minify, Basic and Full (Full is available only in Pro version). Minifying a CSS file makes it smaller to download and parse which increases download performance.If you are both merge Styles and minifying, the minifying can be more effective. When minifying multiple small files separately, you cannot minify variable names that are shared between the different files – they must retain their original names. But, if you combine all the Styles files and then minify, you can minify all symbols that are shared among the different Styles files (as long as they aren’t shared externally).

Bypass CSS Import – If you enable this option your merged CSS will include imported CSS files as well. With this option you can decrease the number of requests, it is recommended to use.

Exclude 3rd Party CSS – Exclude third party CSS files (eg: Google Fonts CSS) from merged styles. Usually you don’t need this option.

Exclude Styles – Exclude styles from being merged if one of these strings is found in the match. Not all styles will still function well when combined into one single file. The only way to figure out which Style doesn’t like to be combined, you will have to test every single file. In the image you can see that we excluded a file from being merged. The merged Style/CSS file will be loaded in the header. When you need to exclude a CSS file because it´s conflicting when merged you can do it like this: https://yourdomain.com/wp-content/themes/css/style.css, you can set it like this:

Exclude Inline Styles – Exclude inline styles from being merged. When you enable the option Merge Styles, CSS files automatically applies also to inline CSS and 3rd party scripts. If this behavior is creating any issue on your website, you can exclude inline Styless from merging. Find a unique string in the inline Style you wish to exclude and place that in the Exclude Styles field. Swift will search for this string in the inline Styles to decide if it should be excluded or not.

Include Styles – Include styles manually. With this option you can preload css files what are loaded with javascript.

Note. Some features requires advanced knowledge of website optimization and development. Enabling, Merge, Include, Exclude styles & scripts is a highly complex task, while the result may not even make your website load that much faster. Skipping this option might be your best choice unless you’re an experienced web developer who already knows how to handle with resources in general.

Force Swap Font Display – The font-display property defines how font files are loaded and displayed by the browser. Swap instructs the browser to use the fallback font to display the text until the custom font has fully downloaded to avoid “flash of invisible text” (FOIT). This feature is available only in Pro version.

Exclude Force Swap Font Display – If necessary you may exclude font family from being forced to use swap font-display here. To exclude use Font name, Eg IsidoraSans-Bold or OpenSans.

Was this article helpful?
Dislike 0 0 of 0 found this article helpful.