Think with Google - Test My Site
How I built a page speed testing tool for Google.
About
As part of Google’s partnership with Beyond, I led the backend development of “Test My Site”, a tool that helps businesses understand the impact of mobile speed and provides recommendations for improvement.
Build
The frontend uses Angular for the client side, and the backend is built with Python and exposes a REST API to the frontend. The API endpoints are implemented with Cloud Endpoints and hosted on Google App Engine.
The Foundation for Emails Template framework is used to create responsive emails for transactional emails. The emails deliver a PDF report attached with the mobile site speed and improvement suggestions. The PDFs are generated using the library xhtml2pdf.
The site content, emails, and PDF reports are localized in 18 locales 🌎.
Babel is used for localizing text across all application templates (client-side templates, email templates, PDF templates, and strings in Python code).
The Chrome UX Report raw data in BigQuery is imported periodically to Cloud Datastore, using a custom Cloud Dataflow job. This data along with other Google internal data is then used by the tool to generate the speed report and suggestions.
Role
- Backend lead/developer
- Provided estimates, scoping and technical oversight
Challenges
This was a small project and the challenges were content localization and PDF generation
- Content Localization - Updating localized content was a very manual task, copying/pasting localized content from an internal system to PO/POT files. When a new content copy was introduced, it would take a couple of days to have translations available for the 18 locales.
- PDF CSS - xhtml2pdf is fast at rendering PDFs but only supports a subset of CSS, making it tricky to implement the designs pixel-by-pixel.
- PDF Fonts & Languages - The PDF report designs used a specific Google Font that did not support Chinese, Japanese, and Korean (CJK) languages. Adding PDF font support for languages like Vietnamese was challenging.
- PDF & Dynamic Report Nature - Users had the flexibility to check the speed for a single page or multiple pages if they were interested. The system displayed mobile speed metrics and recommendations for each page. However, when generating the PDF, a challenge arose in ensuring that tables were not split across multiple pages (e.g., half table on page 3 and the remaining on the next page). Unfortunately, the xhtml2pdf library did not provide any assistance in this case, necessitating the development of custom logic to address the issue.
Learnings
In general, it was nice to work on this small project, here are my observations:
- Managing the translations was a very manual process and boring sometimes. We couldn’t use any translation service for this client; however, using a third-party translation service would improve the translation process.
Results
- 80k pages views in the first 5 days
- 60% completion rate
Media
