diff --git a/.gitignore b/.gitignore
index 261a0e57..79b9d1f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 script/output/*
 .DS_Store
-node_modules
\ No newline at end of file
+node_modules
+.idea
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index 512e9a0b..eac7ee2c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1436,6 +1436,25 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@loadable/component": {
+      "version": "5.10.3",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.3.tgz",
+      "integrity": "sha512-/aSO+tXw4vFMwZ6fgLaNQgLuEa7bgTpoBE4PxNzf08/ewAjymrCS3J7v3SbGE7IjGmmKL6vVwkpb7S3cYrk+ag==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
+          "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "@material-ui/core": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.2.tgz",
diff --git a/web/package.json b/web/package.json
index 6f722b21..b7883158 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@babel/core": "7.2.2",
+    "@loadable/component": "^5.10.3",
     "@material-ui/core": "4.5.2",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/system": "^4.3.0",
diff --git a/web/src/App.js b/web/src/App.js
index b4790f56..676a7d6e 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -2,32 +2,68 @@ import React from 'react'
 import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles/'
-import IndexPage from 'components/pages/landing'
-import ProfilePage from 'components/pages/profile'
-import DistrictPage from 'components/pages/district'
-import DistrictListPage from 'components/pages/district/list'
-import BattleGroundPage from 'components/pages/battleground'
-import DisclaimerPage from 'components/pages/disclaimer'
-import AboutDCPage from 'components/pages/about/dc'
-import NotfoundPage from 'components/pages/notfound'
-import SupportUsPage from 'components/pages/support-us'
+import loadable from '@loadable/component'
 import ApolloClient from 'apollo-boost'
 import { ApolloProvider } from 'react-apollo'
 import theme from 'ui/theme'
 import './App.css'
 import Box from '@material-ui/core/Box'
 import styled from 'styled-components'
-import MobileAppBar from 'components/organisms/MobileAppBar'
-import ShareButton from 'components/organisms/ShareButton'
-import Footer from 'components/organisms/Footer'
 import { ContextStoreProvider } from 'ContextStore'
 import withTracker from './WithTracker'
-import SearchDrawer from 'components/pages/SearchDrawer'
-import DistrictOverviewPage from 'components/pages/district/overview'
-import DistrictAllPage from 'components/pages/district/all'
-import GlobalDisclaimer from 'components/organisms/GlobalDisclaimer'
-import { fireEvent } from 'utils/ga_fireevent'
 import i18n from 'i18n'
+import { fireEvent } from 'utils/ga_fireevent'
+
+const IndexPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/landing')
+)
+const ProfilePage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/profile')
+)
+const DistrictPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district')
+)
+const DistrictListPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/list')
+)
+const BattleGroundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/battleground')
+)
+const DisclaimerPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/disclaimer')
+)
+const AboutDCPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/about/dc')
+)
+const NotfoundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/notfound')
+)
+const SupportUsPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/support-us')
+)
+const DistrictOverviewPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/overview')
+)
+const DistrictAllPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/all')
+)
+
+const MobileAppBar = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/MobileAppBar')
+)
+const Footer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/Footer')
+)
+const SearchDrawer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/SearchDrawer')
+)
+const GlobalDisclaimer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/GlobalDisclaimer')
+)
+
+const ShareButton = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/ShareButton')
+)
 
 const client = new ApolloClient({
   uri: process.env.REACT_APP_GRAPHQL_URI,
diff --git a/web/src/components/organisms/Footer.js b/web/src/components/organisms/Footer.js
index 87302e3d..8a593d00 100644
--- a/web/src/components/organisms/Footer.js
+++ b/web/src/components/organisms/Footer.js
@@ -41,6 +41,9 @@ const LinkBox = styled(Box)`
 function Footer(props) {
   const { t } = useTranslation()
   const currentLanguage = getCurrentLanguage()
+  React.useEffect(() => {
+    window.FB.XFBML.parse()
+  }, [])
   return (
     <>
       <StyledFooter>